Атрибут id тега <thead>
Описание
Атрибут id в теге <thead> задаёт уникальный идентификатор для группы заголовков таблицы. Этот идентификатор может использоваться для CSS-стилизации, JavaScript-обработки и создания связей между элементами.
<table>
<thead id="main-table-header">
<tr>
<th>Продукт</th>
<th>Характеристики</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ноутбук</td>
<td>16 ГБ RAM</td>
</tr>
</tbody>
</table>
Основные правила именования:
| Правило | Пример | Недопустимый пример |
|---|---|---|
| Уникальность в документе | id="table-header" |
Повторение id |
| Без пробелов | id="mainHeader" |
id="main header" |
| Начинается с буквы | id="header1" |
id="1header" |
Основные применения:
- CSS-стилизация: Точечное применение стилей
- JavaScript-доступ: Быстрый поиск элемента
- Якорные ссылки: Ссылки на конкретные таблицы
- ARIA-атрибуты: Связь с описательными элементами
Пример с CSS:
<style>
#financial-headers {
background-color: #f0f9eb;
border-bottom: 2px solid #67c23a;
}
#financial-headers th {
font-weight: bold;
}
</style>
<table>
<thead id="financial-headers">
<tr>
<th>Финансовые показатели</th>
</tr>
</thead>
</table>
Рекомендации:
- Используйте осмысленные имена
- Придерживайтесь единого стиля именования
- Избегайте избыточного использования id для стилей
- Для таблиц сочетайте с атрибутами headers/id
Ограничения:
- Дублирование id приводит к ошибкам валидации
- Сложности при генерации динамического контента
- Высокая специфичность в CSS (может усложнить переопределение стилей)
Примечание: Для профессиональной разработки:
- Генерируйте уникальные id динамически
- Используйте data-атрибуты для дополнительной информации
- Сочетайте с ARIA-атрибутами для доступности