Тег <colgroup> | Справочник HTML
http://belarusweb.net
Основы создания сайтов

Тег <colgroup>

Описание

Тег <colgroup> (от англ. column groupгруппа колонок) представляет по общему признаку одну или несколько колонок таблицы и может использоваться как контейнер для элементов <col>. При этом, если <colgroup> не используется в качестве контейнера для элементов <col>, закрывающий тег можно опускать. Однако все элементы <colgroup> должны располагаться сразу же после элемента <caption> или, при его отсутствии, после открывающего тега <table>.

При наличии элемента <colgroup> браузер начинает показывать содержимое таблицы не дожидаясь её полной загрузки. Кроме того, браузер будет рисовать линию только между колонками, созданными с помощью <colgroup>, если к элементу <table> будет добавлен атрибут rules="groups".

Хотя элемент <colgroup> позволяет применять одни и те же стили CSS сразу к нескольким колонкам таблицы, с ним имеет смысл использовать только следующие css-свойства: border, background, width и visibility, т.к. другие просто не будут иметь никакого эффекта.

Если элемент <colgroup> используется в качестве контейнера для элементов <col>, атрибут span в нем присутствовать не должен.

Синтаксис

	<table>
		<colgroup>
			...
		</colgroup>			     						(закрывающий тег не обязателен)
		
		<tr>
			<td>...</td>
		</tr>
	</table>

Атрибуты

  • span – указывает количество колонок, которое представляет данный элемент <colgroup>. В качестве значений принимает натуральные числа.
  • Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Примеры

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>
  <!-- Создадим таблицу с границами между группами -->
  <table border="1" rules="groups">
	<caption>Таблица с 8 колонками</caption>
     
    <!-- Закрывающий тег опускаем -->
    <colgroup style="background-color: blue">
     
    <!-- Зададим колонкам ширину в 60 пикселей -->
    <colgroup style="width: 60px">
      <col style="background-color: yellow" span="2">
      <col style="background-color: red">
    </colgroup>
     
    <!-- А этим двум в 100 пикселей -->
    <colgroup style="width: 100px" span="2">
         
    <tr>
      <td>1.1</td> <td>1.2</td> <td>1.3</td> <td>1.4</td> 
      <td>1.5</td> <td>1.6</td> <td>1.7</td> <td>1.8</td> 
    </tr>
     
    <tr>
      <td>2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> 
      <td>2.5</td> <td>2.6</td> <td>2.7</td> <td>2.8</td>
    </tr>
  </table>	
</body>
</html>

Пример №1