Атрибут id тега <colgroup>
Описание
Атрибут id для тега <colgroup> задаёт уникальный идентификатор группы столбцов таблицы. Этот идентификатор может использоваться для:
- Стилизации группы столбцов через CSS
- Обращения к группе через JavaScript
- Связки с другими элементами через атрибуты вроде
aria-labelledby
<table border="1">
<colgroup id="price-columns" style="background-color: #f0f0f0;">
<col span="2">
</colgroup>
<tr>
<td>Цена 1</td>
<td>Цена 2</td>
</tr>
</table>
Особенности работы:
| Аспект | Описание | Примечание |
|---|---|---|
| Уникальность | Должен быть единственным в документе | Дублирование приведёт к ошибкам |
| Синтаксис | Без пробелов, начинается с буквы | Может содержать дефисы и подчёркивания |
| Использование в CSS | Селектор #идентификатор |
Высокая специфичность (0100) |
Рекомендации по использованию:
- Давайте осмысленные имена (не "id1", "id2")
- Используйте для важных групп столбцов
- Сочетайте с классами для гибкости
- Избегайте кириллических идентификаторов
- Используйте kebab-case (через дефис) для имён из нескольких слов
Пример с CSS и JavaScript:
<style>
#user-data-columns {
background-color: #e6f7ff;
font-weight: bold;
}
</style>
<table>
<colgroup id="user-data-columns"></colgroup>
<tr>
<td>Данные пользователя</td>
</tr>
</table>
<script>
const userColumns = document.getElementById('user-data-columns');
userColumns.style.borderLeft = '2px solid blue';
</script>
Плохие практики:
<!-- Плохо: цифровой ID -->
<colgroup id="1"></colgroup>
<!-- Плохо: дублирование ID -->
<colgroup id="my-column"></colgroup>
<colgroup id="my-column"></colgroup>
<!-- Плохо: кириллический ID -->
<colgroup id="столбец-цен"></colgroup>
Примечание: Хотя атрибут id является стандартным для HTML-элементов, для <colgroup> он особенно полезен при работе с динамическими таблицами и сложными интерактивными интерфейсами, где требуется точное управление группами столбцов.