W3docs
ru
Войти

HTML тег <col>

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

Тег <col> определяет свойства одного или нескольких столбцов в HTML-таблице, заданной тегом <table>. Он позволяет применять стили сразу ко всему столбцу, а не к каждой отдельной ячейке <td>. Тег <col> почти всегда используется внутри тега <colgroup>, который объединяет один или несколько столбцов с общими свойствами.

Тег <col> размещается внутри тега <table>, перед тегами <thead>, <tbody>, <tfoot> и <tr>, и после тега <caption>, если он используется (в теге <caption> указывается название таблицы).

Зачем использовать <col>?

Ячейка таблицы находится на пересечении строки и столбца, однако структура HTML строится по строкам: тег <tr> объединяет ячейки по горизонтали, и нет элемента, который группировал бы ячейки по вертикали. Элемент <col> восполняет этот пробел. Вместо того чтобы задавать одни и те же width, background-color или border каждой ячейке <td> в столбце, вы объявляете их один раз в <col>, и браузер применяет их ко всему столбцу.

Это особенно удобно, когда нужно:

  • Задать столбцу фиксированную или пропорциональную ширину (например, сделать первый столбец узким, а последний — широким).
  • Выделить столбец цветом фона, чтобы привлечь внимание читателя.
  • Применить рамку к столбцу для его визуального отделения.

Важно учитывать одно ограничение: элемент <col> сам по себе не содержит контента и не может быть произвольно стилизован. Браузеры применяют к <col> лишь ограниченный набор CSS-свойств: background, border, width и visibility. Такие свойства, как padding, color или font-size, для <col> игнорируются — их нужно задавать непосредственно на ячейках <td>/<th>.

Синтаксис

Тег <col> является пустым, то есть закрывающий тег не требуется. Однако в XHTML тег <col> должен быть самозакрывающимся (<col />). В современном HTML5 закрывающий слеш опускается (<col>).

Пример HTML-тега <col>:

HTML-тег <col>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="2" style="width:20%; background-color:#eee;" />
        <col style="width:10%; background-color:#8ebf42;" />
      </colgroup>
      <tr>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Mary Nicolson</td>
        <td>female</td>
        <td>19</td>
      </tr>
      <tr>
        <td>John Johnson</td>
        <td>male</td>
        <td>23</td>
      </tr>
    </table>
  </body>
</html>
Попробуйте сами »

Результат

Result

Атрибут span

Атрибут span позволяет одному элементу <col> охватывать несколько последовательных столбцов. Это избавляет от необходимости повторять один и тот же <col> для соседних столбцов с одинаковым оформлением. Значение должно быть положительным целым числом; по умолчанию равно 1.

В примере ниже один <col span="3"> стилизует сразу первые три столбца, а второй <col> стилизует четвёртый столбец отдельно:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
        padding: 4px 8px;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="3" style="background-color: #eee;" />
        <col style="background-color: #8ebf42;" />
      </colgroup>
      <tr>
        <th>Q1</th>
        <th>Q2</th>
        <th>Q3</th>
        <th>Total</th>
      </tr>
      <tr>
        <td>120</td>
        <td>98</td>
        <td>143</td>
        <td>361</td>
      </tr>
    </table>
  </body>
</html>

Стилизация столбцов с помощью CSS

Атрибуты align, valign и width устарели в HTML5 — они были удалены из спецификации, и полагаться на них не следует. Современный подход — задавать ширину и другие поддерживаемые свойства через CSS, а не с помощью встроенных презентационных атрибутов.

Вы можете обращаться к элементу <col> напрямую или задать ему class и стилизовать этот класс. Поскольку width относится к свойствам, которые действительно применяются через <col>, это работает хорошо:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      th, td {
        border: 1px solid #666;
        padding: 4px 8px;
      }
      /* Style the column directly */
      col.label {
        width: 60%;
      }
      /* Or use the column index */
      col.value {
        width: 40%;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col class="label" />
        <col class="value" />
      </colgroup>
      <tr>
        <th>Product</th>
        <th>Price</th>
      </tr>
      <tr>
        <td>Keyboard</td>
        <td>$29</td>
      </tr>
      <tr>
        <td>Mouse</td>
        <td>$15</td>
      </tr>
    </table>
  </body>
</html>
Внимание

Только ограниченный набор CSS-свойств действует при применении к <col>: background, border, width и visibility (например, visibility: collapse для скрытия столбца). Такие свойства, как padding, color, text-align и font-size, для столбца игнорируются — их необходимо задавать непосредственно на ячейках <td> или <th>.

Доступность

Элементы <col> и <colgroup> являются чисто презентационными — они визуально группируют столбцы, но не создают семантических связей, которые озвучивают программы чтения с экрана. Скринридер перемещается по таблице ячейка за ячейкой, используя связи строк (<tr>) и заголовков (<th>), но не группы столбцов.

Чтобы таблица с данными была понятна при нелинейном чтении:

  • Используйте правильные ячейки-заголовки <th> с атрибутом scope (scope="col" для заголовков столбцов), чтобы каждая ячейка данных была привязана к своему заголовку.
  • Предоставляйте <caption>, чтобы дать таблице название.
  • Не используйте background-color на <col> как единственный способ передачи смысла (например, «допустимые» против «недопустимых» столбцов), поскольку цвет невидим для пользователей скринридеров и людей с нарушением цветовосприятия. Дополняйте его текстом или иконкой.

Атрибуты

АтрибутЗначениеОписание
spannumberЗадаёт количество столбцов, свойства которых определяются элементом <col>. Значение должно быть положительным целым числом. Если параметр не указан, значение по умолчанию равно 1.
alignleft, right, center, justify, charЗадаёт горизонтальное выравнивание содержимого столбца. Устарело в HTML5 — используйте CSS-свойство text-align на ячейках <td>/<th>.
charcharacterВыравнивает содержимое столбца по символу. Используется только с align="char". Устарело в HTML5.
charoffnumberЗадаёт смещение содержимого относительно символа выравнивания. Используется только с align="char". Устарело в HTML5.
valigntop, middle, bottom, baselineЗадаёт вертикальное выравнивание содержимого. Устарело в HTML5 — используйте CSS-свойство vertical-align на ячейках.
width%, pixels, relative_lengthЗадаёт ширину столбца. Устарело в HTML5 — используйте CSS-свойство width на <col> (например, col { width: 40%; }).

span — единственный атрибут, который по-прежнему определён для <col> в HTML5. Всё, что раньше делалось с помощью align, valign и width, теперь выполняется через CSS, как показано в разделе «Стилизация столбцов с помощью CSS» выше.

Тег <col> также поддерживает глобальные атрибуты и атрибуты событий.

Практика

Практика
Что делает HTML-тег col в таблице?
Что делает HTML-тег col в таблице?
Was this page helpful?