HTML-тег `<colgroup>`

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

Тег <colgroup> вложен внутри тега <table>, перед <thead>, <tbody>, <tfoot> и <tr>, и после <caption>, если он используется (в теге <caption> вставляется заголовок таблицы).

Одна HTML-таблица может включать несколько тегов <colgroup>.

Синтаксис

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

Пример использования HTML-тега `<colgroup>`:

HTML-тег <colgroup>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="2" style="width:20%; background-color:#eee;" />
        <col style="width:10%; background-color:#8ebf42;" />
      </colgroup>
      <tr>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Mary Nicolson</td>
        <td>female</td>
        <td>19</td>
      </tr>
      <tr>
        <td>John Johnson</td>
        <td>male</td>
        <td>23</td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

Результат

Пример colgroup

Атрибуты

Примечание: Атрибуты оформления, такие как align, valign и width, устарели в HTML5. Вместо них используйте свойства CSS (text-align, vertical-align, width).

Атрибут	Значение	Описание
`align`	`left` \| `right` \| `center` \| `justify` \| `char`	Задает выравнивание содержимого столбца. Не поддерживается в HTML5.
`char`	символ	Выравнивает содержимое столбца по указанному символу. Используется только при `align="char"`. Не поддерживается в HTML5.
`charoff`	число	Сдвигает содержимое ячейки относительно указанного символа. Используется только при `align="char"`. Не поддерживается в HTML5.
`span`	число	Задает количество столбцов, к которым применяется элемент `<col>`. По умолчанию 1.
`valign`	`top` \| `middle` \| `bottom` \| `baseline`	Выравнивает содержимое по вертикали. Не поддерживается в HTML5.
`width`	`%` \| `pixels` \| `relative_length`	Задает ширину столбца. Не поддерживается в HTML5.

Тег <colgroup> также поддерживает Глобальные атрибуты и Атрибуты событий.

Практика

Какое правильное описание и сценарий использования HTML-тега <colgroup>?

Тег <colgroup> определяет группу из одного или более столбцов в таблице для форматирования.<colgroup> — это самозакрывающийся тег.В HTML5 нельзя использовать стили с <colgroup>.Тег <colgroup> не поддерживает атрибут span.Тег <colgroup> используется для группировки содержимого заголовка в таблице.

HTML-тег <colgroup> ​

Синтаксис ​

Пример использования HTML-тега <colgroup>: ​

Результат ​