Тег HTML группа колонок таблицы
Тег определяет группу из одной или нескольких колонок HTML таблицы. Используется в HTML таблицах определенных тегом .
Тег позволяет определить стили сразу для группы колонок, вместо определения стилей для каждой ячейки или ряда, тем самым позволяя уменьшить объем кода таблицы.
Если вам нужно задать стили колонок, вы также можете использовать тег .
Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.
Синтаксис
Вариант 1. без вложенных тегов :
Атрибут span задает количество колонок в группе. Если атрибут span не задан, считается, что его значение равно единице.
Вариант 2. с вложенными тегами :
вложенные теги col Отображение в браузере
| Ячейка 1 | Ячейка 2 | Ячейка 3 | Ячейка 4 |
| Ячейка 5 | Ячейка 6 | Ячейка 7 | Ячейка 8 |
| Ячейка 9 | Ячейка 10 | Ячейка 11 | Ячейка 12 |
Пример использования в HTML коде
Таблица с colgroup
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
Ячейка 5
Ячейка 6
Ячейка 7
Ячейка 8
Ячейка 9
Ячейка 10
Ячейка 11
Ячейка 12 Разница между тегами и
При использовании колонки таблицы будут объединены в группы, что при использовании атрибута rules=»groups» тега в HTML 4.01 даст возможность выводить только границы групп.
Поддержка браузерами
| Тег |  |
 |
 |
 |
 |
