| 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> </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.
Рис. 1. Вид таблицы при использовании <colgroup>
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
×Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.10.2018
Редакторы: Влад Мержевич
| Справочник 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.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
Версия: | 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> </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> </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 | выраванивание содержимого столбца
|
---|---|
char | определяет символ по которому происходит выравнивание. Значением по умолчанию является символ десятичной точки |
charoff | определяет смещение первого в строке символа выравнивания |
class | определяет имя используемого класса |
dir | определяет направление символов:
|
id | уникальный идентификатор |
lang | определяет язык отображаемого документа |
onclick | щелчок на элементе |
ondblclick | двойной щелчок на элементе |
onkeydown | нажатие клавиши, когда элемент имеет фокус |
onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
onmousemove | движение указателя мыши, когда элемент имеет фокус |
onmouseout | смещение указателя мыши с элемента |
onmouseover | помещение указателя мыши на элемент |
onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
span | количество столбцов, к которым будет применяться оформление (по умолчанию 1) |
style | задает встроенную таблицу стилей |
title | всплывающая подсказка |
valign | вертикальное выравнивание в ячейке таблицы
|
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 | выраванивание содержимого столбца
|
---|---|
char | определяет символ по которому происходит выравнивание. Значением по умолчанию является символ десятичной точки |
charoff | определяет смещение первого в строке символа выравнивания |
class | определяет имя используемого класса |
dir | определяет направление символов:
|
id | уникальный идентификатор |
lang | определяет язык отображаемого документа |
onclick | щелчок на элементе |
ondblclick | двойной щелчок на элементе |
onkeydown | нажатие клавиши, когда элемент имеет фокус |
onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
onmousemove | движение указателя мыши, когда элемент имеет фокус |
onmouseout | смещение указателя мыши с элемента |
onmouseover | помещение указателя мыши на элемент |
onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
span | количество столбцов, к которым будет применяться оформление (по умолчанию 1) |
style | задает встроенную таблицу стилей |
title | всплывающая подсказка |
valign | вертикальное выравнивание в ячейке таблицы
|
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>, не всегда адекватно на него реагируют
- рекомендуем для оформления элементов таблиц использовать таблицы стилей