HTML-таблицы для данных: строки, ячейки и заголовки

Таблица нужна для табличных данных: прайс, сравнение тарифов, расписание. Для раскладки страницы в 2026 используют CSS Flex/Grid, а не table.

Базовая разметка

Строки — tr, ячейки данных — td, ячейки-заголовки — th. Логично обернуть шапку в thead, тело — в tbody, подпись таблицы — caption.

Доступность

Заголовки столбцов помогают скринридерам понять связь ячеек. Не оставляйте пустые th без текста, если столбец реально о чём-то говорит.

Связь с курсом CSS

Визуальное выравнивание колонок дорабатывайте стилями. Основы раскладки — в курсе CSS, сетки — в уроке Grid.

HTML

<table>
  <caption>Тарифы хостинга (учебный пример)</caption>
  <thead>
    <tr>
      <th>Тариф</th>
      <th>SSD</th>
      <th>Цена</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Старт</th>
      <td>10 ГБ</td>
      <td>199 ₽</td>
    </tr>
    <tr>
      <th scope="row">Бизнес</th>
      <td>40 ГБ</td>
      <td>499 ₽</td>
    </tr>
  </tbody>
</table>

Практическое задание

Задание: сверстайте таблицу сравнения из 3 строк данных и 3 столбцов.

  • Есть caption и thead/tbody
  • Заголовки столбцов — th
  • Первая ячейка строки — th scope="row" (или эквивалент осмысленной шапки)
  • Таблица описывает реальные данные (прайс, расписание и т.п.)