Заголовок и тело таблицы

Учимся аккуратно группировать таблицу на шапку и тело и добавлять ей подпись.

<thead> группирует строки-заголовки, <tbody> — строки с данными, а <caption> даёт таблице подпись.

Зачем группировать таблицу

В простой таблице шапка и данные ничем не разделены. Когда таблица большая, удобно явно выделить три части: <thead> (шапка), <tbody> (тело) и иногда <tfoot> (итоговая строка). Это делает структуру понятнее и людям, и браузеру.

Полная таблица с группировкой

<table>
  <caption>Цены на услуги</caption>
  <thead>
    <tr>
      <th>Услуга</th>
      <th>Цена</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Консультация</td>
      <td>1000 руб.</td>
    </tr>
    <tr>
      <td>Диагностика</td>
      <td>500 руб.</td>
    </tr>
  </tbody>
</table>

Подпись — <caption>

<caption> — это название таблицы. Его пишут сразу после открывающего <table>, и браузер показывает текст над таблицей по центру. Подпись помогает понять, о чём таблица, особенно пользователям программ чтения с экрана.

Чем полезны thead и tbody

• Читаемость кода. Сразу видно, где шапка, а где данные.
• Поведение браузера. При печати длинной таблицы шапка из <thead> может повторяться на каждой странице.
• Стилизация. Позже через CSS легко оформить отдельно шапку и тело.

Три группы строк

Зачем нужен tfoot

Третья, необязательная группа — <tfoot> (footer таблицы). В неё помещают итоговую строку: сумму, среднее, общий результат. Логически итог идёт после данных, и в коде <tfoot> обычно пишут после <tbody>:

<tfoot>
  <tr>
    <td>Итого</td>
    <td>1500 руб.</td>
  </tr>
</tfoot>

Группировка не обязательна для маленьких таблиц — простая таблица из прошлого урока прекрасно работает и без неё. Но как только таблица растёт, явное деление на шапку, тело и итог окупается: код становится понятнее, а браузер получает подсказки для печати и доступности. Это хорошая привычка на будущее.

Порядок групп и частые вопросы

Есть несколько моментов, которые удивляют новичков. Во-первых, <caption> и три группы строк пишут в строгом порядке: сначала <caption>, затем <thead>, потом <tbody> и в конце <tfoot>. Если перепутать, браузер может показать таблицу не так, как вы ждёте.

Во-вторых, шапку из <thead> по-прежнему набирают из обычных строк <tr> с ячейками <th> — никакого особого синтаксиса внутри групп нет. Группы — это просто «обёртки» вокруг знакомых вам строк, которые подсказывают браузеру их роль. В-третьих, ничего не сломается, если у вас совсем простая таблица вообще без этих тегов: они нужны для порядка и больших таблиц, а не как обязательное требование. Начинайте применять их, когда почувствуете, что таблица стала большой и в ней легко запутаться.

Итог

• <thead>, <tbody> и <tfoot> группируют строки на шапку, тело и итог.
• <caption> ставят сразу после <table> — это название таблицы.
• Группировка улучшает читаемость кода, доступность и поведение при печати.