HTML :: Тег <colgroup>

В HTML тег <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>. В качестве значений принимает натуральные числа.
Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/tables.html#the-colgroup-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/colgroup

Примеры

HTML Результат

htmlCodes

<!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