Тег <col> HTML колонки в таблице

Рейтинг: 5 из 5, голосов 3
+++++

Тег <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 даст возможность выводить только границы групп.

Поддержка браузерами

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
<col> Да Да Да Да Да

Атрибуты

Атрибут Значения Описание
span число Количество колонок, на которые распространяется действие тега.
Устаревшие атрибуты
align left
right
center
justify
Задает правило выравнивания содержимого колонок по горизонтали. В HTML5 используйте CSS.
valign top
middle
bottom
baseline
Задает правило выравнивания содержимого колонок по вертикали. В HTML5 используйте CSS.
width пиксели
проценты
Ширина колонок. В HTML5 используйте CSS.
Оцените, насколько полезна эта статья
+++++
Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных.