Таблицы: для данных, не для раскладки

Таблица данных — элемент <table> для строк и столбцов, вроде цен или расписания, с подписью <caption> и заголовками <th> со scope. Для раскладки она не нужна.

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

В уроке про 1996 год вы видели, как таблицы заменяли сетку. Но таблица придумана для другого: для данных, у которых есть строки и столбцы. Расписание, цены, сравнение тарифов, список документов с датами. В такой таблице ячейка получает смысл от своих строки и столбца: «от 5 000 ₽» значит цену, потому что стоит в столбце «Цена», а в строке «Межевание».

Хорошая проверка: если убрать визуальную сетку, останется ли смысл у соседства? Для меню слева и текста справа нет: это раскладка. Для цены и услуги есть: это таблица.

Из чего сделана таблица

<table>
  <caption>Что входит и сколько стоит</caption>
  <thead>
    <tr>
      <th scope="col">Позиция</th>
      <th scope="col">Что входит</th>
      <th scope="col">Цена</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Консультация</th>
      <td>Час разговора о документах</td>
      <td>0 000 ₽</td>
    </tr>
  </tbody>
</table>

• <caption> это подпись: о чём таблица. Идёт первой;
• <thead> и <tbody>: шапка и тело. Есть ещё <tfoot> для итогов;
• <tr>: строка;
• <th>: ячейка-заголовок, <td>: ячейка с данными;
• scope="col" говорит, что заголовок относится к столбцу, scope="row": что к строке.

Объединять ячейки (colspan, rowspan) можно, но для людей с программой чтения с экрана сложные таблицы мучительны. Если без объединения никак, возможно, это две таблицы.

Что слышит диктор

Именно th и scope делают таблицу понятной тому, кто её слушает. Когда фокус чтения встаёт на ячейку, программа называет вместе с ней заголовки столбца и строки. Переключайте вид таблицы на схеме и выбирайте ячейки.

С заголовками th и scope Из одних ячеек td

Что входит и сколько стоит

Позиция	Что входит	Цена
Первая услуга	Что входит	от 5 000 ₽
Вторая услуга	Что входит	по смете
Третья услуга	Что входит	от 9 000 ₽

Диктор говорит: «Цена: от 5 000 ₽. Строка: Первая услуга.»

Заголовки столбцов (th scope="col") и строк (th scope="row") дают каждой ячейке контекст. Человек, который слышит одну ячейку, понимает, что это.

Проверьте себя: зачем в таблице th, если можно просто сделать ячейку жирной?

Жирный шрифт видят только глаза. Элемент th с scope сообщает программе, что это заголовок и к чему он относится.

Таблица или карточки

Не всё, что похоже на список, надо делать таблицей. Выбирайте так:

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

Поэтому на нашей странице услуги живут и в карточках (рассказ), и в таблице цен (сравнение). Это не дублирование: разные способы прочитать одно и то же.

С телефоном таблицы дружат плохо: колонки не помещаются. Лекарство такое: обернуть таблицу в блок с горизонтальной прокруткой, а не уменьшать шрифт и не превращать таблицу в картинку. Как именно, вы узнаете в части про CSS.

Практика

Добавьте на страницу таблицу цен или условий. Ваши данные уже на странице в карточках; перенесите из них название, описание и цену. Если вы работаете над проектом без цен (клуб, мероприятие, сервис по подписке), сделайте таблицу «Режим работы» или «Расписание»: столбцы «День» и «Время» тоже настоящие данные.

Эта версия остаётся в эпохе 2005 года: таблицы данных были и тогда, и в них уже писали th и caption, хотя многие забывали.

Что было не так с 2005 годом

Таблицы данных и таблицы раскладки смешивались до неразличимости: на странице их бывало по десять. Тот, кто хотел вставить настоящую таблицу, часто попадал в ловушку: её тоже вкладывали в ячейку раскладки. И th с scope в то время встречались редко: их ставили те, кто думал о доступности, а таких авторов было мало. Сегодня таблица в настоящем смысле жива, а раскладка таблицами нет.