Тег <colgroup>

Описание

Тег <colgroup> группирует один или несколько столбцов таблицы (<col>) для совместного форматирования. Позволяет применять стили к целым группам колонок.

Базовая группировка колонок:
<table border="1"> <colgroup> <col span="2" style="background-color: #f5f5f5"> <col style="background-color: #e0f7fa"> </colgroup> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </tr> </table>
Несколько групп колонок:
<style> .main-data {background: #fff8e1; } .totals { font-weight: bold; background: #e8f5e9; } </style> <!-- Содержимое таблицы --> <table> <colgroup span="3" class="main-data"></colgroup> <colgroup class="totals"> <col> </col> </colgroup> </table>

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

  • Должен располагаться сразу после <caption> (если есть)
  • Может содержать теги <col> или использовать атрибут span
  • Позволяет применять стили к нескольким колонкам одновременно
  • Поддерживает вложенные <colgroup>
  • Не отображается визуально, только влияет на стилизацию

Практические применения:

  • Создание полосатых таблиц (чередование стилей)
  • Выделение ключевых колонок
  • Групповая настройка выравнивания
  • Управление ширинами нескольких колонок

Для современных таблиц рекомендуется комбинировать <colgroup> с CSS Grid или Flexbox для более гибкого макетирования.

Атрибуты

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

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