Colgroup в html: | HTML | WebReference – Тег | HTML справочник

| HTML | WebReference

Элемент <colgroup> (от англ. column group — группа колонок) предназначен для задания ширины и стиля одной или нескольких колонок таблицы. Этот элемент позволяет уменьшить код таблицы за счёт сокращения повторяющихся атрибутов, и при его наличии браузер начинает показывать содержимое таблицы, не дожидаясь её полной загрузки. Элемент <colgroup> можно использовать в комбинации с <col>, который определяет характеристики одной или нескольких колонок.

Обычно закрывающий тег не требуется, но если <colgroup> выступает как контейнер для элементов <col>, тогда следует добавить тег </colgroup> в конце группы.

Разница между свойствами <colgroup> и <col> не очень велика и состоит в следующем. <colgroup> позволяет объединять колонки в определённые группы, также при добавлении атрибута rules со значением groups к элементу <table> браузер будет рисовать линию только между колонками, созданными с помощью <colgroup>. В остальных случаях поведение колонок назначенных через элементы <colgroup> и <col> идентично.

Для <colgroup> допустимо использовать следующие стилевые свойства: border, background, width, visibility. Остальные свойства не оказывают никакого эффекта на элемент.

Синтаксис

<table>
  <colgroup>
  <tr>
   <td>...</td>
  </tr>
</table>

Закрывающий тег

Не обязателен.

Атрибуты

align
Устанавливает выравнивание содержимого колонки по краю.
char
Выравнивает содержимое колонки по заданному символу.
charoff
Сдвигает содержимое ячейки относительно заданного символа.
span
Количество колонок, к которым следует применять атрибуты.
valign
Задает вертикальное выравнивание содержимого колонки.
width
Ширина колонок.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>COLGROUP</title>
 </head>
<body> 
  <table cellpadding="2" cellspacing="0" border="1" rules="groups">
   <colgroup>
   <colgroup span="9" align="center">
    <col span="5">
    <col span="4">
   </colgroup>
   <tr> 
    <td>&nbsp;</td><td>1995</td><td>1996</td><td>1997</td>
    <td>1998</td><td>1999</td><td>2000</td><td>2001</td>
    <td>2002</td><td>2003</td>
   </tr>
   <tr> 
    <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
    <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
    <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
    <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
    <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
    <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 1.

Вид таблицы при использовании colgroup

Рис. 1. Вид таблицы при использовании <colgroup>

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

| Справочник HTML



Элемент <colgroup> (от англ. «column group» ‒ «группа столбцов») предназначен для группирования столбцов (колонок) таблицы, с целью задания им определенных свойств. Этот элемент позволяет уменьшить код таблицы за счёт сокращения повторяющихся атрибутов, и при его наличии браузер начинает показывать содержимое таблицы, не дожидаясь её полной загрузки.
Элемент <colgroup> может состоять из одного, либо нескольких элементов <col>.

Разница между свойствами элементов <colgroup> и <col> состоит в следующем. Элемент <colgroup> позволяет объединять колонки в определённые группы, а при добавлении атрибута rules со значением groups к элементу <table> браузер будет рисовать границу только между колонками, созданными с помощью <colgroup>. В остальных случаях поведение колонок назначенных через элементы <colgroup> и <col> идентично.

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

Примечание: Элемент <colgroup> должен использоваться внутри элемента <table> сразу после элемента <caption> перед элементами <thead>, <tbody>, <tfoot> и <tr>.

Синтаксис

<table>
  <colgroup>
  <tr>
   <td>...</td>
  </tr>
</table>

Закрывающий тег

Не обязателен.

Обычно закрывающий тег не требуется, но если <colgroup> выступает как контейнер для элементов <col>, тогда следует добавить тег </colgroup> в конце группы.

Атрибуты

alignУстарел в HTML5
Устанавливает выравнивание содержимого колонки по краю.
charУстарел в HTML5
Выравнивает содержимое элемента по заданному символу. Атрибут char может быть использован только если атрибут align = «char».
charoffУстарел в HTML5
Атрибут, который позволяет произвести выравнивание элемента с символа, указанного в атрибуте, путем смещения от определённого символа вправо (положительные значения) или влево (отрицательные значения). Атрибут charoff может быть использован только если атрибут align = «char».
span
Определяет какое количество столбцов должна охватывать группа <colgroup>. Число должно быть целым положительным. Если параметр не задан, то его значением по умолчанию будет 1.
valignУстарел в HTML5
Задает вертикальное выравнивание содержимого колонки.
widthУстарел в HTML5
Ширина колонок.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <col> со следующими значениями CSS по умолчанию:

