Атрибут class тега <col>
Описание
Атрибут class позволяет назначать один или несколько классов элементу <col> для стилизации столбцов таблицы через CSS.
<table>
<colgroup>
<col class="first-column highlight">
<col class="data-column" span="2">
</colgroup>
<tr>
<td>Заголовок</td>
<td>Данные 1</td>
<td>Данные 2</td>
</tr>
</table>
Основные возможности:
| Применение | Пример CSS | Результат |
|---|---|---|
| Стилизация столбцов | .first-column { width: 100px; } |
Фиксированная ширина первого столбца |
| Цветовое выделение | .highlight { background: #fffde7; } |
Желтый фон для ячеек |
| Границы | .bordered { border-right: 2px solid #333; } |
Вертикальная граница |
Синтаксис и правила:
- Несколько классов разделяются пробелами
- Допустимые символы: буквы, цифры, дефисы, подчеркивания
- Чувствительность к регистру зависит от документа
- Рекомендуется использовать kebab-case (дефисный стиль)
Пример с CSS:
<style>
.price-column {
background-color: #e8f5e9;
font-weight: bold;
text-align: right;
}
.centered {
text-align: center;
}
</style>
<table>
<colgroup>
<col class="centered">
<col class="price-column">
</colgroup>
<tr>
<td>Товар</td>
<td>Цена</td>
</tr>
</table>
Рекомендации:
- Используйте семантические имена классов (
header-column) - Избегайте презентационных названий (
yellow-bg) - Для сложных таблиц сочетайте с
nth-childв CSS - Проверяйте кроссбраузерную совместимость
Ограничения:
- Не все CSS-свойства применяются к
<col> - Лучше работают свойства, связанные с фоном и выравниванием
- Для сложной стилизации может потребоваться стилизация ячеек
Примечание: Хотя атрибут class поддерживается тегом <col>, некоторые современные методы верстки (CSS Grid) могут быть более эффективны для сложного оформления таблиц.