Тег col (от английского column, «колонка») описывает одну колонку таблицы или несколько колонок подряд. На экране он ничего не рисует, а нужен для другого: задать колонке ширину или фон одной записью, не правя каждую её ячейку. В таблице из пятидесяти строк это одна строка кода вместо пятидесяти.
Колонки записывают внутри группы, о которой подробно рассказано в статье про тег colgroup. Здесь разберём саму колонку: как её записать, какие единицы ширины она принимает, что с фоном, как управлять ею из скрипта и как браузер исправляет ошибки в записи.
<table>
<colgroup>
<col style="width:120px">
<col>
<col style="background:#ffd9a8">
</colgroup>
<tr><th>Чай</th><th>Вкус</th><th>Цена</th></tr>
<tr><td>Улун</td><td>Мягкий</td><td>120</td></tr>
</table>В этой статье
- Тег col в HTML: что это и чем он отличается от colgroup
- Атрибут span у тега col: одна запись на несколько колонок
- Ширина колонки через col: единицы, min-width и приоритет над ячейками
- Фон колонки через col: что закрашивается и что находится сверху
- Тег col и JavaScript: span, width и подсветка колонки по клику
- Где нельзя записывать col: что делает браузер с неверной записью
- Частые ошибки с тегом col
Тег col в HTML: что это и чем он отличается от colgroup
Тег col — void-элемент: у него нет содержимого и закрывающего тега. Запись </col> браузер просто пропускает: в таблице остаётся одна колонка, а не две. Можно писать и <col />, это то же самое.
Записывать col можно только внутри colgroup, у которого нет атрибута span. Группа собирает колонки вместе, а сам col описывает каждую отдельно.
| Тег | Что описывает | Где записывается | Пример записи |
|---|---|---|---|
colgroup | Группу колонок | Внутри table, до строк | <colgroup>...</colgroup> |
col | Одну колонку или несколько подряд | Внутри colgroup | <col span="2"> |
Главное отличие: col описывает отдельную колонку. Если колонкам группы нужны разные стили, каждой даётся свой col. Правило для всех колонок сразу проще записать на группе. Про сворачивание колонок через visibility: collapse рассказано в статье про colgroup, здесь повторять не буду.
Атрибут span у тега col: одна запись на несколько колонок
Атрибут span говорит, сколько колонок подряд описывает один col. По умолчанию значение равно 1. Допустимы целые числа от 1 до 1000, а неверные значения браузер исправляет так же, как у группы: таблица исправленных значений есть в статье про colgroup.
Польза видна на таблице с повторяющимися колонками. Например, в расписании пять рабочих дней нужно закрасить одним цветом, а два выходных другим. Вместо семи записей хватает трёх.
<colgroup>
<col>
<col span="5" style="background:#dfe8ff">
<col span="2" style="background:#ffe8d4">
</colgroup>Это таблица из восьми колонок: первая с названиями, затем пять рабочих дней и два выходных.
| Запись | Что получается | Пример записи |
|---|---|---|
span без стиля | Ничего не меняется: колонки описаны, но правил у них нет | <col span="2"> |
span со стилем | Правило действует на все колонки диапазона | <col span="2" style="width:100px"> |
span больше числа колонок | Это ошибка по стандарту: Chrome прибавляет таблице ширину лишних колонок, но не закрашивает их | <col span="5" style="width:50px"> |
Ширина колонки через col: единицы, min-width и приоритет над ячейками
Ширину колонке задают свойством width. Принимаются любые единицы длины: пиксели, em, проценты, выражение calc(). Заданная ширина работает как желаемая: браузер даст колонке эту ширину, если содержимое помещается, и расширит колонку, если нет. Как на колонку действуют min-width и max-width, стандарт CSS 2.1 не определяет, поэтому всё про них ниже описывает то, что получается в Chrome.
Пример: единицы и ограничения ширины
Выберите правило для первого col: внизу показана получившаяся ширина. В Chrome правило max-width не срабатывает: это видно по статусу.
| Запись | Результат | Пример записи |
|---|---|---|
| Пиксели | Колонка получает эту ширину, если помещается содержимое | col { width: 100px; } |
em | Ширина считается от размера шрифта самой колонки, а он наследуется от таблицы | col { width: 10em; } |
calc() | Выражение вычисляется как обычно | col { width: calc(50px + 1em); } |
| Проценты | Доля от ширины таблицы | col { width: 30%; } |
1% или 0 | Колонка сжимается до самого длинного слова, остальное место получают соседи | col { width: 1%; } |
min-width | В Chrome работает как нижняя граница ширины | col { min-width: 200px; } |
max-width | Chrome игнорирует: верхней границы у колонки нет | col { max-width: 30px; } |
Приём с 1% удобен для колонок с номерами и ценами: колонка занимает ровно столько места, сколько нужно числам, а всё лишнее достаётся колонке с текстом.
Пример: колонка против ячейки
Ширину можно задать и самой ячейке. Если колонка и ячейка не согласны, побеждает не всегда колонка. В обычной раскладке колонка выигрывает, когда она шире: ячейка её не сужает. В раскладке table-layout: fixed ширина, заданная у колонки, сильнее ширины ячейки первой строки. Если у колонки ширины нет, колонку определяет первая строка. Ячейка с colspan на ширину колонок не влияет.
Переключите раскладку: внизу видно, чья ширина применилась.
Фон колонки через col: что закрашивается и что находится сверху
Свойство background у col закрашивает всю колонку: и заголовок, и ячейки всех секций. Подходит любое значение фона, в том числе градиент. Градиент растягивается на всю высоту колонки, а не повторяется в каждой ячейке.
Но у фона колонки самый нижний слой. Выше находятся фон строки tr и фон самой ячейки, они перекрывают цвет колонки. Есть и неочевидная деталь: ячейка, объединившая несколько колонок через colspan, закрашивается цветом первой из них на всю свою ширину.
Пример: фон колонки и что находится поверх
Выберите вариант. В последнем колонки закрашены разным цветом, а ячейка с colspan берёт цвет только первой.
Граница у колонки рисуется только при border-collapse: collapse, как и у группы: подробности в статье про colgroup. Свойства оформления текста до ячеек не доходят.
Тег col и JavaScript: span, width и подсветка колонки по клику
Элемент col в скрипте представлен интерфейсом HTMLTableColElement. Его свойство span связано с атрибутом: запись col.span = 3 меняет атрибут на span="3". Колонкой удобно управлять целиком: скрипт меняет один col, а браузер применяет правило ко всем ячейкам колонки.
| Свойство | Что делает | Пример записи |
|---|---|---|
span | Читает и меняет число колонок | col.span = 3; |
style.width | Задаёт ширину колонки | col.style.width = '120px'; |
classList | Включает и выключает класс колонки | col.classList.toggle('on'); |
width | Устаревшее свойство: работает, но лучше писать CSS | col.width = '100'; |
Пример: подсветка колонки по клику
Представим, что читатель нажимает на название колонки, и она подсвечивается. Без col пришлось бы перебирать ячейки всех строк. С col достаточно переключить класс у одного тега.
const cols = table.querySelectorAll('col');
cols[1].classList.toggle('on');col.on {
background: #fff2c9;
}Нажимайте на названия колонок: в подсказке видно, сколько тегов col изменил скрипт и сколько ячеек при этом закрасилось.
Где нельзя записывать col: что делает браузер с неверной записью
Правильное место для col только одно: внутри colgroup. Всё остальное браузер исправляет по своим правилам, и результат не всегда очевиден.
| Запись | Что делает браузер | Пример записи |
|---|---|---|
col сразу в table | Создаёт группу сам, колонки работают | <table><col><col>... |
col внутри секции | Выносит колонку из секции в отдельную группу, в таблице остаётся пустая секция | <tbody><col><tr>... |
col внутри строки | Выносит колонку в группу, строка остаётся пустой | <tr><col><td>... |
col после строк | Помещает колонку в группу после секций | <tr>...</tr><col> |
col вне таблицы | Удаляет тег | <p><col></p> |
</col> | Пропускает закрывающий тег | <col></col> |
Из первой строки видно, что группа не обязательна: голые col работают и так. Но явная запись colgroup понятнее читателю кода. Подробности о допустимых местах записи — в описании элемента в стандарте HTML.
Частые ошибки с тегом col
Типичные ошибки с тегом col и как их исправить.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
<col></col> | Закрывающий тег пропускается: запись лишняя, но ничего не ломает | Писать <col> или <col /> |
col { max-width: 30px; } | Chrome правило игнорирует | Использовать width или min-width |
col { text-align: right; } | Выравнивание до ячеек не доходит | td:nth-child(2) { text-align: right; } |
col { border: 1px solid; } в обычной таблице | Рамка не рисуется | Добавить таблице border-collapse: collapse |
col { display: none; } | Колонка остаётся на месте | col { visibility: collapse; } |
col внутри tbody или tr | Браузер выносит тег в отдельную группу | Записывать col внутри colgroup |
Фон у ячеек и фон у col вместе | Фон ячейки перекрывает фон колонки | Убрать фон у ячеек или у колонки |
Ждёшь цвет второй колонки в ячейке с colspan | Ячейка берёт цвет первой колонки | Задать фон самой ячейке |
<col span="5"> при трёх колонках | Ошибка по стандарту: Chrome прибавляет таблице ширину двух лишних колонок | Указывать span по числу колонок |
<col width="100"> как атрибут | Работает, но атрибут устарел | <col style="width:100px"> |
Ширина в ячейке при table-layout: fixed | Если у колонки задана ширина, ширина ячейки первой строки игнорируется | Задавать ширину в col |
