HTML-də cədvəllər

1. <table> elementi

HTML məlumatların strukturlaşdırılmış şəkildə təqdim edilməsi üçün rahat yol təqdim edir – cədvəllərdən istifadə. Cədvəllər məlumatları sətir və sütun şəklində təşkil etməyə kömək edir, bu da onları ədədi məlumatların, cədvəllərin, qiymət siyahılarının və digər strukturlaşdırılmış məlumatların təqdim edilməsi üçün əlverişli edir. Gəlin, cədvəllərin yaradılması üçün əsas HTML teqləri necə istifadə olunur baxaq: <table>, <tr>, <td> və <th>.

<table> teqi cədvəl üçün konteyner kimi xidmət edir. Cədvəlin başlanğıcını və sonunu qeyd etmək üçün istifadə olunur və cədvəl ilə əlaqəli digər bütün teqləri ehtiva edir.

<table> teqi ilə cədvəlin yaradılması nümunəsi:

<table>
  <!-- Burada cədvəlin sətirləri və xanaları yerləşir -->
</table>

<table> teqi cədvələ çərçivə vermək üçün əlavə olaraq border atributu ilə stilizə edilə bilər:

<table border="1">
  <tr>
    <td>Nümunə xana</td>
  </tr>
</table>

Burada border="1" atributu cədvəlin və onun xanalarının ətrafında çərçivə əlavə edir, onları görünən edir.

2. <tr> elementi

<tr> etiketi cədvəl sətrini (table row) ifadə edir. Hər bir cədvəl sətri <tr> etiketi daxilində olmalıdır və həmin etiket də <table> daxilində yerləşdirilməlidir.

Nümunə:

<table border="1">
  <tr>
    <td>Hüceyrə 1</td>
    <td>Hüceyrə 2</td>
  </tr>
  <tr>
    <td>Hüceyrə 3</td>
    <td>Hüceyrə 4</td>
  </tr>
</table>

Bu nümunədə, cədvəl iki sətrdən ibarətdir. Hər bir sətir iki hüceyrədən ibarətdir.

3. <td> elementi

<td> (table data) teqi cədvəldə məlumat olan hüceyrələr yaratmaq üçün istifadə olunur. Bu, cədvəlin adi bir hüceyrəsini ifadə edir və orada mətn, şəkil və ya başqa HTML kontenti yerləşdirilə bilər.

<td>-nin istifadə nümunəsi:

<table border="1">
  <tr>
    <td>Hüceyrə 1</td>
    <td>Hüceyrə 2</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td>Hüceyrə 1</td>
    <td>Hüceyrə 2</td>
  </tr>
</table>

<td> hüceyrələri cədvəlin əsas məzmununu yaradır və <tr> sətirlərin içində yerləşdirilir.

4. <th> elementi

<th> (table header) tagı cədvəlin başlıqlarını yaratmaq üçün istifadə olunur. <th> ilə yaradılan xanalarda mətn standart olaraq qalın şriftlə yazılır və mərkəzə uyğunlaşdırılır. Bu, sütun və ya sətir başlıqlarını göstərmək üçün əlverişlidir.

Başlıqları olan cədvəlin nümunəsi:

    
<table border="1">
  <tr>
    <th>Ad</th>
    <th>Yaş</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>25</td>
  </tr>
  <tr>
    <td>İvan</td>
    <td>30</td>
  </tr>
<table border="1">
    
  

    
<table border="1">
  <tr>
    <th>Ad</th>
    <th>Yaş</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>25</td>
  </tr>
  <tr>
    <td>İvan</td>
    <td>30</td>
</tr>
<table border="1">
    
  

Bu nümunədə <th> «Ad» və «Yaş» başlıqlarını göstərmək üçün istifadə olunur ki, bu da istifadəçilərə hər sütundakı məlumatın nə anlama gəldiyini tez başa düşməyə imkan verir.

5. Cədvəllərin Strukturlaşdırılması

Çətin, başlıqları, məlumatları və altbilgiləri əhatə edən cədvəllər yaradarkən HTML elementlərindən <thead>, <tbody> və <tfoot> istifadə etməyə imkan verir. Bu taglər cədvəli üç məntiqi hissəyə bölməyə kömək edir:

• <thead> (table head) — Cədvəlin yuxarı hissəsi, adətən sütun başlıqları yerləşir.
• <tbody> (table body) — Cədvəlin əsas məzmun hissəsi.
• <tfoot> (table footer) — Cədvəlin aşağı hissəsi, yekun dəyərləri və ya qeydləri əlavə edə bilərsiniz.

Bu taglərdən istifadə edərək strukturlaşdırılmış cədvəl nümunəsi:

<table border="1">
  <thead>
    <tr>
      <th>Məhsul</th> <th>Qiymət</th> <th>Miqdar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Almalar</td> <td>50 AZN</td> <td>10</td>
    </tr>
    <tr>
      <td>Bananlar</td> <td>30 AZN</td> <td>20</td>
    </tr>
    <tr>
      <td>Üzüm</td> <td>70 AZN</td> <td>5</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Cəmi</td> <td>35</td>
    </tr>
  </tfoot>
</table>

<table border="1">
<thead>
<tr>
  <th>Məhsul</th> <th>Qiymət</th> <th>Miqdar</th>
</tr>
</thead>
<tbody>
<tr>
  <td>Almalar</td> <td>50 AZN</td> <td>10</td>
