Семантическая разметка таблиц в веб-разработке: заголовки и подписи

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

Что проверить перед разметкой таблицы

• Данные действительно сопоставляются по строкам и столбцам, а не просто расположены рядом.
• Понятно, что именно сравнивает или описывает таблица.
• Можно определить заголовок каждого столбца и, если нужно, каждой строки.
• Для таблицы подготовлена краткая подпись, которая поясняет её назначение.
• Визуальное оформление не подменяет семантику: цвет и жирный шрифт сами по себе не обозначают заголовок.

Сначала определите, какие данные действительно образуют таблицу

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

Не используйте таблицу для создания колонок страницы, размещения карточек или выравнивания элементов интерфейса. Для компоновки применяйте CSS Grid, Flexbox и подходящие семантические элементы HTML. Если содержимое представляет собой последовательность разделов или перечень, оформите его списком или обычной структурой заголовков.

Подготовьте подпись, которая объясняет назначение таблицы

Перед разметкой подготовьте содержание и проверьте, что у вас есть доступ к HTML-шаблону или редактору, в котором можно изменить исходную разметку. Для проверки понадобятся браузер и возможность просмотреть результат с клавиатуры; при необходимости используйте средство проверки доступности.

Подпись размещают внутри элемента <caption> сразу после открывающего тега <table>. Она должна кратко сообщать, какие данные представлены и в каком контексте их читать.

<table>
  <caption>Стоимость доставки по способу отправки</caption>
  <!-- строки и ячейки таблицы -->
</table>

Не включайте в подпись подробности, которые уже понятно выражены заголовками таблицы. Если таблица требует дополнительного пояснения, разместите его рядом в обычном тексте и при необходимости свяжите с таблицей через атрибут aria-describedby.

Разметьте заголовки строк и столбцов элементами th

Сначала проверьте, какие данные будут заголовками, и только затем собирайте строки таблицы. Элемент <th> обозначает заголовочную ячейку, а <td> - ячейку с данными. Внешний вид не заменяет эту смысловую разницу.

• Определите структуру данных и заголовки.
• Подготовьте <caption> и HTML-редактор с доступом к разметке.
• Проверьте, есть ли у таблицы заголовки строк, столбцов или обоих типов.
• Убедитесь, что сможете проверить результат в браузере и пройти по нему с клавиатуры.

1. Создайте каркас таблицы.
   Добавьте элемент <table>, подпись <caption> и области для заголовков и данных. Для простой таблицы используйте <thead> и <tbody>, если они соответствуют её структуре.
2. Добавьте заголовки столбцов.
   Разместите их в строке внутри <thead> и пометьте элементами <th>. Для обычных заголовков столбцов укажите scope="col".
3. Обозначьте заголовки строк, если они есть.
   Если первая ячейка каждой строки называет объект, описанный остальными ячейками, используйте для неё <th scope="row">.
4. Разместите значения в ячейках данных.
   Используйте <td> для значений, которые не являются заголовками. Проверьте, чтобы каждая строка соответствовала объявленным столбцам.
5. Проверьте, что структура читается без оформления.
   Убедитесь, что смысл сохраняется при отключённом CSS: заголовки должны оставаться заголовками, а не просто визуально выделенным текстом.

<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>По тарифу</td>
    </tr>
  </tbody>
</table>

Этот пример показывает HTML таблицу с заголовками и подписью: заголовки столбцов обозначены через scope="col", а название способа доставки - через scope="row". Так можно создать таблицу в HTML, сохранив явное различие между заголовками и данными.

Свяжите ячейки с заголовками с помощью scope

Атрибут scope указывает, относится ли заголовок к столбцу, строке или группе. Для простой прямоугольной таблицы достаточно проверить следующие пункты:

• Каждый заголовок столбца размечен как <th scope="col">.
• Заголовок строки, если он есть, размечен как <th scope="row">.
• Обычные значения находятся в элементах <td>, а не в заголовочных ячейках.
• Значение scope соответствует направлению заголовка.
• У таблицы есть краткий и понятный элемент <caption>.
• Заголовки описывают содержимое ячеек, а не только повторяют название страницы.
• Порядок строк и столбцов логичен при чтении слева направо и сверху вниз.

