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

Результат:

Ошондой эле караңыз