HTML Группа колонок

Элемент <colgroup> служит для стилизации конкретных колонок таблицы.

---

HTML таблица и группа колонок

Если вы хотите задать стиль первым двум колонкам таблицы, используйте элементы <colgroup> и <col>.

ПН	ВТ	СР	ЧТ	ПТ	СБ	ВС
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

Элемент <colgroup> используется как контейнер спецификаций колонок.

Каждая группа колонок указывается с помощью элемента <col>.

Атрибут span указывает, сколько колонок получит указанный стиль.

Атрибут style задает нужный стиль колонкам.

Примечание: Количество разрешенных CSS-свойств для <colgroup> весьма ограничено.

Пример:

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
  </colgroup>
  <tr>
    <th>Пн</th>
    <th>Вт</th>
    <th>Ср</th>
    <th>Чт</th>
    ...

Примечание: Элемент <colgroup> должен быть дочерним элементом <table> и расположен перед всеми остальными элементами таблицы, такими как <thead>, <tr>, <td> и т.д., но после элемента <caption>, если он присутствует.

---

Допустимые CSS-свойства для <colgroup>

Только ограниченный набор CSS-свойств разрешено использовать в <colgroup>:

• Свойство ширины (width)
• Свойство видимости (visibility)
• Фоновые свойства (background)
• Границы (border)

Все остальные CSS-свойства не окажут влияния на вашу таблицу.

---

Несколько элементов <col>

Если вы хотите задать разные стили нескольким колонкам, используйте несколько элементов <col> внутри <colgroup>:

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
    <col span="3" style="background-color: pink">
  </colgroup>
  <tr>
    <th>Пн</th>
    <th>Вт</th>
    <th>Ср</th>
    <th>Чт</th>
    ...

---

Пустые группы колонок

Если вы хотите задать стиль колонкам посередине таблицы, вставьте «пустой» элемент <col> (без стилей) для предшествующих колонок:

<table>
  <colgroup>
    <col span="3">
    <col span="2" style="background-color: pink">
  </colgroup>
  <tr>
    <th>Пн</th>
    <th>Вт</th>
    <th>Ср</th>
    <th>Чт</th>
    ...

---

Скрытие колонок

Вы можете скрыть колонки, используя свойство visibility: collapse:

<table>
  <colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
  </colgroup>
  <tr>
    <th>Пн</th>
    <th>Вт</th>
    <th>Ср</th>
    <th>Чт</th>
    ...