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

Описание

Атрибут scope в теге <th> определяет, к каким ячейкам таблицы относится заголовок. Это важно для доступности (screen readers) и семантической разметки таблиц.

Пример использования:
<table> <tr> <th scope="col">Месяц</th> <th scope="col">Доход</th> </tr> <tr> <td>Январь</td> <td>1000$</td> </tr> </table>

Значения атрибута:

Значение Описание Когда использовать
col Заголовок относится к столбцу Для заголовков в верхней строке таблицы
row Заголовок относится к строке Для заголовков в первом столбце
colgroup Заголовок относится к группе столбцов Для сложных таблиц с объединёнными столбцами
rowgroup Заголовок относится к группе строк Для сложных таблиц с объединёнными строками

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

  • Улучшает доступность для скринридеров
  • Не влияет на визуальное отображение таблицы
  • Рекомендован W3C для семантической разметки
  • Поддерживается всеми современными браузерами

Пример сложной таблицы:

<table> <tr> <th scope="colgroup" colspan="2">Финансы 2025</th> </tr> <tr> <th scope="col">Квартал</th> <th scope="col">Прибыль</th> </tr> <tr> <th scope="row">Q1</th> <td>4500$</td> </tr> </table>

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

  • Всегда используйте для заголовков таблиц
  • Сочетайте с colspan/rowspan при необходимости
  • Для сложных таблиц добавляйте <caption>
  • Тестируйте с screen readers

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

  • Не заменяет атрибуты headers/id в сложных таблицах
  • Некоторые старые скринридеры могут не полностью поддерживать

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

  • WAVE Evaluation Tool
  • axe DevTools
  • NVDA Screen Reader