Что делает тег

Тег <col>создаёт столбец таблицы. Он может использоваться вместе с тегом <colgroup>, который задаёт ширину стили столбцов.

Синтаксис тега <col>

<col span="2">

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <col> не считается семантическим, так как не придаёт никакого конкретного значения содержимому.

Примеры использования

Задать классы для столбцов:

<table>
  <colgroup>
    <col class="first-class">
    <col class="first-class">
  </colgroup>
  <tr>
    <td>Столбец 1</td>
    <td>Столбец 2</td>
  </tr>
</table>

Установить span для столбца:

<table>
  <colgroup>
    <col span="2">
  </colgroup>
  <tr>
    <td>Столбец 1 и 2</td>
  </tr>
</table>

Для чего использовать тег <col>

  • Установить ширину колонки.
  • Задать цвет фона.
  • Выровнять содержимое колонки.
  • Установить границы колонки.

Атрибуты тега <col>

span — количество колонок, которые должен охватывать тег <col>.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Тег <col> нужно использоваться внутри тега <colgroup>, который должен быть дочерним для тега <table>. Кроме того, некоторые атрибуты тега <col>, такие как align, valign и width, не поддерживаются современными браузерами.

Нюансы

Если не указать атрибут span, элемент <col> будет иметь ширину 0px.

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

Тег поддерживается всеми современными браузерами.

Актуальная информация — на сaniuse.

Альтернативные теги

Альтернативных тегов для тега <col> не существует. Но его свойства можно реализовать с помощью CSS.

Чем заменить тег

Чтобы добиться с помощью CSS тех же свойств форматирования, что и у тега <col>, можно использовать следующие селекторы:

  • table td:nth-child(2) — применить свойства ко второму столбцу таблицы.
  • table td:last-child — применить свойства к последнему столбцу таблицы.

Актуальность

Тег <col> не устарел, можете использовать его в веб-разработке.


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023