Атрибут headers тега <th>

Описание

Атрибут headers в теге <th> связывает ячейку заголовка с другими заголовками таблицы, создавая семантические отношения для улучшения доступности. Это особенно важно для сложных таблиц с многоуровневой структурой заголовков.

Пример использования:
<table> <thead> <tr> <th id="year" colspan="2">2025</th> </tr> <tr> <th id="q1" headers="year">Q1</th> <th id="q2" headers="year">Q2</th> </tr> </thead> <tbody> <tr> <td headers="year q1">Данные Q1</td> <td headers="year q2">Данные Q2</td> </tr> </tbody> </table>

Особенности работы:

  • Содержит список ID связанных заголовков через пробел
  • Улучшает навигацию по таблице для скринридеров
  • Не влияет на визуальное отображение
  • Особенно полезен для таблиц с объединенными ячейками

Рекомендации:

  • Используйте для сложных таблиц с colspan/rowspan
  • Сочетайте с атрибутами id и scope
  • Указывайте заголовки в логическом порядке (от общего к частному)
  • Тестируйте с реальными скринридерами

Пример с многоуровневой структурой:

<table> <thead> <tr> <th id="region" rowspan="2">Регион</th> <th id="sales" colspan="3">Продажи</th> </tr> <tr> <th id="product-a" headers="sales">Продукт A</th> <th id="product-b" headers="sales">Продукт B</th> </tr> </thead> <tbody> <tr> <th id="north" headers="region">Северный</th> <td headers="region north sales product-a">100</td> <td headers="region north sales product-b">150</td> </tr> </tbody> </table>

Ограничения:

  • Требует тщательного планирования структуры таблицы
  • Поддержка может различаться в разных скринридерах
  • Увеличивает объем разметки

Примечание: Для профессиональной реализации:

  • Используйте генераторы разметки для сложных таблиц
  • Проверяйте с помощью WAVE или подобных инструментов
  • Следуйте рекомендациям W3C по доступности таблиц