</tr>
<tr>
  <td>Bananlar</td> <td>30 AZN</td> <td>20</td>
</tr>
<tr>
  <td>Üzüm</td> <td>70 AZN</td> <td>5</td>
</tr>
</tbody>
<tfoot>
<tr>
  <td colspan="2">Cəmi</td> <td>35</td>
</tr>
</tfoot>
</table>

Bu nümunədə:

• <thead> cədvəl başlığını <th> hüceyrələri ilə əhatə edir ki, bunlar sütunları ifadə edir.
• <tbody> məhsullar haqqında məlumat olan sətirləri əhatə edir.
• <tfoot> yekun dəyər üçün sətir əlavə edir.

<thead>, <tbody>, <tfoot> istifadə etməyin üstünlükləri:

Bu elementlər kömək edir:

1. Cədvəli məntiqi olaraq ayırmağa — cədvəl quruluşunu daha anlaşıqlı və oxunaqlı edir.
2. Stilizasiya və məlumat idarəsini sadələşdirməyə CSS və JavaScript vasitəsilə.
3. Əlçatanlığı artırmağa: bəzi brauzerlər və ekran mətn oxuyucuları bu taglərdən istifadə edərək cədvəl quruluşunu daha yaxşı anlayır.

6. Cədvəl hüceyrələrinin birləşdirilməsi

HTML üfüqi və şaquli istiqamətdə cədvəl hüceyrələrini colspan və rowspan atributları vasitəsilə birləşdirməyə imkan verir.

colspan ilə üfüqi birləşdirmə

colspan atributu hüceyrələri üfüqi istiqamətdə birləşdirir, hansı sütunlara qədər hüceyrənin yayılacağını göstərir.

<table border="1">
  <tr>
    <th colspan="3">Cədvəl genişliyinin hamısı üçün başlıq</th>
  </tr>
  <tr>
    <td>Hüceyrə 1</td>
    <td>Hüceyrə 2</td>
    <td>Hüceyrə 3</td>
  </tr>
</table>

<table border="1">
  <tr>
    <th colspan="3">Cədvəl genişliyinin hamısı üçün başlıq</th>
  </tr>
  <tr>
    <td>Hüceyrə 1</td> <td>Hüceyrə 2</td> <td>Hüceyrə 3</td>
  </tr>
</table>

Bu nümunədə başlıq hüceyrəsi üç sütunu birləşdirir və bütün cədvəl üçün vahid başlıq yaradır.

rowspan ilə şaquli birləşdirmə

rowspan atributu hüceyrələri şaquli istiqamətdə birləşdirir, hansı sətirlərə qədər hüceyrənin yayılacağını göstərir.

    
  <table border="1">
    <tr>
      <th rowspan="2">Kateqoriya</th>
      <th>Məhsul</th>
      <th>Qiymət</th>
    </tr>
    <tr>
      <td>Almalar</td>
      <td>50 rubl</td>
    </tr>
  </table>
  

  
<table border="1">
  <tr>
    <th rowspan="2">Kateqoriya</th> <th>Məhsul</th> <th>Qiymət</th>
  </tr>
  <tr>
      <td>Almalar</td> <td>50 rubl</td>
  </tr>
</table>

Burada “Kateqoriya” mətnli hüceyrə iki sətri şaquli istiqamətdə birləşdirir.

7. Tam nümunə

Başlıq, əsas hissə və altbilgiyə, həmçinin şaquli və üfüqi olaraq hüceyrələrin birləşdirilməsinə malik cədvələ nəzər salaq.

    
<table border="1">
  <thead>
    <tr>
      <th>Kateqoriya</th>
      <th>Məhsul</th>
      <th>Qiymət</th>
      <th>Miqdar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Meyvələr</td>
      <td>Almalar</td>
      <td>50 rubl</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Bananlar</td>
      <td>30 rubl</td>
      <td>20</td>
    </tr>
    <tr>
      <td colspan="3">Meyvələr üçün yekun</td>
      <td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Cədvəlin sonu</td>
    </tr>
  </tfoot>
</table>

  <table border="1">
    <thead>
      <tr>
        <th>Kateqoriya</th>
        <th>Məhsul</th>
        <th>Qiymət</th>
        <th>Miqdar</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">Meyvələr</td>
        <td>Almalar</td>
        <td>50 rubl</td>
        <td>10</td>
      </tr>
      <tr>
        <td>Bananlar</td>
        <td>30 rubl</td>
        <td>20</td>
      </tr>
      <tr>
        <td colspan="3">Meyvələr üçün yekun</td>
        <td>30</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4">Cədvəlin sonu</td>
      </tr>
    </tfoot>
  </table>
  

Bu nümunədə:

• “Meyvələr” hüceyrəsi şaquli olaraq iki sətir birləşdirilib rowspan="2".
• “Meyvələr üçün yekun” sətri üfüqi olaraq üç sütunu birləşdirir colspan="3".
• <thead> və <tfoot> cədvəlin başlıq və alt hissələrini təşkil edir, cədvəldə asan orientasiyanı təmin edir.

<thead>, <tbody> və <tfoot> elementləri, həmçinin colspan və rowspan atributları istifadə edərək, istifadəsi rahat və strukturlaşdırılmış cədvəllər yaratmaq mümkündür. Belə cədvəllər təkcə səliqəli görünüşə malik deyil, həm də funksionallığı artıraraq, onları oxumağı və onlarla işləməyi daha rahat edir.