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

Описание

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

Пример использования (нестандартное применение для td):
<table> <tr> <td scope="col">Нестандартный заголовок</td> <td>Ячейка данных</td> </tr> </table>

Значения атрибута (рекомендуется для th):

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

Правильное использование с th:

<table> <tr> <th scope="col">Продукт</th> <th scope="col">Цена</th> </tr> <tr> <th scope="row">Смартфон</th> <td>500$</td> </tr> </table>

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

  • Хотя технически может использоваться с <td>, семантически правильнее применять с <th>
  • Улучшает доступность таблиц для скринридеров
  • Альтернатива атрибуту headers в простых таблицах
  • Поддерживается всеми современными браузерами и скринридерами

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

  • Всегда используйте <th> для заголовочных ячеек
  • Для сложных таблиц комбинируйте с headers и id
  • Указывайте scope даже для явных заголовков
  • Тестируйте таблицы с инструментами доступности

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

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

Примечание: Для создания действительно доступных таблиц всегда используйте <th> с соответствующим scope вместо попыток стилизовать <td> как заголовки.