Товаров: 0 (0р.)

Colgroup html: Тег | htmlbook.ru

Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+1.0+6.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

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

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

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

Синтаксис

HTML
<table>
  <colgroup атрибуты>
  <tr>
   <td>...</td>
  </tr>
</table>
XHTML
<table>
  <colgroup атрибуты />
  <tr>
   <td>...</td>
  </tr>
</table>

Атрибуты

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>&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. Браузеры 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>&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.

Рис. 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выраванивание содержимого столбца
  • 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> и <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.


Атрибуты

АтрибутЗначениеОписание
alignleft
right
center
justify
char
Не поддерживается в HTML5.
Выравнивает содержимое в группе столбцов
charcharacterНе поддерживается в HTML5.
Выравнивает содержимое в группе столбцов по символу
charoffnumberНе поддерживается в HTML5.
Задает число знаков, содержимое будет выровнено по символу, заданный атрибутом char
spannumberЗадает количество столбцов, которые должны охватывать группа столбцов
valigntop
middle
bottom
baseline
Не поддерживается в HTML5.
Вертикальное выравнивание содержимого в группе столбцов
widthpixels
%
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>&nbsp;</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>&nbsp;</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> предназначен для выполнения таких же задач и обладает такими же параметрами. Отличие его только в том, что он выделяет текст внутри ячеек жирным начертанием.

HTML-теги colgroup и col.

В этом видео уроке мы познакомимся с двумя последними тегами из раздела таблиц, это <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
  <таблица>
  
...
XHTML
  <таблица>
  
  
    ... 
  
  

Атрибуты

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

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

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

Пример

HTML5IECrOpSaFx

  

 
  
   Тег COLGROUP 
 


 
 19951996 1997 199819992000 2001 2002 2003
Нефть572 8 3346274 57
Золото 3 64 6 4697256 47
Дерево583 4 7737934 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
Задает вертикальное выравнивание содержимого колонки.
ширина
Ширина колонок.

Пример

COLGROUP
 19951996 1997199819992000 20012002 2003
Нефть572 83346274 57
Золото 364 64697256 47
Дерево583 47737934 86

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

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

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

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

  • Рекомендация (Рекомендация) - спецификация одобрена W3C и рекомендована как стандарт.
  • Кандидат в рекомендацию (отвечающая за стандарт, удовлетворена) группа разработчиков, соответствующая своим целям, но требуется помощь сообщества разработчиков по реализации стандартов.
  • Предлагаемая рекомендация (Предлагаемая рекомендация) - на этом этапе представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Рабочий проект (Рабочий проект) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Черновик редакции (Редакторский черновик) - черновая версия стандарта после внесения правок редакторами проекта.
  • Черновик (Черновик спецификации) - первая черновая версия стандарта.

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

Браузеры

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

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

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

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

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

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

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

.

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

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