Тег <col>

Описание

Тег <col> определяет свойства столбцов в таблице, позволяя задавать стили для целых колонок без повторения атрибутов в каждой ячейке. Всегда используется внутри <colgroup>.

Простое форматирование колонок:
<table border="1"> <colgroup> <col style="background-color: #f2f2f2"> <col style="width: 200px"> <col span="2" style="text-align: center"> </colgroup> <tr> <th>ID</th> <th>Название</th> <th>Цена</th> <th>Количество</th> </tr> <!-- Строки таблицы --> </table>
Группировка колонок:
<style> .main-columns { background: #e6f7ff; } .total-column { font-weight: bold; } </style> <table> <colgroup> <col span="3" class="main-columns"> <col class="total-column"> </colgroup> <!-- Содержимое таблицы --> </table>
Использование с атрибутами:
<table> <colgroup> <col width="20%"> <col width="30%"> <col width="50%"> </colgroup> <!-- Заголовки и данные таблицы --> </table>

Ключевые особенности:

  • Не содержит контента - только определяет свойства колонок
  • Должен находиться внутри <colgroup>
  • Поддерживает атрибут span для объединения колонок
  • Применяет стили ко всем ячейкам в колонке
  • Позволяет избежать дублирования стилей в ячейках

Тег <col> особенно полезен для:

  • Установки фиксированных ширин колонок
  • Групповой стилизации колонок
  • Создания сложных табличных layouts
  • Оптимизации кода таблиц

Для более продвинутой стилизации таблиц рекомендуется комбинировать <col> с CSS-селекторами nth-child и классами.

Атрибуты

span Определяет количество столбцов, к которым должны применяться стили
class Задает один или несколько классов CSS для стилизации элемента
data-* Используется для хранения пользовательских данных в элементах
id Уникальный идентификатор элемента в документе
style Позволяет задавать CSS-стили непосредственно в атрибуте элемента
align Задает горизонтальное выравнивание содержимого столбца (устарел в HTML5)
bgcolor Определяет цвет фона столбца (устарел в HTML5)
char Задает символ для выравнивания содержимого столбца (устарел в HTML5)
charoff Определяет смещение для выравнивания по символу (устарел в HTML5)
valign Задает вертикальное выравнивание содержимого столбца (устарел в HTML5)
width Определяет ширину столбца (устарел в HTML5)

Поддержка браузерами
3.0 1.0 6.0 1.0 1.0