HTML :: Тег <col>
В HTML тег <col> (от англ. column – колонка) представляет по общему признаку одну или несколько колонок таблицы, отсчет которых происходит слева направо и соответствует порядку следования элементов <col> в коде. Если нужно, чтобы один элемент <col> представлял сразу несколько колонок, используется атрибут span, который в качестве значений принимает натуральные числа, указывающие требуемое количество колонок.
При наличии элемента <col> браузер начинает показывать содержимое таблицы не дожидаясь её полной загрузки. Кроме того, элемент позволяет применять одни и те же стили CSS сразу к нескольким колонкам таблицы. Если для каждой колонки потребуются различные стили, следует использовать несколько элементов <col>, к каждому из которых будет привязана собственная таблица стилей.
С элементом <col> имеет смысл использовать только следующие css-свойства: border, background, width и visibility, т.к. другие просто не будут иметь никакого эффекта.
Согласно спецификации элемент <col> желательно (хотя и необязательно) использовать в элементе <colgroup>, при этом у последнего должен отсутствовать атрибут span. В любом случае все элементы <col> и <colgroup> должны располагаться сразу после элемента <caption> или, при его отсутствии, после открывающего тега <table>.
Синтаксис
<table>
<colgroup>
...
<col> (закрывающий тег отсутствует)
...
</colgroup>
<tr>
<td>...</td>
</tr>
</table>
Атрибуты
- span – указывает количество колонок, которое представляет данный элемент <col>. В качестве значений принимает натуральные числа.
- Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.
Ссылки
Официальный сайт W3C: https://html.spec.whatwg.org/multipage/tables.html#the-col-element
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/col
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> </head> <body> <!-- Создадим таблицу с границами --> <table border="1"> <caption>Таблица с 8 колонками</caption> <!-- Установим желтый фон первых двух колонок --> <col style="background-color: yellow" span="2"> <!-- Фон третьей колонки сделаем красным --> <col style="background-color: red"> <!-- Три колонки пропустим --> <col span="3"> <!-- Фон седьмой колонки сделаем серым --> <col style="background-color: grey"> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> <td>1.4</td> <td>1.5</td> <td>1.6</td> <td>1.7</td> <td>1.8</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> <td>2.5</td> <td>2.6</td> <td>2.7</td> <td>2.8</td> </tr> </table> </body> </html>
Пример №1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №2</title> </head> <body> <!-- Создадим таблицу с границами --> <table border="1"> <caption>Таблица с 8 колонками</caption> <!-- Первой колонке установим синий фон --> <col style="background-color: blue"> <!-- Зададим колонкам ширину в 60 пикселей --> <colgroup style="width: 60px"> <col style="background-color: yellow" span="2"> <col style="background-color: red"> </colgroup> <!-- А этим в 100 пикселей --> <colgroup style="width: 100px"> <col> <col style="background-color: blue"> </colgroup> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> <td>1.4</td> <td>1.5</td> <td>1.6</td> <td>1.7</td> <td>1.8</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> <td>2.5</td> <td>2.6</td> <td>2.7</td> <td>2.8</td> </tr> </table> </body> </html>
Пример №2