Справочник HTML & CSS

<thead>, <tbody>, <tfoot>

Группы строк таблицы: шапка, тело и итоговая часть.

Синтаксис

<table>
  <thead>…</thead>
  <tbody>…</tbody>
  <tfoot>…</tfoot>
</table>

Примеры

Таблица заказа с итогом:

<style>
  table { border-collapse: collapse; }
  td, th { padding: 4px 10px; text-align: left; }
  thead { background: #eee; }
  tfoot { font-weight: bold; border-top: 2px solid #333; }
</style>
 
<table>
  <thead><tr><th>Item</th><th>Price</th></tr></thead>
  <tbody>
    <tr><td>Latte</td><td>$4.50</td></tr>
    <tr><td>Croissant</td><td>$3.00</td></tr>
  </tbody>
  <tfoot><tr><td>Total</td><td>$7.50</td></tr></tfoot>
</table>

Примечания

Если <tbody> не написать, браузер добавит его сам — учитывайте это в селекторах вроде table > tr, которые тогда не сработают. При печати длинной таблицы <thead> повторяется на каждой странице.

См. также

<table> — Таблица из строк `<tr>` и ячеек.
<td>, <th> — Ячейки таблицы: `<td>` — с данными, `<th>` — заголовочная.
<caption> — Название таблицы.

Вопросы и ответы по теме

В учебнике

Таблицы — Таблицы в HTML — строки и ячейки, заголовки столбцов, thead, tbody, tfoot и caption, объединение ячеек.

Спасибо, что читаете!