Для сложных таблиц с несколькими уровнями заголовков одного scope может быть недостаточно. В таких случаях задайте заголовочным ячейкам уникальные значения id, а соответствующим ячейкам данных - атрибут headers со списком связанных идентификаторов.

Проверьте таблицу на сложных многоуровневых заголовках

Если заголовок охватывает несколько столбцов, укажите это в разметке, например с помощью colspan. Для группы столбцов можно использовать scope="colgroup", но при сложных связях надёжнее задавать явные связи через id и headers.

<table>
  <caption>Показатели по регионам и периодам</caption>
  <thead>
    <tr>
      <th id="region" rowspan="2" scope="col">Регион</th>
      <th id="period" colspan="2" scope="colgroup">Период</th>
    </tr>
    <tr>
      <th id="start" scope="col">Начало</th>
      <th id="end" scope="col">Окончание</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="north" scope="row">Север</th>
      <td headers="north period start">Значение</td>
      <td headers="north period end">Значение</td>
    </tr>
  </tbody>
</table>

В этом примере headers перечисляет идентификаторы всех заголовков, нужных для понимания значения ячейки. Избегайте повторяющихся id: каждый идентификатор на странице должен быть уникальным.

• Не обозначайте заголовки только жирным шрифтом или цветом.
• Не используйте <td> для ячейки, которая называет строку или столбец.
• Не ставьте scope="col" на заголовок строки и наоборот.
• Не добавляйте colspan или rowspan, если они не отражают реальную структуру данных.
• Не пропускайте подпись, если без неё назначение таблицы неясно из окружающего текста.
• Не полагайтесь на автоматическое определение связей, когда таблица имеет сложные многоуровневые заголовки.

Пройдите чек-лист доступности и семантики перед публикацией

Выберите способ проверки по сложности таблицы и возможностям проекта. Семантическая разметка таблицы HTML важна независимо от того, заказывается ли семантическая верстка сайта заказать как отдельную услугу или выполняется собственными силами. Если оцениваете веб-разработка сайта цена, уточните, включены ли проверка доступности и тестирование таблиц; стоимость сама по себе не подтверждает качество разметки.

• Проверка исходного кода. Подходит для простой таблицы: проверьте элементы, атрибуты и уникальность значений id.
• Проверка клавиатурой. Пройдите по странице без мыши и убедитесь, что таблицу можно читать в естественном порядке.
• Проверка вспомогательными средствами. Для важных или сложных таблиц проверьте, как программа экранного доступа объявляет подпись и заголовки.
• Упрощение структуры. Если связи между ячейками трудно объяснить, разделите данные на несколько небольших таблиц с понятными подписями.

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

Разбор частых ситуаций при работе с табличной разметкой

Обязательно ли добавлять caption каждой таблице?

Подпись помогает быстро понять назначение таблицы, поэтому для содержательных таблиц её стоит добавить. Если таблица декоративная или пустая, сначала проверьте, нужна ли она вообще.

Можно ли сделать заголовок обычной ячейкой td и выделить его стилем?

Нет, оформление не сообщает вспомогательным технологиям, что ячейка является заголовком. Используйте <th> и подходящий scope.

Когда нужен атрибут headers?

Он полезен в сложных таблицах, где у ячейки данных несколько связанных заголовков и их нельзя однозначно выразить через простую структуру. Для каждого связанного заголовка задайте уникальный id.

Можно ли использовать таблицу для выравнивания блоков на странице?

Не следует: табличная разметка предназначена для связанных табличных данных. Для расположения блоков используйте CSS Grid или Flexbox.

Нужен ли thead и tbody в каждой таблице?

Используйте эти элементы, когда они соответствуют смысловому разделению заголовков и основного содержимого. Не добавляйте их только ради визуального оформления.

Можно ли убирать подпись таблицы с экрана стилями?

В некоторых интерфейсах подпись визуально скрывают, сохраняя её для вспомогательных технологий, но делать это следует осознанно и с корректным CSS. Для обычной таблицы понятнее оставить подпись видимой.

Автор: Виктор Егоров