HTML тег `<colgroup>`

Значение и применение

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

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

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

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (2) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.colgroup
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`colgroup`	✓1	✓12	✓1	✓15	✓≤4	✓18	✓4	✓14	✓≤3.2	✓1.0	✓4.4	✓≤3.2
`align`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`char`	×	×	×	×	×	×	×	×	×	×	×	×
`charoff`	×	×	×	×	×	×	×	×	×	×	×	×
`span`	✓1	✓12	✓1	✓15	✓≤4	✓18	✓4	✓14	✓≤3.2	✓1.0	✓4.4	✓≤3.2
`valign`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`width`	✓1	✓12	✓1	✓15	✓≤4	✓18	✓4	✓14	✓≤3.2	✓1.0	✓4.4	✓≤3.2
Ещё 4 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут	Значение	Описание
`align`	`left right center justify char`	Не поддерживается в HTML5. Выравнивает содержание в группе столбцов.
`char`	`character`	Не поддерживается в HTML5. Выравнивает содержимое группы стобцов по заданному символу. Атрибут `char` может быть использован только если атрибут `align =` `"char"`.
`charoff`	`number`	Не поддерживается в HTML5. Атрибут, который позволяет произвести выравнивание группы столбцов с символа, указанного в атрибуте, путем смещения от определённого символа вправо (положительные значения) или влево (отрицательные значения). Атрибут `charoff` может быть использован только если атрибут `align =` `"char"`.
`span`	`number`	Определяет какое количество столбцов должна охватывать группа (элемент `<colgroup>`). Число должно быть целым положительным. Если параметр не задан, то его значением по умолчанию будет 1.
`valign`	`top middle bottom baseline`	Не поддерживается в HTML5. Определяет вертикальное выравнивание содержимого в группе столбцов.
`width`	`pixels % relative_length`	Не поддерживается в HTML5. Указывает ширину столбцов группы.

Для столбцов действуют только определённые эффекты CSS: фон, ширина, границы при border-collapse: collapse и visibility: collapse. Свойства текста, например text-align или color, задавайте самим ячейкам: они не наследуются от <col>. span принимает целое число от 1 до 1000. У <colgroup> выбирайте либо span, либо дочерние <col>, а не оба способа одновременно.

Примеры, попробуйте сами

Пример использования атрибута span HTML тега <colgroup>

Измените разметку во вкладке HTML и сравните результат.

base.css

CSS

.test {
    background-color: lime;
}

index.html

HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />

    <title>Пример использования атрибута span HTML тега &lt;colgroup&gt;</title>
  </head>
  <body>
    <table>
      <colgroup span="2" class="test"></colgroup>
      <tbody>
        <tr>
          <th>№ заявки</th>
          <th>Услуга</th>
          <th>Цена, руб.</th>
          <th>Комиссия, руб.</th>
        </tr>
        <tr>
          <td>31337</td>
          <td>Чтение в слух</td>
          <td>1 000</td>
          <td>150</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Таблицы

Измените разметку во вкладке HTML и сравните результат.

index.html

HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />

    <title>Таблицы</title>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="2" style="background-color: khaki" />
        <col style="background-color: silver" />
        <col style="background-color: coral" />
      </colgroup>
      <tbody>
        <tr>
          <th>№ заявки</th>
          <th>Услуга</th>
          <th>Цена, руб.</th>
          <th>Итого</th>
        </tr>
        <tr>
          <td>31337</td>
          <td>Чтение в слух</td>
          <td>1 000</td>
          <td>1 000</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Отличия HTML 4.01 от HTML 5

В HTML 5 атрибутов было удалено.

Значение CSS по умолчанию

CSS

colgroup {
display: table-column-group;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML тег <colgroup>