Html col: Тег | htmlbook.ru — Вебджем.рф | Создание и продвижение сайтов

Содержание

⚡️ HTML и CSS с примерами кода

Тег <col> (от англ. column — столбец, колонка) задаёт ширину и другие характеристики одной или нескольких колонок таблицы.

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

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

Таблицы

caption
col
colgroup
table
tbody
td
tfoot
th
thead
tr

Синтаксис

<table>
  <col />
  <tr>
    <td>.  ..</td>
  </tr>
</table>

Закрывающий тег не требуется.

Атрибуты

span: Количество колонок, к которым следует применять параметры.

span

Определяет число колонок, к которым будут применяться заданные характеристики. Если этот атрибут отсутствует, то элемент <col> работает для одной колонки. Допускается применять атрибут span к нескольким колонкам и таким образом формировать группы колонок с одинаковыми характеристиками.

Синтаксис

<col span="<число>" />

Значения

Целое положительное число.

Значение по умолчанию

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

WHATWG HTML Living Standard
HTML5
HTML 4.01 Specification

Описание и примеры

<html>
  <head>
    <meta
      http-equiv="Content-Type"
      content="text/html; charset=utf-8"
    />
    <title>COL</title>
  </head>
  <body>
    <table
     
      border="0"
      cellpadding="5"
      cellspacing="0"
    >
      <col valign="top" />
      <col valign="top" />
      <tr>
        <td>
          Рутений распознает окисленный интермедиат, что
          позже подтвердилось многочисленными опытами. 
        </td>
        <td>
          При осуществлении искусственных ядерных реакций
          было доказано, что хлорсульфит натрия
          кристалличен.
        </td>
      </tr>
    </table>
  </body>
</html>

Ссылки

Тег <col> ^{MDN (рус.)}

— журнал «Доктайп»

25 января 2023

Справочник

Нейрокекс

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

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

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

<col span="2">

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

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

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

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

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

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

<table>
  <colgroup>
    <col>
    <col>
  </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.

Попробовать

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

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

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

Справочник по HTML

Основные HTML-теги в 2023 году.

Справочник

31 марта 2023

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

Список основных атрибутов, которые подойдут ко всему.