HTML :: Тег <col>

В HTML тег <col> (от англ. column – колонка) представляет по общему признаку одну или несколько колонок таблицы, отсчет которых происходит слева направо и соответствует порядку следования элементов <col> в коде. Если нужно, чтобы один элемент <col> представлял сразу несколько колонок, используется атрибут span, который в качестве значений принимает натуральные числа, указывающие требуемое количество колонок.

При наличии элемента <col> браузер начинает показывать содержимое таблицы не дожидаясь её полной загрузки. Кроме того, элемент позволяет применять одни и те же стили CSS сразу к нескольким колонкам таблицы. Если для каждой колонки потребуются различные стили, следует использовать несколько элементов <col>, к каждому из которых будет привязана собственная таблица стилей.

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

Согласно спецификации элемент <col> желательно (хотя и необязательно) использовать в элементе <colgroup>, при этом у последнего должен отсутствовать атрибут span. В любом случае все элементы <col> и <colgroup> должны располагаться сразу после элемента <caption> или, при его отсутствии, после открывающего тега <table>.

Синтаксис

	<table>
		<colgroup>
			...
			<col>		     						(закрывающий тег отсутствует)
			...
		</colgroup>
		
		<tr>
			<td>...</td>
		</tr>
	</table>

Атрибуты

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

Ссылки

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

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

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>
  <!-- Создадим таблицу с границами -->
  <table border="1">
	<caption>Таблица с 8 колонками</caption>
     
    <!-- Установим желтый фон первых двух колонок  -->
    <col  style="background-color: yellow" span="2">
     
    <!-- Фон третьей колонки сделаем красным  -->
    <col  style="background-color: red">
     
    <!-- Три колонки пропустим  -->
    <col span="3">
     
    <!-- Фон седьмой колонки сделаем серым  -->
    <col  style="background-color: grey">
     
    <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

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №2</title>
</head>
<body>
  <!-- Создадим таблицу с границами -->
  <table border="1">
	<caption>Таблица с 8 колонками</caption>
     
    <!-- Первой колонке установим синий фон -->
    <col 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">
      <col>
      <col style="background-color: blue">
    </colgroup>
         
    <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>

Пример №2