HTML тег - colgroup - определение и примеры использования
Меню
Веб-разработка
Тег colgroup HTML

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


Тег <colgroup> - синтаксис и код

Тег <colgroup> представлен парами. Содержимое записывается между открывающим (<colgroup>) и закрывающим (</colgroup>) тегами.

Пример кода установки цвета фона трех столбцов с помощью тегов <colgroup> и <col>:

<table>
  <colgroup>
    <col span="2" style="background-color:blue">
    <col style="background-color:green">
  </colgroup>
  <tr>
    <th>№</th>
    <th>Заголовок</th>
    <th>Цена</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Веб Сайт о путешествиях</td>
    <td>25.000 ₽</td>
  </tr>
</table>
Заголовок Цена
1 Веб Сайт о путешествиях 25.000 ₽

Определение и использование

  • HTML - тег <colgroup> определяет группу из одного или нескольких столбцов в таблице для форматирования;
  • Тег <colgroup> полезен для применения стилей ко всем столбцам вместо повторения стилей для каждой ячейки и каждой строки;
  • Одна таблица HTML может включать несколько тегов <colgroup>;
  • Тег <colgroup> вложен внутри тега <table> перед <thead>, <tbody>, <tfoot> и <tr> и после <caption>, если он используется (тег <caption> использутся для заголовка таблицы).
Рекомендация: чтобы определить различные свойства столбца в <colgroup>, используйте тег <col> внутри тега <colgroup>.

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

Chrome Поддерживает
Yandex Browser Поддерживает
Edge Поддерживает
Firefox Поддерживает
Safari Поддерживает
Opera Поддерживает

Атрибуты

Атрибут Значение Описание
span number Указывает количество столбцов, которые должна охватывать группа столбцов

Глобальные атрибуты

Тег <colgroup> также поддерживает глобальные атрибуты в HTML

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

Тег <colgroup> также поддерживает атрибуты событий в HTML


Связанные страницы

Руководство по HTML: таблицы HTML


Настройки CSS по умолчанию

Большинство браузеров отображают элемент colgroup со следующими значениями по умолчанию:

colgroup {
  display: table-column-group;
}


Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

 

Поделиться ссылкой