Тег <colgroup> HTML группа колонок таблицы

Рейтинг: 4 из 5, голосов 17

07 января 2018 г.

Тег <colgroup> определяет группу из одной или нескольких колонок HTML таблицы. Используется в HTML таблицах определенных тегом <table>.

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

HTML тег <colgroup> должен располагаться внутри тега <table> перед тегами <thead>, <tbody>, <tfoot>, и <tr>. Если в таблице используется подпись <caption>, тег <colgroup> должен ставиться после нее.

Если вам нужно задать стили колонок, вы также можете использовать тег <col>.

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

Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.

Синтаксис

Вариант 1. <colgroup> без вложенных тегов <col>:

<colgroup span="количество_колонок">

Атрибут span задает количество колонок в группе. Если атрибут span не задан, считается, что его значение равно единице.

Вариант 2. <colgroup> с вложенными тегами <col>:

<colgroup>вложенные теги col</colgroup>

Отображение в браузере

Ячейка 1	Ячейка 2	Ячейка 3	Ячейка 4
Ячейка 5	Ячейка 6	Ячейка 7	Ячейка 8
Ячейка 9	Ячейка 10	Ячейка 11	Ячейка 12

Пример использования <colgroup> в HTML коде

<!DOCTYPE html>
<html>
  <head>
    <title>Таблица с colgroup</title>
  </head>
  <body>
    <table>
      <colgroup style="background: #35aa35;">
        <col style="background: #80A3FB;">
        <col span="2">
      </colgroup>
      <tbody>
        <tr>
          <td>Ячейка 1</td>
          <td>Ячейка 2</td>
          <td>Ячейка 3</td>
          <td>Ячейка 4</td>
        </tr>
        <tr>
          <td>Ячейка 5</td>
          <td>Ячейка 6</td>
          <td>Ячейка 7</td>
          <td>Ячейка 8</td>
        </tr>
        <tr>
          <td>Ячейка 9</td>
          <td>Ячейка 10</td>
          <td>Ячейка 11</td>
          <td>Ячейка 12</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Разница между тегами <colgroup> и <col>

Тег <colgroup> позволяет использовать вложенные теги <col> для определения стилей части колонок из группы.

При использовании <colgroup> колонки таблицы будут объединены в группы, что при использовании атрибута rules="groups" тега <table> в HTML 4.01 даст возможность выводить только границы групп.

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

Тег
<colgroup>	Да	Да	Да	Да	Да

Атрибуты

Атрибут	Значения	Описание
span	число	Количество колонок, которые будут объединены в группу. Используется, если <colgroup> задан без вложенных тегов <col>.
Устаревшие атрибуты
align	left right center justify	Задает правило выравнивания содержимого группы колонок по горизонтали. В HTML5 используйте CSS.
valign	top middle bottom baseline	Задает правило выравнивания содержимого группы колонок по вертикали. В HTML5 используйте CSS.
width	пиксели проценты	Ширина группы колонок. В HTML5 используйте CSS.

by Lebedev