Тег <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 Определяет количество столбцов, к которым должны применяться стили
accesskey Определяет горячую клавишу для активации/фокусировки элемента
class Задает один или несколько классов CSS для стилизации элемента
contenteditable Указывает, может ли пользователь редактировать содержимое элемента
data-* Используется для хранения пользовательских данных в элементах
dir Определяет направление текста: слева направо (ltr) или справа налево (rtl)
hidden Скрывает элемент, делая его невидимым и недоступным для пользователя
id Уникальный идентификатор элемента в документе
lang Определяет язык содержимого элемента
spellcheck Указывает, должна ли проверяться орфография в содержимом элемента
style Позволяет задавать CSS-стили непосредственно в атрибуте элемента
tabindex Определяет порядок перехода между элементами при нажатии Tab
title Задает всплывающую подсказку при наведении на элемент
translate Указывает, должен ли переводиться текст внутри элемента
align Задает горизонтальное выравнивание содержимого столбца (устарел в HTML5)
bgcolor Определяет цвет фона столбца (устарел в HTML5)
char Задает символ для выравнивания содержимого столбца (устарел в HTML5)
charoff Определяет смещение для выравнивания по символу (устарел в HTML5)
valign Задает вертикальное выравнивание содержимого столбца (устарел в HTML5)
width Определяет ширину столбца (устарел в HTML5)

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