Главная/ Cправочник HTML, CSS, Javascript/ HTML справочник : HTML теги, HTML атрибуты, мета теги, спецсимволы/ Tags/ HTML тег colgroup | назначение, синтаксис, атрибуты, примеры

Тег colgroup

Последнее обновление: 23.01.2011

Тег <colgroup> (англ. column group — группа колонок) — тег-контейнер, позволяет задать общие свойства сразу для нескольких столбцов таблицы.

Благодаря тому, что параметр span тега <col> также распространяет его действие на произвольное количество столбцов, эти теги практически идентичны.

Возможное применение: при установке параметра rules=»groups» тега <table> границы будут отображаться только между колонками, объединенными с помощью colgroup.
Элемент таблицы.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис


<table>
<colgroup> ...</colgroup>
...
</table>

<table>
<colgroup ...>
<col .../>

<col .../>

</colgroup>
...
</table>

Атрибуты



align выраванивание содержимого столбца

  • left — по левому краю (по умолчанию)
  • center — по центру
  • right — по правому краю

не работает в Firefox

char определяет символ по которому происходит выравнивание. Значением по умолчанию является символ десятичной точки
charoff определяет смещение первого в строке символа выравнивания
class определяет имя используемого класса
dir определяет направление символов:

  • ltr — слева направо
  • rtl — справа налево
id уникальный идентификатор
lang определяет язык отображаемого документа
onclick щелчок на элементе
ondblclick двойной щелчок на элементе
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
span количество столбцов, к которым будет применяться оформление (по умолчанию 1)
style задает встроенную таблицу стилей
title всплывающая подсказка
valign вертикальное выравнивание в ячейке таблицы

  • baseline — привязка содержимого к базовой линии
    не поддерживается браузерами
  • bottom — по нижнему краю ячейки
  • middle — по центру ячейки (по умолчанию)
  • top — по верхнему краю ячейки

не работает в Firefox

width ширина столбца

Пример

Задаем ширину и горизонтальное выравнивание (в FireFox отображается некорректно!).


<table width="300px">
<colgroup width="30%" align="center"></colgroup>
<tr><th>№ п/п</th><th>Фамилия</th></tr>
<tr><td>1</td><td>Иванов</td></tr>
<tr><td>2</td><td>Петров</td></tr>
</table>

Объединение в группы (в FireFox отображается некорректно!). Приведен код только одной строки таблицы.


<table>
<colgroup>
<col align="center"/>
<col width="100px"/>
</colgroup>
<colgroup span="2" valign="top" align="right"></colgroup>
<tr>
<th>№ п/п</th><th>Вид кактуса</th><th>количество в оранжерее, шт</th><th>заказано, шт</th>
</tr>
<tr>
<td>1</td><td>Gymnocalycium hybopleurum</td><td>15</td><td>8</td>
</tr>
</table>

Рекомендации по использованию

  • закрывающий тег обязателен (</colgroup> — только для XHTML)
  • должен располагаться в контейнере <table>
  • может содержать внутри тег <col>
  • обязательных атрибутов нет
  • поддерживается не всеми браузерами
  • браузеры, которые понимают тег <colgroup>, не всегда адекватно на него реагируют
  • рекомендуем для оформления элементов таблиц использовать таблицы стилей
Твой код:

Результат: