PassFront
  1. PassFront
  2. База знаний
  3. Таблицы и списки

Для чего нужны caption, thead, tbody и th в HTML-таблице?

Таблицы и списки

Эти элементы дают таблице структуру и смысл, а не только внешний вид.

<table>
  <caption>Продажи по кварталам</caption>
  <thead>
    <tr><th scope="col">Квартал</th><th scope="col">Выручка</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Q1</th><td>120 000</td></tr>
    <tr><th scope="row">Q2</th><td>150 000</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Итого</th><td>270 000</td></tr>
  </tfoot>
</table>
  • <caption> — название таблицы, его читает скринридер.
  • <thead>, <tbody>, <tfoot> — группы строк; позволяют стилизовать и повторять шапку при печати.
  • <th scope="col|row"> — ячейка-заголовок, связывает данные с заголовком для вспомогательных технологий.
  • colspan и rowspan объединяют ячейки.

Правило: таблицы для табличных данных, а не для вёрстки макета. Раскладку делают на Flexbox и Grid.

Коротко для собеседования

caption подписывает таблицу, thead и tbody делят её на части, th с scope делает заголовки понятными скринридеру. Таблицы нужны для данных, не для вёрстки макета.

Другие вопросы раздела