Тег colgroup

ОписВідкриваючий та закриваючий теги colgroup створюють структурну групу, що об'єднує один або кілька стовпчиків.
Для всієї групи можна вказати загальні атрибути за допомогою тегу col - це набагато зручніше, ніж, приміром, вказувати ширину окремо для кожного елементу td.
Синтаксис
<table>
<colgroup атрибут="значення">
<col атрибут="значення">
</colgroup>
...
Елементи таблиці
...
</table>
Атрибутиspan
Вказує кількість колонок, до яких слід застосовувати задані атрибути.
width
Вказує ширину колонок
align
Вказує горизонтальне вирівнювання вмісту колонок, може приймати значення:

  1. left - вміст вирівнюється по лівому краю;

  2. right - вміст вирівнюється по правому краю;

  3. center - вміст вирівнюється по центру;


valign
Вказує вертикальне вирівнювання вмісту колонок, може приймати значення:

  1. top - вміст вирівнюється по верхньому краю;

  2. bottom - вміст вирівнюється по нижньому краю;

  3. middle - вміст вирівнюється по центру;

Приклад
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//UA" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Приклад тегу colgroup</title>
</head>
<body>
<table width="100%" border="0" cellpadding="5" cellspacing="3">

<colgroup>
<col width="35%">
<col width="45%">
</colgroup>


<tr style="background:#ccffcc">
<td>ширина=35%</td>
<td>ширина=45%</td>
<td>ширина=?</td>
</tr>

<tr style="background:#ffeecc">
<td>ширина=35%</td>
<td>ширина=45%</td>
<td>ширина=?</td>
</tr>

<tr style="background:#ccffcc">
<td>ширина=35%</td>
<td>ширина=45%</td>
<td>ширина=?</td>
</tr>

<tr style="background:#ffeecc">
<td>ширина=35%</td>
<td>ширина=45%</td>
<td>ширина=?</td>
</tr>

</table>
</body>
</html>

Тег colgroup


(відкриється в новому вікні)
Часті помилки
ДодатковоВарто не забувати, що тег colgroup сприяє прискоренню виведення веб-сторінки на екран. Спочатку, до того як вивести таблицю, браузер аналізує її, і виходячи з розмірів ії вмісту, рендерить таблицю.
Але якщо браузеру відомий атрибут width тегів colgroup і col, він починає виводити вміст таблиці і наступних за таблицею елементів, не чекаючи її повного завантаження.

Тег colgroup