Thead teqi

thead teqi cədvəlin yuxarı hissəsini təyin edir. CSS stillərini dərhal müəyyən bir qrupa tətbiq etmək üçün sıraları qruplaşdırmaq üçün istifadə olunur. Bir cədvəldə yalnız bir thead teqi ola bilər.

thead teqi tez-tez tbody və tfoot ilə birlikdə HTML cədvəlinin yuxarı hissəsini, əsas hissəsini və aşağı hissəsini təyin etmək üçün istifadə olunur.

Nümunə

Gəlin thead teqi ilə birləşdirilmiş sıra qrupuna color xassəsindən istifadə edərək qırmızı mətn rəngi əlavə edək:

html<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surn</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>name1</td>
      <td>surn1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>name2</td>
      <td>surn2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>count: 2</td>
      <td>-</td>
      <td>total: 1200$</td>
    </tr>
  </tfoot>
</table>
cssthead {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

Nümunə

Burada isə thead yuxarıda deyil, tfoot də aşağıda deyil, buna baxmayaraq brauzer onları öz yerinə qoyacaq:

html<table>
  <tfoot>
    <tr>
      <td>count: 2</td>
      <td>-</td>
      <td>total: 1200$</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>name1</td>
      <td>surn1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>name2</td>
      <td>surn2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surn</th>
      <th>Salary</th>
    </tr>
  </thead>
</table>
csstable, td, th {
  border: 1px solid black;
}

Результат:

Həmçinin bax

  • cədvəl sıralarını qruplaşdıran teqlər: tbody, tfoot
  • bütün cədvəl üçün başlıq təyin edən caption teqi
  • cədvəl sıralarını və sütunlarını birləşdirən rowspan və colspan atributları