<colgroup> элемент группы столбцов таблицы HTML

Элемент <colgroup> HTML определяет группу столбцов в таблице.

Попробуйте

<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <thead>
    <tr>
      <td></td>
      <th scope="col">Batman</th>
      <th scope="col">Robin</th>
      <th scope="col">The Flash</th>
      <th scope="col">Kid Flash</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Skill</th>
      <td>Smarts, strong</td>
      <td>Dex, acrobat</td>
      <td>Super speed</td>
      <td>Super speed</td>
    </tr>
  </tbody>
</table>

.batman {
  background-color: #d7d9f2;
}

.flash {
  background-color: #ffe8d4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 6px;
}

td {
  text-align: center;
}

Атрибуты

Этот элемент включает глобальные атрибуты.

span

Задаёт количество последовательных столбцов, которые охватывает элемент <colgroup>. Значение должно быть положительным целым числом больше нуля. Если атрибут не указан, его значение по умолчанию — 1.

Примечание: Атрибут span нельзя использовать, если внутри элемента <colgroup> есть один или несколько элементов <col>.

Устаревшие атрибуты

Следующие атрибуты устарели и не должны использоваться. Они описаны ниже только для справки при обновлении существующего кода и из исторического интереса.

align

Задаёт горизонтальное выравнивание ячеек каждой группы столбцов. Возможные перечисленные значения: left, center, right, justify и char. Если поддерживается, значение char выравнивает текстовое содержимое по символу, заданному атрибутом char, и смещению, заданному атрибутом charoff. Обратите внимание, что дочерние элементы <col> могут переопределить это значение с помощью собственного атрибута align. Вместо этого используйте CSS-свойство text-align для элементов <td> и <th>, поскольку этот атрибут устарел.

Примечание: Установка атрибута text-align для элемента <colgroup> не оказывает эффекта, поскольку элементы <td> и <th> не являются потомками элемента <colgroup> и, следовательно, не наследуют его значение.

Если в таблице не используется атрибут colspan, используйте CSS-селектор td:nth-of-type(an+b) для каждого столбца, где a — общее количество столбцов в таблице, а b — порядковый номер столбца в таблице; например, td:nth-of-type(7n+2) { text-align: right; } выровняет ячейки второго столбца по правому краю.

Если в таблице используется атрибут colspan, нужного эффекта можно добиться, комбинируя соответствующие CSS-селекторы атрибутов, например [colspan=n], хотя это не так просто.

bgcolor

Задаёт цвет фона ячеек каждой группы столбцов. Значение представляет собой цвет HTML: либо шестизначный шестнадцатеричный код RGB с префиксом #, либо ключевое слово цвета. Другие значения CSS <color> не поддерживаются. Вместо этого используйте CSS-свойство background-color, поскольку этот атрибут устарел.

char

Не выполняет никаких действий. Изначально этот атрибут предназначался для выравнивания содержимого ячеек каждой группы столбцов по заданному символу. Обычно для этого указывают точку (.), например при выравнивании чисел или денежных сумм. Если атрибут align не имеет значения char, этот атрибут игнорируется, но всё равно используется как значение по умолчанию для атрибута align элементов <col>, входящих в эту группу столбцов.

charoff

Не выполняет никаких действий. Изначально этот атрибут предназначался для задания количества символов, на которое смещается содержимое ячеек группы столбцов относительно символа выравнивания, указанного атрибутом char.

valign

Задаёт вертикальное выравнивание ячеек каждой группы столбцов. Возможные перечисленные значения: baseline, bottom, middle и top. Обратите внимание, что дочерние элементы <col> могут переопределить это значение с помощью собственного атрибута valign. Вместо этого используйте CSS-свойство vertical-align для элементов <td> и <th>, поскольку этот атрибут устарел.

Примечание: Установка атрибута vertical-align для элемента <colgroup> не оказывает эффекта, поскольку элементы <td> и <th> не являются потомками элемента <colgroup> и, следовательно, не наследуют его значение.

Если в таблице не используется атрибут colspan, используйте CSS-селектор td:nth-of-type() для каждого столбца; например, td:nth-of-type(2) { vertical-align: middle; } расположит ячейки второго столбца по центру вертикально.

