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

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

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

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-цвет; либо 6-значный шестнадцатеричный код RGB, префикс которого '#', либо ключевое слово цвета <color>. Другие значения 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>.
• Только ограниченное количество свойств CSS влияют на <colgroup>:
  • background : Различные свойства background зададут фон для ячеек внутри группы столбцов. Поскольку цвет фона группы столбцов рисуется поверх таблицы, но под цветами фона, применёнными к столбцам (<col>), группам строк (<thead>, <tbody> и <tfoot>), строкам (<tr>) и отдельным ячейкам (<th> и <td>), фоны, применённые к группам столбцов таблицы, будут видны только если каждый слой, нарисованный поверх них, имеет прозрачный фон.
  • border: Применяются различные свойства border , но только если у <table> установлено значение border-collapse: collapse.
  • visibility: Значение collapse для группы столбцов приводит к тому, что все ячейки столбцов в этой группе не отображаются, а ячейки, охватывающие другие столбцы, обрезаются. Пространство, которое занимали бы эти столбцы в группе столбцов, удаляется. Однако размеры других столбцов всё равно рассчитываются так, как будто ячейки в скрытом/объединённом столбце(ах) в группе столбцов присутствуют. Другие значения для visibility не имеют эффекта.
  • width: Свойство width определяет минимальную ширину столбцов внутри группы столбцов, как если бы было установлено min-width.

См. <table> для примера полной таблицы, в котором представлены общие стандарты и рекомендации.

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

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

<table>
  <caption>
    Personal weekly activities
  </caption>
  <colgroup span="5" class="weekdays"></colgroup>
  <colgroup span="2" class="weekend"></colgroup>
  <tr>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
    <th>Sun</th>
  </tr>
  <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>
</table>

Группированные столбцы могут использоваться для визуального выделения структуры с помощью 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 для выбора нужных ячеек столбцов