colgroup { 
    display: table-column-group;
}

Для <colgroup> допустимо использовать следующие стилевые свойства: border, background, width, visibility. Остальные свойства не оказывают никакого эффекта на элемент.

Различия между HTML 4.01 и HTML5

В HTML 5 было удалено 5 атрибутов.

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

Элемент <colgroup>

Пример HTML:

Попробуй сам
<table rules="groups">
<caption>Цветная таблица</caption>
<colgroup>
<col span="2">
<col>
</colgroup>
<tbody>
<tr> <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> </tr>
<tr> <td>Ячейка 4</td> <td>Ячейка 5</td> <td>Ячейка 6</td> </tr>
</tbody>
</table>

Спецификации

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

Элемент
<colgroup> 5+ 1+ 4+ 1+ 1+ 1+
Элемент
<colgroup> 1+ 1+ 6+ 1+


seodon.ru | Теги HTML — Тег COLGROUP

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

Тег <COLGROUP> предназначен для группирования столбцов (колонок) таблицы, с целью задания им определенных свойств. Он удобен в использовании и сокращает HTML-код, если группы столбцов имеют разные характеристики, но при этом столбцы внутри групп — одинаковые.

Теги <COLGROUP> можно указывать неоднократно. При этом каждый из них будет действовать на группу столбцов согласно своего появления в коде страницы (сверху вниз, слева направо), а также в зависимости от значения атрибута span. Например, в таблице есть 7-мь столбцов. Мы указали <COLGROUP> два раза, при этом у первого значение span равно 2, а у второго — 5. Значит, первый будет действовать на первую группу из 2-х столбцов, а второй на оставшиеся 5-ть.

Кроме этого, его допускается применять совместно с тегом <COL>, для переопределения свойств некоторых столбцов в группе. В этом случае закрывающий тег </COLGROUP> — обязателен. Допустим, есть группа из 15-и столбцов с шириной по 40 пикселей. А нам надо выделить 7-й столбец и задать ему ширину 20 пикселей. Тогда мы должны написать следующее:

<colgroup>
 <col span="6">
 <col>
 <col span="8">
</colgroup>

В этом примере первый элемент <COL> служит только для того, чтобы «отсечь» первые 6-ть столбцов, а второй элемент как раз и переопределяет ширину для 7-го. Таким образом можно не только менять ширину, а, например, присвоить столбцу id, для применения к нему стилей (CSS).

При включении хотя бы одного тега <COL> в элемент <COLGROUP>, значение span, тега <COLGROUP>, браузеры, при подсчете колонок, будут игнорировать. Поэтому, в таких случаях, значения span необходимо указывать в тегах <COL>.

Теги <COL> и <COLGROUP> отличаются тем, что <COLGROUP> «физически» группирует столбцы, а <COL> — пустой элемент, который объединяет только свойства столбцов.

Если вы хотите переопределить свойства для отдельной ячейки столбца, то используйте атрибуты тегов <TH>, <TD>.

Если для всех столбцов применить данный тег с указанием ширины, а также указать ширину таблицы, то браузер начнет отображать таблицу сразу, по частям, а не после того, как она полностью загрузится.

Атрибуты

Личные атрибуты:

  • align — Горизонтальное выравнивание содержимого ячеек.
  • span — Указывает количество столбцов, на которые распространится действие элемента.
  • valign — Вертикальное выравнивание содержимого ячеек.
  • width — Указывает ширину столбцов.

Общие атрибуты:

  • accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
  • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри HTML-элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
  • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Назначение: таблицы.

Модель тега: может располагаться внутри таблицы сразу после элемента <CAPTION> либо, если он не указан, после открывающего тега <TABLE>.

Может содержать: теги <COL>.

Открывающий тег: необходим. Закрывающий тег: не обязателен.

Синтаксис

<table>
 <colgroup>
 <tr><td></td></tr>
 </colgroup>
</table>

Пример HTML: применение тега 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=utf-8">
  <title>seodon.ru - Применение тега COLGROUP</title>
  <style type="text/css">
   #col4 { background: green; } /* Задаем цвет фона */
  </style>
 </head>
 <body>
  <table cellspacing="0" cellpadding="2" border="1">
   <colgroup>
    <col span="2">
    <col>
    <col>
   </colgroup>
   <colgroup span="2">
   <tr><td>1.1</td><td>2.1</td><td>3.1</td><td>4.1</td><td>5.1</td><td>6.1</td></tr>
   <tr><td>1.2</td><td>2.2</td><td>3.2</td><td>4.2</td><td>5.2</td><td>6.2</td></tr>
  </table>
 </body>
