Справочник HTML

Тег <table>: табличные данные

Таблица подходит для данных, где значения нужно сравнивать по строкам и столбцам: расписания, тарифы, характеристики.

Структура

<table>
  <caption>Расписание</caption>
  <thead><tr><th>День</th><th>Урок</th></tr></thead>
  <tbody><tr><td>Пн</td><td>HTML</td></tr></tbody>
</table>

tr создаёт строку, th — заголовочную ячейку, td — обычную.

Заголовки

Для сложной таблицы добавляй scope="col" или scope="row", чтобы связать данные с заголовками.

Телефон

Широкую таблицу можно поместить в контейнер с overflow-x:auto. Не уменьшай текст до нечитаемого размера.

Ошибки

Таблица используется для раскладки страницы.
Нет заголовков th.
Смысл передаётся только цветом.

Попробуй

Собери таблицу сравнения трёх тарифов с caption и заголовками столбцов.

Как сделать таблицу понятной

Таблица подходит только для данных, которые действительно образуют строки и столбцы. Для раскладки страницы используй Grid или Flexbox. Заголовки столбцов отмечают th внутри thead, а основные данные помещают в tbody. caption кратко объясняет, что показывает таблица.

Атрибут scope связывает ячейку-заголовок с нужной строкой или столбцом и помогает пользователям программ чтения с экрана. На телефоне широкую таблицу можно поместить в контейнер с overflow-x: auto. Не уменьшай шрифт до нечитаемого размера только ради того, чтобы всё уместилось.

Разберём рабочий пример

<div class="table-scroll">
  <table>
    <caption>План обучения</caption>
    <thead><tr><th scope="col">Тема</th><th scope="col">Уроков</th></tr></thead>
    <tbody><tr><th scope="row">HTML</th><td>33</td></tr></tbody>
  </table>
</div>

Не копируй пример вслепую: измени данные, убери одну строку и посмотри, как меняется результат. Такой эксперимент быстрее показывает роль каждой части кода, чем простое чтение.

Проверка перед использованием

Есть caption или понятный заголовок рядом.
Заголовочные ячейки размечены th и scope.
Таблица используется для данных, а не раскладки.
На мобильном экране данные не обрезаются.

Попробуй в браузере

Измени код и нажми «Запустить». Результат появится ниже.