Веб Навсегда.инфоHTML-теги → COLGROUP

Реклама


!!! Ваша ссылка здесь всего за 10 руб в месяц на всех страницах сайта!!!

COLGROUP

Описание элемента

Устанавливает выравнивание, ширину и количество колонок, к которым применять данные таблицы.

Этот тег устанавливает параметры для одной или нескольких колонок, но его можно использовать и совместно с тегом COL, задающим параметры для одной или нескольких колонок.

В принципе, разница между COL и COLGROUP не существенная и состоит в том, что при указании в таблице (тег TABLE) параметра rules со значением group, браузер будет рисовать линию только между колонками в COLGROUP. Ну и так же COL можно использовать внутри контейнера COLGROUP.

Т.е. по сути можно задать общие некоторые параметры для группы ячеек, а потом уже тегами COL внутри COLGROUP изменить отдельные параметры колонок. Подробнее см пример ниже.

Синтаксис

<table>
<colgroup {align valign span width}={"выравнивание" | "выравнивание" | "количество" | "ширина"}>
...

</table>

Обычно, закрывающийся тег у COLGROUP не требуется, однако он обязателен в случае когда COL находится в контейнере COLGROUP.

Возможные параметры

align - выравнивание по горизонтали.

valign - место отображения заголовка: до или после таблицы.

span - количество колонок, к которым применяются параметры.

width - ширина колонок.

ВНИМАНИЕ:
При использовании параметров выравнивания align и valign, выравнивание не происходит в Mozilla Firefox 3 по непонятным причинам.

Параметр ALIGN

Задает выравнивание содержимого ячейки по горизонтали.

Возможные аргументы:
left
 - выравнивание по левому краю
right - выравнивание по правому краю
center - выравнивание по центру, но может не пониматься некоторыми браузерами.

Значение по умолчанию:
left.

Параметр VALIGN

Задает выравнивание содержимого ячейки по вертикали.

Возможные аргументы:
top - заголовок будет располагаться перед таблицей.
bottom - заголовок будет располагаться после таблицы.
middle - выравнивание по центру
baseline - выравнивание по базовой линии и при этом содержимое ячейки привязывается к одной линии.

Значение по умолчанию:
middle.

Параметр SPAN

Задает количество колонок, к которым будут применятся данные параметры.

Возможные аргументы:
Целое положительное число.

Значение по умолчанию:
1.

Параметр WIDTH

Задает ширину колонки. Но в случае, когда содержимое не вмещается по ширине (например широкое изображение), то этот параметр игнорируется и ширина колонки расширяется под содержимое.

Возможные аргументы:
Как правило указывают значение в пикселях или процентах. Но можно указать и при помощи символа *, используя при этом кратные значения. Ну к примеру у таблицы ширина 600 пикселей, а для колонок задана ширина 1* и 2*, то в данном случае ширина колонок будет 200 и 400 пикселей соответственно.

Значение по умолчанию:
Ширина вычисляется по содержимому.

Примеры использования

Пример тега COLGROUP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример использования тега COLGROUP</title>
</head>
<body>
<table border="1" rules="groups">
<caption>Рост цен на продукты в разные года</caption>
<colgroup width="150">
<colgroup span="9" align="center" width="80">
<col span="3" align="right">
<col span="3">
<col span="3" align="left">
</colgroup>
<tr>
<th>Продукт \ год</th>
<th>1999</th>
<th>2000</th>
<th>2001</th>
<th>2002</th>
<th>2003</th>
<th>2004</th>
<th>2006</th>
<th>2007</th>
<th>2008</th>
</tr>
<tr>
<th>Хлеб</th>
<td>4.20</td>
<td>4.90</td>
<td>5.25</td>
<td>5.80</td>
<td>6.10</td>
<td>6.75</td>
<td>7.50</td>
<td>8.75</td>
<td>13.50</td>
</tr>
<tr>
<th>Молоко</th>
<td>8.70</td>
<td>9</td>
<td>9.45</td>
<td>10</td>
<td>11.75</td>
<td>12.50</td>
<td>14</td>
<td>15.50</td>
<td>18</td>
</tr>
<tr>
<th>Мясо</th>
<td>74.60</td>
<td>80</td>
<td>85</td>
<td>86.20</td>
<td>87.50</td>
<td>90</td>
<td>95</td>
<td>130</td>
<td>205</td>
</tr>
</table>

</body>
</html>

И вот как это будет выглядеть в браузере:
Пример тега COLGROUP