Опубликовано: 25.06.2010 Последняя правка: 08.12.2015
HTMLXHTML
IEChromeFireFoxOperaSafari

Тег <COLGROUP>

Тег <COLGROUP> предназначен для группирования столбцов (колонок) таблицы, с целью задания им определенных свойств. Он удобен в использовании и сокращает HTML-код, если группы столбцов имеют разные характеристики, но при этом столбцы внутри групп — одинаковые.

Теги <COLGROUP> можно указывать неоднократно. При этом каждый из них будет действовать на группу столбцов согласно своего появления в коде страницы (сверху вниз, слева направо), а также в зависимости от значения атрибута span. Например, в таблице есть 7-мь столбцов. Мы указали <COLGROUP> два раза, при этом у первого значение span равно 2, а у второго — 5. Значит, первый будет действовать на первую группу из 2-х столбцов, а второй на оставшиеся 5-ть.

Кроме этого, его допускается применять совместно с тегом <COL>, для переопределения свойств некоторых столбцов в группе. В этом случае закрывающий тег </COLGROUP> — обязателен. Допустим, есть группа из 15-и столбцов с шириной по 40 пикселей. А нам надо выделить 7-й столбец и задать ему ширину 20 пикселей. Тогда мы должны написать следующее:

<colgroup width="40">
 <col span="6">
 <col width="20">
 <col span="8">
</colgroup>

В этом примере первый элемент <COL> служит только для того, чтобы «отсечь» первые 6-ть столбцов, а второй элемент как раз и переопределяет ширину для 7-го. Таким образом можно не только менять ширину, а, например, присвоить столбцу id, для применения к нему стилей (CSS).

При включении хотя бы одного тега <COL> в элемент <COLGROUP>, значение span, тега <COLGROUP>, браузеры, при подсчете колонок, будут игнорировать. Поэтому, в таких случаях, значения span необходимо указывать в тегах <COL>.

Теги <COL> и <COLGROUP> отличаются тем, что <COLGROUP> «физически» группирует столбцы, а <COL> — пустой элемент, который объединяет только свойства столбцов.

Если вы хотите переопределить свойства для отдельной ячейки столбца, то используйте атрибуты тегов <TH>, <TD>.

Если для всех столбцов применить данный тег с указанием ширины, а также указать ширину таблицы, то браузер начнет отображать таблицу сразу, по частям, а не после того, как она полностью загрузится.

Атрибуты

Личные атрибуты:

Общие атрибуты:

Тип тега

Назначение: таблицы.

Модель тега: может располагаться внутри таблицы сразу после элемента <CAPTION> либо, если он не указан, после открывающего тега <TABLE>.

Может содержать: теги <COL>.

Открывающий тег: необходим. Закрывающий тег: не обязателен.

Синтаксис

<table>
 <colgroup>
 <tr><td></td></tr>
 </colgroup>
</table>

Пример HTML: применение тега COLGROUP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Применение тега COLGROUP</title>
  <style type="text/css">
   #col4 { background: green; } /* Задаем цвет фона */
  </style>
 </head>
 <body>
  <table width="350" cellspacing="0" cellpadding="2" border="1">
   <colgroup width="50">
    <col span="2">
    <col width="80">
    <col id="col4" width="110">
   </colgroup>
   <colgroup span="2" width="30">
   <tr><td>1.1</td><td>2.1</td><td>3.1</td><td>4.1</td><td>5.1</td><td>6.1</td></tr>
   <tr><td>1.2</td><td>2.2</td><td>3.2</td><td>4.2</td><td>5.2</td><td>6.2</td></tr>
  </table>
 </body>
</html>

Результат примера

Результат. Применение тега COLGROUP.

Применение тега COLGROUP

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа