Тег <col> позволяет задавать стили сразу одной или нескольких колонок таблицы HTML, вместо определения стилей для каждой ячейки или ряда, тем самым позволяя уменьшить объем кода таблицы.
Используется в HTML таблицах определенных тегом <table>.
HTML тег <col> должен располагаться внутри тега <table> перед тегами <thead>, <tbody>, <tfoot>, и <tr>. Если в таблице используется подпись <caption>, теги <col> должны ставиться после нее.
Если вам нужно задать стили группы колонок вы также можете использовать тег <colgroup>.
Теги <col> можно также использовать внутри <colgroup>, что позволяет задать стили для конкретных колонок в группе.
Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.
Синтаксис
<col стили_колонок>
Отображение в браузере
Ячейка 1 | Ячейка 2 | Ячейка 3 | Ячейка 4 |
Ячейка 5 | Ячейка 6 | Ячейка 7 | Ячейка 8 |
Ячейка 9 | Ячейка 10 | Ячейка 11 | Ячейка 12 |
Пример использования <col> в HTML коде
<!DOCTYPE html>
<html>
<head>
<title>Таблица с col</title>
</head>
<body>
<table>
<colgroup>
<col span="2" style="background: #32aa32;">
<col style="background: #81A3FA;">
</colgroup>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
<tr>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
</tr>
<tr>
<td>Ячейка 9</td>
<td>Ячейка 10</td>
<td>Ячейка 11</td>
<td>Ячейка 12</td>
</tr>
</tbody>
</table>
</body>
</html>
Разница между тегами <col> и <colgroup>
Тег <col> не позволяет использовать вложенные теги для определения стилей части колонок из группы, что можно сделать используя <colgroup> с вложенными <col>.
При использовании <colgroup> колонки таблицы будут объединены в группы, что при использовании атрибута rules="groups" тега <table> в HTML 4.01 даст возможность выводить только границы групп.
Поддержка браузерами
Тег | |||||
<col> | Да | Да | Да | Да | Да |
Атрибуты
Атрибут | Значения | Описание |
---|---|---|
span | число | Количество колонок, на которые распространяется действие тега. |
Устаревшие атрибуты | ||
align | left right center justify |
Задает правило выравнивания содержимого колонок по горизонтали. В HTML5 используйте CSS. |
valign | top middle bottom baseline |
Задает правило выравнивания содержимого колонок по вертикали. В HTML5 используйте CSS. |
width | пиксели проценты |
Ширина колонок. В HTML5 используйте CSS. |