</html>

Результат примера

Результат. Применение тега COLGROUP.

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа

HTML тег colgroup

Тег <colgroup> определяет группу из одного или более столбцов таблицы для форматирования.

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

Элемент <colgroup> должен использоваться внутри элемента <table> сразу после элемента <caption> перед элементами <thead>, <tbody>, <tfoot> и <tr>.

Для определения различных свойств столбцов внутри элемента <colgroup> используется тег <col>.

Разница между HTML 4.01 и HTML5

В HTML5 большинство атрибутов не поддерживаются.

Атрибуты тега <colgroup>

Атрибут Описание
align Определяет горизонтальное выравнивание содержимого элемента
char Определяет символ выравнивания связанного с элементом содержимого
charoff Определяет количество символов смещения
span Определяет количество колонок, на которые влияет элемент <colgroup>
valign Определяет вертикальное выравнивание содержимого группы колонок
width Определяет ширину группы колонок

Общие атрибуты

Тег <colgroup> поддерживает общие атрибуты и атрибуты-события.

HTML пример

Устанавливаем фоновый цвет трех колонок таблицы при помощи тегов <colgroup> и <col>:


<table>
  <colgroup>
    <col span="2">
    <col>
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Название</th>
    <th>Цена</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>Мой первый HTML</td>
    <td>$53</td>
  </tr>
</table>

CSS стили по умолчанию

Большинство браузеров будут отображать тег <colgroup> со следующими стилями


colgroup { 
    display: table-column-group;
}

Тег COLGROUP

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

Обычно закрывающий тег не требуется, но если COLGROUP выступает как контейнер для элементов COL, тогда следует добавить тег </colgroup> в конце группы.

Разница между свойствами тегов COLGROUP и COL не очень велика и состоит в следующем. COLGROUP позволяет объединять колонки в определенные группы, также при добавлении параметра rules=groups к тегу TABLE браузер будет рисовать линию только между колонками, созданными с помощью COLGROUP. В остальных случаях поведение колонок назначенных через элементы COLGROUP и COL идентично.

Синтаксис

<table>
<colgroup …>
<tr><td>…</td></tr>
</table>

Закрывающий тег
Не обязателен.

Параметры
align — устанавливает выравнивание содержимого колонки по краю.
span — количество колонок, к которым следует применять параметры.
valign — задает вертикальное выравнивание содержимого колонки.
width — ширина колонок.

Пример 1. Использование тега COLGROUP

<html>
<body>

<table width=450 cellpadding=2 cellspacing=0 border=1 bordercolor=black rules=groups>
<colgroup width=150>
<colgroup span=9 align=center width=50>
<col span=5>
<col span=4>
</colgroup>
<tr>
<td>&nbsp;</td><td>1995</td><td>1996</td><td>1997</td>
<td>1998</td><td>1999</td><td>2000</td><td>2001</td>
<td>2002</td><td>2003</td>
</tr>
<tr>
<td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
<td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
</tr>
<tr>
<td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
<td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
</tr>
<tr>
<td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
<td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
</tr>
</table>

</body>
</html>

Код примера по-разному интерпретируется браузерами. Так, Internet Explorer и Opera правильно отображают данные, а браузер Netscape не понимает параметр align=center, задающий выравнивание по центру колонки и отрисовывает вертикальные линии совсем не между колонками, созданными через COLGROUP.


Описание параметров тега COLGROUP

Параметр ALIGN

Описание
Задает выравнивание содержимого колонок по горизонтали. Этот параметр действует на все ячейки в колонке, в том числе и на заголовки таблицы, которые определяются тегом TH. Чтобы управлять выравниванием содержимого разных элементов воспользуйтесь стилями или устанавливайте параметр align для отдельных ячеек таблицы.

Синтаксис
<colgroup align=left | center | right>

Аргументы
left — выравнивание контента по левому краю.
center — выравнивание по центру.
right — выравнивание по правому краю.

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

Аналог CSS
text-align

Пример 2. Выравнивание содержимого колонок

html>
body>

<table>
<colgroup align=left>
<colgroup span=3 width=50 align=center>

</table>

</body>
</html>

 


Параметр SPAN

Описание
Определяет число колонок, к которым будут применяться заданные параметры. Если этот атрибут отсутствует, то тег COLGROUP работает для одной колонки. Допускается применять параметр span к нескольким колонкам и таким образом формировать группы колонок с одинаковыми характеристиками.

Синтаксис
<colgroup span=число>

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

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

Пример 3. Формирование группы колонок

