Colgroup html: Тег | htmlbook.ru
Тег | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
6.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <colgroup> предназначен для задания ширины и стиля одной или нескольких колонок таблицы. Этот тег позволяет уменьшить код таблицы за счет сокращения повторяющихся атрибутов, и при наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Тег <colgroup> можно использовать в комбинации с тегом <col>, который определяет характеристики одной или нескольких колонок.
Обычно закрывающий тег не требуется, но если <colgroup> выступает как контейнер для элементов <col>, тогда следует добавить тег </colgroup> в конце группы.
Разница между свойствами тегов <colgroup> и <col> не очень велика и состоит в следующем. <colgroup> позволяет объединять колонки в определенные группы, также при добавлении атрибута rules=»groups» к тегу <table> браузер будет рисовать линию только между колонками, созданными с помощью <colgroup>. В остальных случаях поведение колонок назначенных через элементы <colgroup> и <col> идентично.
Синтаксис
HTML |
|
XHTML |
|
Атрибуты
- align
- Устанавливает выравнивание содержимого колонки по краю.
- char
- Выравнивает содержимое колонки по заданному символу.
- charoff
- Сдвигает содержимое ячейки относительно заданного символа.
- span
- Количество колонок, к которым следует применять атрибуты.
- valign
- Задает вертикальное выравнивание содержимого колонки.
- width
- Ширина колонок.
Закрывающий тег
Не обязателен.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML> <html> <head> <meta 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. Браузеры Chrome и Safari не поддерживают атрибут align.
Рис. 1. Вид таблицы при использовании тега <colgroup>
Тег HTML группа колонок таблицы
Тег <colgroup> определяет группу из одной или нескольких колонок HTML таблицы. Используется в HTML таблицах определенных тегом <table>.
Тег <colgroup> позволяет определить стили сразу для группы колонок, вместо определения стилей для каждой ячейки или ряда, тем самым позволяя уменьшить объем кода таблицы.
HTML тег <colgroup> должен располагаться внутри тега <table> перед тегами <thead>, <tbody>, <tfoot>, и <tr>. Если в таблице используется подпись <caption>, тег <colgroup> должен ставиться после нее.
Если вам нужно задать стили колонок, вы также можете использовать тег <col>.
Теги <col> можно также использовать внутри <colgroup>, что позволяет задать стили для конкретных колонок в группе.
Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.
Синтаксис
Вариант 1. <colgroup> без вложенных тегов <col>:
<colgroup span="количество_колонок">
Атрибут span задает количество колонок в группе. Если атрибут span не задан, считается, что его значение равно единице.
Вариант 2. <colgroup> с вложенными тегами <col>:
<colgroup>вложенные теги col</colgroup>
Отображение в браузере
Ячейка 1 | Ячейка 2 | Ячейка 3 | Ячейка 4 |
Ячейка 5 | Ячейка 6 | Ячейка 7 | Ячейка 8 |
Ячейка 9 | Ячейка 10 | Ячейка 11 | Ячейка 12 |
Пример использования <colgroup> в HTML коде
<!DOCTYPE html>
<html>
<head>
<title>Таблица с colgroup</title>
</head>
<body>
<table>
<colgroup>
<col>
<col span="2">
</colgroup>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
<tr>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
</tr>
<tr>
<td>Ячейка 9</td>
<td>Ячейка 10</td>
<td>Ячейка 11</td>
<td>Ячейка 12</td>
</tr>
</tbody>
</table>
</body>
</html>
Разница между тегами <colgroup> и <col>
Тег <colgroup> позволяет использовать вложенные теги <col> для определения стилей части колонок из группы.
При использовании <colgroup> колонки таблицы будут объединены в группы, что при использовании атрибута rules=»groups» тега <table> в HTML 4.01 даст возможность выводить только границы групп.
Поддержка браузерами
Атрибуты
Атрибут | Значения | Описание |
---|---|---|
span | число | Количество колонок, которые будут объединены в группу. Используется, если <colgroup> задан без вложенных тегов <col>. |
Устаревшие атрибуты | ||
align | left right center justify |
Задает правило выравнивания содержимого группы колонок по горизонтали. В HTML5 используйте CSS. |
valign | top middle bottom baseline |
Задает правило выравнивания содержимого группы колонок по вертикали. В HTML5 используйте CSS. |
width | пиксели проценты |
Ширина группы колонок. В HTML5 используйте CSS. |
| 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 | назначение, синтаксис, атрибуты, примеры
Последнее обновление: 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>, не всегда адекватно на него реагируют
- рекомендуем для оформления элементов таблиц использовать таблицы стилей
Твой код:
<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>
и <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>
Определение и использование
Tег <colgroup>
указывает группу из одного или нескольких столбцов в таблице для форматирования.
Tег <colgroup>
полезен для применения стилей ко всем столбцам вместо повторения стилей для каждой ячейки, для каждой строки.
Примечание: Tег <colgroup>
должен быть дочерним элементом <table>
,
после элементов <caption>
и перед элементами <thead>
, <tbody>
, <tfoot>
, и <tr>
.
Совет: Определение различных свойств столбца внутри столбца <colgroup>
,
используйте тег <col>
в теге <colgroup>
.
Поддержка браузеров
Элемент | |||||
---|---|---|---|---|---|
<colgroup> | Да | Да | Да | Да | Да |
Различий между HTML 4.01 и HTML5
Большинство атрибутов в HTML 4.01 не поддерживаются в HTML5.
Атрибуты
Атрибут | Значение | Описание |
---|---|---|
align | left right center justify char | Не поддерживается в HTML5. Выравнивает содержимое в группе столбцов |
char | character | Не поддерживается в HTML5. Выравнивает содержимое в группе столбцов по символу |
charoff | number | Не поддерживается в HTML5. Задает число знаков, содержимое будет выровнено по символу, заданный атрибутом char |
span | number | Задает количество столбцов, которые должны охватывать группа столбцов |
valign | top middle bottom baseline | Не поддерживается в HTML5. Вертикальное выравнивание содержимого в группе столбцов |
width | pixels % relative_length | Не поддерживается в HTML5. Задает ширину группы столбцов |
Глобальные атрибуты
Tег <colgroup>
также поддерживает Глобальные атрибуты в HTML.
Атрибуты событий
Tег <colgroup>
также поддерживает Атрибуты событий в HTML.
Связанные страницы
HTML DOM reference: Объект columnGroup
Настройки CSS по умолчанию
Большинство браузеров будут отображать элемент <colgroup>
со следующими значениями по умолчанию:
Таблица HTML. Тег COLGROUP. Оформление HTML таблицы.
Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена HTML тегу <colgroup>. Описание тега <colgroup>, атрибуты тега <colgroup>, синтаксис тега <colgroup>, пример использования тега <colgroup>. Тег <colgroup> относится к группе тегов HTML таблицы.
Не забываем подписываться на RSS-ленту, twitter и на публичную страницу Вконтакте.
HTML тег <colgroup>. Описание <colgroup>
Содержание статьи:
HTML тег <colgroup> относится к тегам предназначенным для формирования HTML таблиц. Тег <colgroup> предназначен для изменения характеристик одной или сразу нескольких колонок HTML таблиц. При помощи тега <colgroup> можно изменять ширину колонки, горизонтальное и вертикальное выравнивание, изменить сдвиг содержимого ячейки таблицы.
Как и в случае с тегом <col>, наличие тега <colgroup> говорит браузеру о том, чтобы он начинал отображать содержимое таблицы до того, как таблица будет полностью загружена. Тег <colgroup> был введен в HTML для того, чтобы уменьшить код, формирующий HTML таблицы.
Тег <colgroup> можно использовать как контейнер для тега <col>. Из названия тега <colgroup> следует, что он предназначен для объединения колонок таблицы в группы и выделения этих групп.
Тег <colgroup>. Синтаксис тега <colgroup>.
Тег <colgroup> является тегом, у которого закрывающий тег ставится опционально, то есть, вы можете писать закрывающий тег, а можете не писать его. Обычно закрывающий тег не пишется и тег <colgroup> используется как одиночный тег, но если вы используете элемент <colgroup>, как контейнер для элементов <colgroup>, то закрывающий тег следует написать.
<table> <colgroup width=”500”> <tr> <td></td> </tr> </table>
<table>
<colgroup width=”500”>
<tr>
<td></td>
</tr>
</table> |
Тег <colgroup>. Атрибуты тега <colgroup>.
Тег <colgroup> из группы HTML таблиц, имеет атрибуты событий и универсальные HTML атрибуты. Для тега <colgroup> доступны уникальные HTML атрибуты:
- align – атрибут align задает горизонтальное выравнивание содержимого колонки(по центру, по краю и т.д.)
- width – атрибут width задает ширину колонки
- span – при помощи атрибута span задается число колонок, к которым будет применены характеристики
- char – в значение атрибута char указывается символ, по которому будут выровнено содержимое колонки
- charoff – атрибут charoff принимает любое целое отрицательное или положительное число и смещает содержимое ячейки влево или вправо на заданное число символов
- valign – атрибут valign выравнивает содержимое колонки по вертикали
Теги для создания таблицы HTML
В языке HTML имеется целая группа тегов предназначенных для формирования HTML таблиц.
Теги формирующие таблицы HTML:
Тег <colgroup>. Пример использования тега <colgroup>.
<!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>Таблица HTML</title> <link rel=»stylesheet» href=»style.css» type=»text/css» > </head> <body> <table border=»1″ rules=»groups»> <caption>Заголовок HTML таблицы</caption> <colgroup> <colgroup align=»center»> </colgroup> <tr> <td> </td><td>1 курс</td><td>2 курс</td><td>3 курс</td> <td>4 курс</td><td>5 курс</td> </tr> <tr> <td>Иванов</td><td>хор</td><td>отл</td><td>удвл</td><td>хор</td> <td>хор</td> </tr> <tr> <td>Петров</td><td>неуд</td> <td>хор</td><td>удвл</td><td>отл</td> <td>хор</td> </tr> <tr> <td>Сидоров</td><td>хор</td><td>хор</td><td>хор</td><td>отл</td> <td>отл</td> </tr> </table> </table> </body> </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!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>Таблица HTML</title> <link rel=»stylesheet» href=»style.css» type=»text/css» > </head> <body> <table border=»1″ rules=»groups»> <caption>Заголовок HTML таблицы</caption>
<colgroup> <colgroup align=»center»> </colgroup> <tr> <td> </td><td>1 курс</td><td>2 курс</td><td>3 курс</td> <td>4 курс</td><td>5 курс</td> </tr> <tr> <td>Иванов</td><td>хор</td><td>отл</td><td>удвл</td><td>хор</td> <td>хор</td> </tr> <tr> <td>Петров</td><td>неуд</td> <td>хор</td><td>удвл</td><td>отл</td> <td>хор</td> </tr> <tr> <td>Сидоров</td><td>хор</td><td>хор</td><td>хор</td><td>отл</td> <td>отл</td> </tr> </table> </table> </body>
</html> |
Если вы скопируете пример в текстовый редактор(рекомендую Notepad++, бесплатный редактор с подсветкой синтаксиса), а затем запустите его в браузере, то увидите:
На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru
HTML-теги colgroup и col.
Сегодня подведем итоги того, о чем мы поговорили в разделе, посвященном таблицам.
Но для начала коротко вспомним, о чем говорили в прошлом видео. А говорили мы о разделении таблицы на части, с помощью HTML-тегов <thead>
, <tbody>
и <tfoot>
. Кроме этого, в прошлом видео уроке мы познакомились с еще одним тегом — <th>
, который создает, так называемые, заголовочные ячейки в таблице. Ранее мы знакомились с HTML-тегом <td>, который создает ячейки в таблице. Тег <th>
предназначен для выполнения таких же задач и обладает такими же параметрами. Отличие его только в том, что он выделяет текст внутри ячеек жирным начертанием.
В этом видео уроке мы познакомимся с двумя последними тегами из раздела таблиц, это <colgroup>
и <col>
. Сразу хочу оговориться, что данные элементы не особо популярны и могут использоваться довольно редко. Однако в спецификации они существуют, и не являются устаревшими. А значит, мы должны знать, для чего они нужны. Оба тега довольно похожи друг на друга в использовании и выполняют одну и ту же задачу. Отличие только в том, что тег <colgroup>
является парным тегом (что это значит?), а <col>
является одиночным тегом, и соответственно они прописываются в документе по-разному.
HTML-теги colgroup и col.
Теперь немного поговорим об их предназначении. Данные HTML-теги могут быть использованы для указания ширины и других характеристик одной или нескольких колонок таблицы. То есть, если мы хотим сделать ширину двух колонок одинаковой, мы будем использовать один из этих тегов. При этом если колонок больше двух, остальные колонки не будут затронуты.
Теги <colgroup>
и <col>
имеют довольно стандартный набор HTML-атрибутов, которые мы можем применить. Здесь стоит отметить, что существую два основных атрибута, которые мы можем использовать. Атрибут span
, с помощью которого мы можем указать количество колонок, для которых будут указаны последующие параметры. Кроме атрибута span
, мы можем использовать атрибут ширины (width
), в котором необходимо указать количество пикселей. Также здесь стоит отметить, что универсальные атрибуты для этих тегов применять нельзя.
Самое главное, что следует учесть при использовании данных элементов — они должны быть указаны в документе до тегов <tr>
и <td>
. Это следует всегда помнить и учитывать. В противном случае HTML-документ просто не пройдет валидацию, о которой, кстати, мы уже скоро тоже будем говорить.
Ну и по уже сложившейся традиции, представлю небольшой пример использования тега <colgroup>
:
Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
---|---|---|
Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
Ячейка 3-1 | Ячейка 3-2 | Ячейка 3-3 |
В этом примере мы указали, что две колонки (span
) будут равны ширине (width
) 333 пикселя, а остальные останутся не тронутыми и будут использовать параметр ширины по умолчанию.
Видео урок: HTML-теги colgroup и col.
HTML-справочник и другие материалы можно и нужно скачать здесь!
В следующем видео уроке мы познакомимся со скриптами в HTML.
Тег | htmlbook.ru
Internet Explorer | Хром | Opera | Safari | Firefox | Android | iOS |
6.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4,01 | 5,0 | XHTML: | 1,0 | 1,1 |
Описание
Тег для задания ширины и стиля или нескольких колонок таблицы. Этот тег позволяет уменьшить код таблицы за счет сокращения повторяющихся атрибутов, и при наличии этого тега браузер начинает показывать таблицу, не дожидаясь ее полной загрузки. Тег можно использовать в комбинации с тегом , определяет который характеристики одной или нескольких колонок.
Обычно закрывающий тег не требуется, но если выступает как контейнер для элементов , тогда следует добавить тег в конце группы.
Разница между свойствами тегов и не очень велика и следующий в следующем. позволяет объединить колонки в выступ группы, также при добавлении атрибута rules = "groups" к тегу
браузер будет рисовать линию только между колонками, созданными с помощью .В остальных случаях поведение колонок назначенных через элементы и идентично.Синтаксис
HTML | |
... |
<таблица>
...
Атрибуты
- выровнять
- Устанавливает выравнивание содержимого колонки по краю.
- символ
- Выравнивает содержимое колонки по заданному символу.
- чарофф
- Сдвигает содержимое ячейки относительно заданного символа.
- пролет
- Количество колонок, к которым следует использовать атрибуты.
- valign
- Задает вертикальное выравнивание содержимого колонки.
- ширина
- Ширина колонок.
Закрывающий тег
Не обязателен.
Пример
HTML5IECrOpSaFx
Тег COLGROUP
1995 1996 1997
1998 1999 2000 2001
2002 2003
Нефть 5 7 2 8
3 34 62 74 57
Золото 3 6 4 6
4 69 72 56 47
Дерево 5 8 3 4
7 73 79 34 86
Результат данного примера показан на рис.1. Браузеры Chrome и Safari не атрибуты align.
Рис. 1. Вид таблицы при использовании тега
.HTML группа колонок таблицы
Тег определяет группу из одной или нескольких колонок HTML Тег таблицы. Используется в HTML таблицах определенным тегом
.Тег
позволяет определить стили сразу для группы колонок, вместо определения стилей для каждой ячейки или ряда, тем самым позволяя уменьшить объем таблицы таблицы.HTML тег
должен располагаться внутри тегаЕсли вам нужно установить стили колонок, вы также можете использовать тег
.Теги
можно также использовать внутри, что позволяет задать стили для отдельных колонок в группе.Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.
Синтаксис
Вариант 1.
без вложенных тегов:
Атрибут span задает количество колонок в группе. Если атрибут span не задан, то считается, что его значение равно единице.
Вариант 2.
с вложенными тегами:
вложенные теги col
Отображение в браузере
Ячейка 1 | Ячейка 2 | Ячейка 3 | Ячейка 4 |
Ячейка 5 | Ячейка 6 | Ячейка 7 | Ячейка 8 |
Ячейка 9 | Ячейка 10 | Ячейка 11 | Ячейка 12 |
Пример использования в HTML-коде
Таблица с colgroup
< td> Ячейка 8
Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Ячейка 5 Ячейка 6 Ячейка 7 Ячейка 9 Ячейка 10 Ячейка 11 Ячейка 12
Разница между тегами и
Тег позволяет использовать вложенные теги для определения стилей части колонок из группы.
При использовании колонки таблицы будут объединены в группы, что при использовании атрибута rules = "groups" тега
в HTML 4.01 даст возможность выводить только границы групп.браузеров Поддержка
Атрибуты
Атрибут | Значения | Описание |
---|---|---|
пролет | число | Количество колонок, которые будут объединены в группу.Используется, если |
Устаревшие атрибуты | ||
выровнять | слева справа по центру по ширине | Задает правило выравнивания содержимого группы колонок по горизонтали. В HTML5 використовуйте CSS. |
valign | верхний средний нижний базовый | Задает правило выравнивания содержимого группы колонок по вертикали.В HTML5 використовуйте CSS. |
ширина | пикселей проценты | Ширина группы колонок. В HTML5 використовуйте CSS. |
Тег | HTML-справочник
basicweb.ru- HTML
- Учебник HTML
- Справочник тегов
- Атрибуты событий
- Глобальные атрибуты
- Коды языков
- Мнемоники
- Цвета
- Тесты знаний
- CSS
- Учебник CSS
- Справочник свойств
- Селекторы
- Обязательства
- Правила
- Flexbox генератор
- Сетевой генератор
- Учебник МЕНЬШЕ
- JavaScript
- Интерфейсы веб API
- Объект Массив
- Дата размещения
- Объект Функция
- Объект Global
- Объект JSON
- Объект Математика
- Номер объекта
- Объект Объект
- Объект RegExp
- Обещание объекта
- Строка объекта
- jQuery
- Селекторы
- События
- Методы ДОМ
- Перераз
- Утилиты
- Эффекты
- AJAX
- Объект Обратные звонки
- Объект отложен
HTML
- HTML учебник
- Справочник тегов
- Атрибуты событий
- Глобальные атрибуты
- Мнемоники
- Коды языков
- HTML цвета
- Тесты знаний
CSS
- Учебник CSS
- Справочник свойств
- CSS селекторы
- CSS функции
- Правила CSS
- Flexbox генератор
- Сетевой генератор
- МЕНЬШЕ учебник
JavaScript
- Интерфейсы веб API
- Объект Массив
| HTML | WebReference
Элемент (от англ. группа столбцов - группа колонок) для установки ширины и стиля одной или нескольких колонок таблицы. Этот элемент позволяет уменьшить количество таблиц за счёт сокращения вызывающих атрибутов, и при его наличии браузер начинает показывать содержимое таблицы, не дожидаясь её полной загрузки. Элемент можно использовать в комбинации с, определяя характеристики одной или нескольких колонок.
Обычно закрывающий тег не требуется, но если выступает как контейнер для элементов, тогда следует добавить тег в конце группы.
Разница между свойствами и не очень велика в следующем в следующем. позволяет объединить колонки в определенных группах, а также при добавлении правил атрибута со значениями групп к элементу <таблица> браузер будет рисовать линию только между колонками, созданными с помощью.В остальных случаях поведение колонок назначенных через элементы и идентично.
Для допустимо использовать следующие стилевые свойства: граница, фон, ширина, видимость. Остальные свойства не осуществляют никакого эффекта на элемент.
Синтаксис
<таблица>
...
Закрывающий тег
Не обязателен.
Атрибуты
- align
- Устанавливает выравнивание содержимого колонки по краю.
- char
- Выравнивает содержимое колонки по заданному символу.
- charoff
- Сдвигает емкость относительно заданного символа.
- пролет
- Количество колонок, к которым следует использовать атрибуты.
- valign
- Задает вертикальное выравнивание содержимого колонки.
- ширина
- Ширина колонок.
Пример
1995 | 1996 | 1997 | 1998 | 1999 | 2000 | 2001 | 2002 | 2003 | |
Нефть | 5 | 7 | 2 | 8 | 3 | 34 | 62 | 74 | 57 |
Золото | 3 | 6 | 4 | 6 | 4 | 69 | 72 | 56 | 47 |
Дерево | 5 | 8 | 3 | 4 | 7 | 73 | 79 | 34 | 86 |
Результат данного примера на рис.1.
Рис. 1. Вид таблицы при использовании
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Рекомендация (Рекомендация) - спецификация одобрена W3C и рекомендована как стандарт.
- Кандидат в рекомендацию (отвечающая за стандарт, удовлетворена) группа разработчиков, соответствующая своим целям, но требуется помощь сообщества разработчиков по реализации стандартов.
- Предлагаемая рекомендация (Предлагаемая рекомендация) - на этом этапе представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Рабочий проект (Рабочий проект) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Черновик редакции (Редакторский черновик) - черновая версия стандарта после внесения правок редакторами проекта.
- Черновик (Черновик спецификации) - первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) - он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры
В таблице браузеров используются следующие обозначения.
- - элемент полностью поддерживаемый браузером;
- - элемент браузером не воспринимается и игнорируется;
- - при возможном появлении различных ошибок, либо элемент связанных с условиями.
Число указывает браузреа, начиная с которой устанавливается элемент.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.10.2018
Редакторы: Влад Мержевич
.