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

Рейтинг: 5 из 5, голосов 3
+++++

Тег <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 даст возможность выводить только границы групп.

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

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
<colgroup> Да Да Да Да Да

Атрибуты

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

Отправляя форму, я даю согласие на обработку персональных данных.