html>
body>

<table width=700 cellspacing=0 border=1 bordercolor=black>
<col width=150>
<col span=5 width=50 align=center>
<col span=4 width=75 align=center>
<tr>
<td>&nbsp;</td><td>1995</td><td>1996</td><td>1997</td>
<td>1998</td><td>1999</td><td>2000</td><td>2001</td>
<td>2002</td><td>2003</td>
</tr>
<tr>
<td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
<td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
</tr>
<tr>
<td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
<td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
</tr>
<tr>
<td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
<td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
</tr>
</table>

</body>
</html>

 


Параметр VALIGN

Описание
Устанавливает вертикальное выравнивание содержимого колонки. По умолчанию контент ячеек в колонке располагается по центру вертикали.

Синтаксис
<colgroup valign=baseline | bottom | middle | top>

Аргументы
baseline — выравнивание по базовой линии, при этом происходит привязка содержимого колонки к одной линии.
bottom — выравнивание по нижнему краю.
middle — выравнивание по середине.
top — выравнивание по верхнему краю строки.

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

Пример 4. Выравнивание содержимого колонок

html>
body>

<table width=700>
<colgroup width=150>
<colgroup valign=top>

</table>

</body>
</html>

 


Параметр WIDTH

Описание
Задает ширину колонки. Если общая ширина содержимого превышает указанную ширину, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в колонке находятся изображения, параметр width будет проигнорирован, и новая ширина колонки будет вычислена на основе ее содержимого.

Синтаксис
<colgroup width=значение>

Аргументы
Обычно применяется любое целое значение в пикселах или процентах от доступного пространства. Альтернативный вариант основан на использовании символа *, который обозначает всю доступную ширину. Допустимо использовать кратные значения, например 3*. Например, если для таблицы установлена ширина 804 пиксела, а для колонок — 1*, 2*, 3*, то в пикселах это будет соответственно 134, 268 и 402. При использовании подобных единиц браузеру требуется загрузить таблицу целиком, чтобы вычислить необходимую ширину ячеек, что приводит к задержке вывода больших таблиц.

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

Аналог CSS
width

Пример 5. Установка ширины колонок

html>
body>

<table width=600 cellpadding=2 cellspacing=0 border=1 bordercolor=black rules=groups>
<colgroup width=2*>
<colgroup span=2 align=center width=1*>
<tr>
<td> … </td>
<td> … </td>
</tr>
</table>

</body>
</html>

Ширина первой колонки в примере будет в два раза больше остальных колонок таблицы.

Материал взят с сайта htmlbook.ru

colgroup — Xiper.net

Автор: Евгений Рыжков Дата публикации: 10.01.2009

Тег <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>
<colgroup 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/>
</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>, не всегда адекватно на него реагируют
  • рекомендуем для оформления элементов таблиц использовать таблицы стилей

Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— table { border: 1px solid #000; /* оформляем границы таблицы */ border-collapse: collapse; /* убираем отступы между ячейками */ border-spacing: 0; } td { border: 1px solid #000; /* оформляем границы ячеек */ } —> </style> </head> <body> <table> <colgroup> <col align=»center»/> <col/> </colgroup> <colgroup span=»2″ 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> <tr> <td>2</td> <td>Gymnocalycium valnicekianum</td> <td>26</td> <td>6</td> </tr> <tr> <td>3</td> <td>Mammillaria discolor</td> <td>2</td> <td>0</td> </tr> <tr> <td>4</td> <td>Mammillaria johnstonii</td> <td>14</td> <td>4</td> </tr> </table> </body> </html> Сделай код и жми тут

Результат:
большой полигон

По теме

HTML тег 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>
<colgroup 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/>
</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>, не всегда адекватно на него реагируют
  • рекомендуем для оформления элементов таблиц использовать таблицы стилей

Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— table { border: 1px solid #000; /* оформляем границы таблицы */ border-collapse: collapse; /* убираем отступы между ячейками */ border-spacing: 0; } td { border: 1px solid #000; /* оформляем границы ячеек */ } —> </style> </head> <body> <table> <colgroup> <col align=»center»/> <col/> </colgroup> <colgroup span=»2″ 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> <tr> <td>2</td> <td>Gymnocalycium valnicekianum</td> <td>26</td> <td>6</td> </tr> <tr> <td>3</td> <td>Mammillaria discolor</td> <td>2</td> <td>0</td> </tr> <tr> <td>4</td> <td>Mammillaria johnstonii</td> <td>14</td> <td>4</td> </tr> </table> </body> </html> Сделай код и жми тут

Результат:
большой полигон

По теме

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *