Таблицы

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

Таблицы нужны для данных

Используй таблицу, когда у информации есть строки и столбцы: расписание, прайс-лист, результаты опроса. В конце 1990-х многие сайты строили таблицами всю вёрстку страницы: меню в одной ячейке, содержимое в другой. Это создаёт настоящие проблемы. Экранные дикторы объявляют каждую ячейку с её строкой и столбцом, так что таблица для вёрстки звучит как запутанная электронная таблица, а табличная вёрстка плохо подстраивается под маленькие экраны. Сегодня вёрстку делают на CSS, а таблицы оставляют для данных.

Строки, ячейки и заголовки

Таблица строится строка за строкой. <table> охватывает всё, каждый <tr> (table row) является одной строкой, а внутри строки каждый <td> (table data) является одной ячейкой. Ячейки, которые подписывают строку или столбец, используют вместо этого <th> (table header), и браузеры по умолчанию показывают их жирными и по центру. Число ячеек в каждой строке должно совпадать, чтобы столбцы выстраивались ровно.

<table>
  <caption>Bread prices, October 2026</caption>
  <thead>
    <tr><th scope="col">Loaf</th><th scope="col">Weight</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Sourdough</th><td>800 g</td><td>6.50</td></tr>
    <tr><th scope="row">Rye</th><td>600 g</td><td>5.00</td></tr>
  </tbody>
</table>

Пусть таблица объясняет себя сама

Три добавки превращают сетку ячеек в таблицу, которую может прочитать каждый. Первая: <caption> сразу после открывающего тега <table> даёт таблице название. Экранные дикторы объявляют его до содержимого, так что слушатель знает, о чём таблица. Вторая: атрибут scope у каждого <th> говорит, подписывает он столбец (scope="col") или строку (scope="row"). С ним экранный диктор прочитает «Rye, Price, 5.00», а не голое 5.00. Третья: <thead>, <tbody> и <tfoot> группируют строки заголовков, строки тела и итоговые строки. Они делают структуру ясной, помогают оформить каждую часть через CSS и позволяют браузеру повторять заголовок на каждой печатной странице длинной таблицы.

Объединённые ячейки

Ячейка может растянуться на несколько столбцов с помощью colspan или на несколько строк с помощью rowspan. В недельном расписании обеденный перерыв, общий для всех пяти будних дней, может быть одной ячейкой с colspan="5". Когда ячейка растягивается, в её строке нужно меньше ячеек: если в строке обычно 6 ячеек, а у одной из них colspan="5", в HTML этой строки будет только 2 ячейки. Объединяй ячейки, когда это отражает данные. Очень сложные таблицы трудно читать всем, поэтому часто лучше разбить одну большую таблицу на две простые.

Широкие таблицы бывают проблемой на телефонах. Таблица не переносится, как текст, поэтому таблица с множеством столбцов может оказаться шире экрана. Обычное решение: обернуть таблицу в элемент, который сам прокручивается вбок с помощью CSS, чтобы остальная страница не становилась шире.

Держи данные в каждой ячейке как можно проще: одно значение на ячейку, единицы измерения в заголовке («Цена в евро»), а не в каждой ячейке, и никаких пустых ячеек для отступов. Такую таблицу легче читать вслух, легче сортировать, и она аккуратно вставляется в электронную таблицу.