Атрибут id тега <col>
Описание
Атрибут id назначает уникальный идентификатор элементу <col>, который может использоваться для:
- Стилизации столбца через CSS
- Обращения к столбцу в JavaScript
- Создания связей между элементами
<table>
<colgroup>
<col id="username-column">
<col id="email-column">
</colgroup>
<!-- Содержимое таблицы -->
</table>
Основные правила:
| Правило | Пример | Недопустимо |
|---|---|---|
| Уникальность | id="main-col" |
Повторение id в документе |
| Синтаксис | id="column-1" |
id="1column" (начинается с цифры) |
| Чувствительность к регистру | id="Column" ≠ id="column" |
- |
Использование в CSS:
<style>
#price-column {
background-color: #f8f9fa;
width: 100px;
}
#price-column td {
text-align: right;
font-weight: bold;
}
</style>
<table>
<colgroup>
<col id="price-column">
</colgroup>
<!-- Содержимое таблицы -->
</table>
Использование в JavaScript:
<script>
// Изменение стиля столбца
document.getElementById('username-column').style.width = '200px';
// Получение всех ячеек столбца
const columnIndex = document.getElementById('email-column').cellIndex;
const cells = document.querySelectorAll(`td:nth-child(${columnIndex + 1})`);
</script>
Рекомендации:
- Используйте осмысленные имена (
customer-name-col) - Избегайте общих названий (
col1,column-a) - Для стилизации предпочитайте классы (кроме уникальных случаев)
- Учитывайте специфичность CSS (id имеет высокий приоритет)
Ограничения:
- Не все CSS-свойства применяются к
<col> - Для сложных операций с таблицами может потребоваться работа с ячейками
- Глобальная видимость в JavaScript (может конфликтовать с переменными)