Если в таблице используется атрибут colspan, нужного эффекта можно добиться, комбинируя соответствующие CSS-селекторы атрибутов, например [colspan=n], хотя это не так просто.

width

Задаёт ширину по умолчанию для каждого столбца в текущей группе столбцов. Помимо стандартных значений в пикселях и процентах, этот атрибут может принимать специальную форму 0*, означающую, что ширина каждого охватываемого столбца должна быть минимальной, достаточной для размещения его содержимого. Также можно использовать относительные значения ширины, например 5*. Обратите внимание, что дочерние элементы <col> могут переопределить это значение с помощью собственного атрибута width. Вместо этого используйте CSS-свойство width, поскольку этот атрибут устарел.

Примечания по использованию

• Элемент <colgroup> должен находиться внутри элемента <table>, после элемента <caption> (если он используется), но перед элементами <thead>, <tbody>, <tfoot> и <tr>.
• На <colgroup> влияют лишь некоторые CSS-свойства:
  • background: различные свойства background задают фон ячеек группы столбцов. Поскольку фон группы столбцов рисуется поверх таблицы, но под фонами, заданными для столбцов (<col>), групп строк (<thead>, <tbody> и <tfoot>), строк (<tr>) и отдельных ячеек (<th> и <td>), фон групп столбцов таблицы виден только в том случае, если каждый расположенный поверх него слой имеет прозрачный фон.
  • border: применяются различные свойства border, но только если для <table> задано значение border-collapse: collapse.
  • visibility: значение collapse для группы столбцов приводит к тому, что все ячейки столбцов этой группы не отображаются, а ячейки, охватывающие другие столбцы, обрезаются. Пространство, которое занимали бы эти столбцы группы, удаляется. Однако размеры других столбцов по-прежнему рассчитываются так, как если бы ячейки в свёрнутых столбцах группы присутствовали. Другие значения visibility не оказывают эффекта.
  • width: свойство width задаёт минимальную ширину столбцов внутри группы, как если бы было установлено свойство min-width.

Пример

Полный пример таблицы, демонстрирующий общие стандарты и лучшие практики, см. в разделе <table>.

В этом примере показана таблица из семи столбцов, разделённых на два элемента <colgroup>, охватывающих несколько столбцов.

HTML

Для создания групп столбцов и структурирования базовой таблицы используются два элемента <colgroup>. Количество столбцов в каждой группе задаётся атрибутом span.

<table>
  <caption>
    Personal weekly activities
  </caption>
  <colgroup span="5" class="weekdays"></colgroup>
  <colgroup span="2" class="weekend"></colgroup>
  <thead>
    <tr>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
      <th>Sat</th>
      <th>Sun</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Clean room</td>
      <td>Football training</td>
      <td>Dance Course</td>
      <td>History Class</td>
      <td>Buy drinks</td>
      <td>Study hour</td>
      <td>Free time</td>
    </tr>
    <tr>
      <td>Yoga</td>
      <td>Chess Club</td>
      <td>Meet friends</td>
      <td>Gymnastics</td>
      <td>Birthday party</td>
      <td>Fishing trip</td>
      <td>Free time</td>
    </tr>
  </tbody>
</table>

CSS

Сгруппированные столбцы можно визуально выделить и подчеркнуть структуру с помощью CSS:

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 6px;
  text-align: center;
}

.weekdays {
  background-color: #d7d9f2;
}

.weekend {
  background-color: #ffe8d4;
}

Результат

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• Изучите основы HTML-таблиц
• <caption>, <col>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>: другие элементы, связанные с таблицами
• background-color: CSS-свойство для задания цвета фона ячеек каждой группы столбцов
• border: CSS-свойство для управления границами ячеек группы столбцов
• text-align: CSS-свойство для горизонтального выравнивания содержимого ячеек каждой группы столбцов
• vertical-align: CSS-свойство для вертикального выравнивания содержимого ячеек каждой группы столбцов
• visibility: CSS-свойство для скрытия (или отображения) ячеек группы столбцов
• width: CSS-свойство для управления шириной по умолчанию каждого столбца в группе
• :nth-of-type, :first-of-type, :last-of-type: псевдоклассы CSS для выбора ячеек нужных столбцов