| Да | Да | Да | Да | Да |
Атрибуты
| Атрибут | Значения | Описание |
|---|---|---|
| span | число | Количество колонок, которые будут объединены в группу. Используется, если задан без вложенных тегов . |
| Устаревшие атрибуты | ||
| align | left right center justify |
Задает правило выравнивания содержимого группы колонок по горизонтали. В HTML5 используйте CSS. |
| valign | top middle bottom baseline |
Задает правило выравнивания содержимого группы колонок по вертикали. В HTML5 используйте CSS. |
| width | пиксели проценты |
Ширина группы колонок. В HTML5 используйте CSS. |
HTML тег
Тег задает группу столбцов внутри таблицы с общими свойствами. Тег может включать в себя несколько элементов , которые определяют свойства столбцов.
Синтаксис
Тег
обязателен.
В одну HTML таблицу можно включать несколько тегов .
Пример
html> html> head> title>Заголовок документа title> style> table,th,td < border:1px solid black; > style> head> body> table> colgroup> col span="2" style="background-color:#EDEDED; width: 150px;"> col style="background-color:#50F740; width: 50px;"> colgroup> tr> th>Имя th> th>Пол th> th>Возраст th> tr> tr> td>Мэри Николсон td> td>женский td> td>19 td> tr> tr> td>Джон Джонсон td> td>мужской td> td>23 td> tr> table> body> html>Результат
Атрибуты тега
| Атрибут | Значение | Описание |
|---|---|---|
| align | Устанавливает выравнивание содержимого колонки. Не поддерживается в HTML5. |
|
| left | Выравнивает по левому краю. | |
| right | Выравнивает по правому краю. | |
| center | Выравнивает по центру. | |
| justify | Выравнивает по правому и левому краю. | |
| char | Выравнивает по специальному символу с минимальным смещением, которые определены атрибутами char и charoff. | |
| char | character | Выравнивает содержимое колонки по заданному символу. Используется только если атрибут align = «char». Не поддерживается в HTML5. |
| charoff | number | Сдвигает содержимое ячейки относительно заданного символа, указанного как значение атрибута вправо (положительные значения) или влево (отрицательные значения). Используется только если атрибут align = «char». Не поддерживается в HTML5. |
| span | number | Устанавливает количество столбцов, характеристики которых определяет элемент . Число должно быть целым положительным. Если параметр не задан, то по умолчанию значение будет 1. . |
| valign | Выравнивает содержимое по вертикали. Не поддерживается в HTML5. | |
| top | Выравнивает по верхнему краю строки. | |
| bottom | Выравнивает по нижнему краю. | |
| middle | Выравнивает по середине. | |
| baseline | Выравнивает по базовой линии. | |
| width | % pixels relative_length |
Устанавливает ширину колонки. Не поддерживается в HTML5. |
Colgroup html что это
Тег (от англ. group of columns — группа колонок) предназначен для задания ширины и стиля одной или нескольких колонок таблицы.
Этот элемент позволяет уменьшить код таблицы за счёт сокращения повторяющихся атрибутов, и при его наличии браузер начинает показывать содержимое таблицы, не дожидаясь её полной загрузки. Элемент можно использовать в комбинации с , который определяет характеристики одной или нескольких колонок.
Обычно закрывающий тег не требуется, но если
в конце группы.
Для допустимо использовать следующие стилевые свойства: border , background , width , visibility . Остальные свойства не оказывают никакого эффекта на элемент.
Демо¶
Синтаксис¶
1 2 3 4 5 6
table> colgroup> tr> td>. td> tr> table> Закрывающий тег не обязателен.
Атрибуты¶
Количество колонок, к которым следует применять атрибуты.
span¶
Определяет число колонок, к которым будут применяться заданные характеристики. Если этот атрибут отсутствует, то элемент работает для одной колонки. Допускается применять атрибут span к нескольким колонкам и таким образом формировать группы колонок с одинаковыми характеристиками.
Синтаксис
colgroup span="">colgroup> Значения
Целое положительное значение.
Значение по умолчанию
Спецификации¶
- WHATWG HTML Living Standard
- HTML5
- HTML 4.01 Specification
Описание и примеры¶
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
html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8"> title>COLGROUPtitle> head> body> table width="100%" cellpadding="2" cellspacing="0" border="1" rules="groups"> colgroup width="150"> colgroup span="9" align="center" width="50"> col span="5"> col span="4"> colgroup> tr> td> td>td>1995td>td>1996td>td>1997td> td>1998td>td>1999td>td>2000td>td>2001td> td>2002td>td>2003td> tr> tr> td>Нефтьtd>td>5td>td>7td>td>2td>td>8td> td>3td>td>34td>td>62td>td>74td>td>57td> tr> tr> td>Золотоtd>td>3td> td>6td>td>4td>td>6td> td>4td>td>69td>td>72td>td>56td>td>47td> tr> tr> td>Деревоtd>td>5td>td>8td>td>3td>td>4td> td>7td>td>73td>td>79td>td>34td>td>86td> tr> table> body> html> Colgroup html что это
Элемент (от англ. column group — группа колонок) предназначен для задания ширины и стиля одной или нескольких колонок таблицы. Этот элемент позволяет уменьшить код таблицы за счёт сокращения повторяющихся атрибутов, и при его наличии браузер начинает показывать содержимое таблицы, не дожидаясь её полной загрузки. Элемент можно использовать в комбинации с , который определяет характеристики одной или нескольких колонок.
Обычно закрывающий тег не требуется, но если
в конце группы.
Для допустимо использовать следующие стилевые свойства: border, background, width, visibility. Остальные свойства не оказывают никакого эффекта на элемент.
Синтаксис
Атрибуты
span Количество колонок, к которым следует применять параметры.
Также для этого элемента доступны универсальные атрибуты и события.
Устаревшие атрибуты
align Устанавливает выравнивание содержимого колонки по краю. bgcolor Устанавливает цвет фона группы колонок. char Выравнивает содержимое колонки по заданному символу. charoff Сдвигает содержимое ячейки относительно заданного символа. valign Задает вертикальное выравнивание содержимого колонки. width Ширина колонок. Устаревшие атрибуты
Устаревшие атрибуты — это атрибуты элементов HTML, которые были частью предыдущих версий HTML, но больше не поддерживаются в последних версиях стандарта. Использование таких атрибутов не рекомендуется, поскольку они противоречат современной идеологии HTML и могут не поддерживаться последними версиями браузеров.
Добавлять к элементам HTML устаревшие атрибуты не надо, взамен применяются стили или другие элементы HTML.
Пример
| 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. Вид таблицы при использовании
Спецификация
| Спецификация | Статус |
|---|---|
| HTML Living Standard | Живой стандарт |
| HTML 4.01 Specification | Заменённая рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 5 | 12 | 1 | 4 | 1 | 1 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.