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

Описание

Атрибут id в теге <th> задаёт уникальный идентификатор для заголовочной ячейки таблицы. Этот идентификатор может использоваться для CSS-стилизации, JavaScript-обработки и создания связей между ячейками таблицы.

Пример использования:
<table border="1"> <tr> <th id="product-name-header">Наименование товара</th> <th id="price-header">Цена</th> </tr> <tr> <td headers="product-name-header">Ноутбук</td> <td headers="price-header">45 000₽</td> </tr> </table>

Основные правила именования:

Правило Пример Недопустимый пример
Должен быть уникальным в документе id="main-header" Повторение id
Не должен содержать пробелов id="priceHeader" id="price header"
Должен начинаться с буквы id="header1" id="1header"

Основные применения:

  • CSS-стилизация: Точечное применение стилей
  • JavaScript-доступ: Получение элемента по id
  • Доступность: Связь ячеек через headers/id
  • Якорные ссылки: Ссылки на конкретные заголовки

Пример с CSS:

<style> #total-header { background-color: #4CAF50; color: white; font-weight: bold; } </style> <table border="1"> <tr> <th id="total-header">Итого</th> <th>100 000₽</th> </tr> </table>

Пример с JavaScript:

<table border="1"> <tr> <th id="sortable-header">Дата</th> </tr> </table> <script> document.getElementById('sortable-header').addEventListener('click', function() { alert('Сортировка по дате'); }); </script>

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

  • Используйте осмысленные имена id
  • Придерживайтесь единого стиля именования (camelCase или kebab-case)
  • Избегайте избыточного использования id для стилизации
  • Для таблиц используйте связку id и headers

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

  • Дублирование id приводит к ошибкам валидации
  • Избыточное использование усложняет поддержку кода
  • Не рекомендуется для частой стилизации (лучше классы)
  • Сложности при генерации динамического контента

Пример для доступности:

<table border="1"> <tr> <th id="name-col">Имя</th> <th id="age-col">Возраст</th> </tr> <tr> <td headers="name-col">Иван</td> <td headers="age-col">25</td> </tr> </table>

Примечание: Для сложных таблиц рекомендуется:

  • Генерировать уникальные id динамически
  • Использовать data-атрибуты для дополнительной информации
  • Сочетать с ARIA-атрибутами для улучшения доступности