Тег <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 Определяет количество столбцов в группе
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)

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