Тег 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;
}

Результат:

Сондай-ақ қараңыз