Тег thead

Тег thead жадвалнинг юкори кисмини белгилайди. Сатрларни шундай гуруҳлаш учун ишлатиладики, дарҳол маълум бир гуруҳга CSS услубларини қўллаш мумкин бўлади. Битта жадвалда фақат битта тег thead бўлиши мумкин.

Тег thead кўпинча билан бирга tbody ва tfoot HTML жадвалининг юкори кисми, асосий кисми ва пастки кисмини белгилаш учун ишлатилади.

Мисол

Келгила, тег билан гуруҳланган сатрлар гуруҳига thead, хусусияти ёрдамимида матннинг қизил рангни қўшайлик color:

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;
}

Результат:

Мисол

Бу ерда эса thead юкорида эмас, ва tfoot пастда эмас, шу билан бирга браузер уларни ўз жойларига жойлаштиради:

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;
}

Результат:

Шунингдек қаранг

  • теглар tbody, tfoot,
    жадвал сатрларини гуруҳлайди
  • тег caption,
    бу butun жадвалнинг сарлавҳасини белгилайди
  • атрибутлар rowspan ва colspan,
    жадвалнинг сатр ва устунларини бирлаштиради