<col>
- 25 января 2023
Что делает тег
Тег <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.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023