Тег HTML группа колонок таблицы
Тег позволяет определить стили сразу для группы колонок, вместо определения стилей для каждой ячейки или ряда, тем самым позволяя уменьшить объем кода таблицы.
Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.
Синтаксис
Вариант 1. без вложенных тегов :
Атрибут span задает количество колонок в группе. Если атрибут span не задан, считается, что его значение равно единице.
Вариант 2. с вложенными тегами :
Отображение в браузере
| Ячейка 1 | Ячейка 2 | Ячейка 3 | Ячейка 4 |
| Ячейка 5 | Ячейка 6 | Ячейка 7 | Ячейка 8 |
| Ячейка 9 | Ячейка 10 | Ячейка 11 | Ячейка 12 |
Пример использования в HTML коде
Разница между тегами и
Тег позволяет использовать вложенные теги для определения стилей части колонок из группы.
При использовании колонки таблицы будут объединены в группы, что при использовании атрибута rules=»groups» тега в HTML 4.01 даст возможность выводить только границы групп.
: The Table Column Group element
The HTML element defines a group of columns within a table.
Attributes
This element’s attributes include the global attributes.
This attribute is applied on the attributes of the column group, it has no effect on the CSS styling rules associated with it or, even more, to the cells of the column’s members of the group.
Deprecated attributes
The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.
This enumerated attribute specifies how horizontal alignment of each column cell content will be handled. Possible values are:
If this attribute is not set, the left value is assumed. The descendant elements may override this value using their own align attribute.
Note: Do not try to set the text-align property on a selector giving a element. Because elements are not descendant of the element, they won’t inherit it.
If the table doesn’t use a colspan attribute, use one td:nth-child(an+b) CSS selector per column, where a is the total number of the columns in the table and b is the ordinal position of this column in the table. Only after this selector the text-align property can be used.
The background color of the table. It is a 6-digit hexadecimal RGB code, prefixed by a ‘ # ‘. One of the predefined color kewords can also be used.
To achieve a similar effect, use the CSS background-color property.
This attribute is used to indicate the number of characters to offset the column data from the alignment character specified by the char attribute.
This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are:
Note: Do not try to set the vertical-align property on a selector giving a element. Because elements are not descendant of the element, they won’t inherit it.
If the table doesn’t use a colspan attribute, use the td:nth-child(an+b) CSS selector per column, where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the vertical-align property can be used.
Тег COLGROUP
| Браузер |  Internet Explorer |  Netтscape |  Опера |  Safari |  Mozilla Firefox | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Версия | 5.5 | 6.0 | 7.0 | 8.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.2 | 9.5 | 1.3 | 2.0 | 3.1 | 1.5 | 2.0 | 3.0 |
| Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да |
| ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Описание
Синтаксис
Параметры
Закрывающий тег
Пример 1. Использование тега
ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Результат данного примера показан ни рис. 1.
Рис. 1. Вид таблицы при использовании тега
Описание параметров тега COLGROUP
Параметр ALIGN
Описание
Задает выравнивание содержимого колонок по горизонтали. Этот параметр действует на все ячейки в колонке, в том числе и на заголовки таблицы, которые определяются тегом
Синтаксис
Аргументы
Значение по умолчанию
Аналог CSS (ЦСС)
Пример 2. Выравнивание в колонках
ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Параметр SPAN
Описание
Определяет число колонок, к которым будут применяться заданные параметры. Если этот атрибут отсутствует, то тег работает для одной колонки. Допускается применять параметр span к нескольким колонкам и таким образом формировать группы колонок с одинаковыми характеристиками.
Синтаксис
Аргументы
Целое положительное значение.
Значение по умолчанию
Пример 3. Использование параметра span
ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Параметр VALIGN
Описание
Устанавливает вертикальное выравнивание содержимого колонки. По умолчанию контент ячеек в колонке располагается по центру вертикали.
Синтаксис
Аргументы
Значение по умолчанию
Пример 4. Выравнивание в колонке
ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Результат данного примера показан ни рис. 2.
Рис. 2. Выравнивание контента в правой колонке по верхнему краю таблицы
Параметр WIDTH
Описание
Задает ширину колонки. Если общая ширина содержимого превышает указанную ширину, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования контента. В случае, когда это невозможно, например, в колонке находятся Имаги, параметр width будет проигнорирован, и новая ширина колонки будет вычислена на основе ее содержимого.
Синтаксис
Аргументы
Обычно применяется любое целое значение в пикселах или процентах от доступного пространства. Альтернативный вариант основан на использовании символа *, который обозначает всю доступную ширину. Допустимо использовать кратные значения, например 3*. Например, если для таблицы установлена ширина 804 пиксела, а для колонок — 1*, 2*, 3*, то в пикселах это будет соответственно 134, 268 и 402. При использовании подобных единиц браузеру требуется загрузить таблицу целиком, чтобы вычислить необходимую ширину ячеек, что приводит к задержке вывода больших таблиц.
Значение по умолчанию
Ширина вычисляется на основе содержимого ячейки.
Аналог CSS (ЦСС)
Пример 5. Ширина колонок таблицы
ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Ширина первой колонки в данном примере будет в два раза больше остальных колонок таблицы.
HTML тег colgroup
Тег определяет группу из одного или более столбцов таблицы для форматирования.
Элемент полезно использовать для определения стилей для столбцов таблицы целиком вместо того, чтобы назначать стили для каждой ячейки по отдельности.
Элемент должен использоваться внутри элемента сразу после элемента перед элементами , , и .
Разница между HTML 4.01 и HTML5
В HTML5 большинство атрибутов не поддерживаются.
Атрибуты тега
| Атрибут | Описание |
|---|---|
| align | Определяет горизонтальное выравнивание содержимого элемента |
| char | Определяет символ выравнивания связанного с элементом содержимого |
| charoff | Определяет количество символов смещения |
| span | Определяет количество колонок, на которые влияет элемент |
| valign | Определяет вертикальное выравнивание содержимого группы колонок |
| width | Определяет ширину группы колонок |
Общие атрибуты
CSS стили по умолчанию
Большинство браузеров будут отображать тег со следующими стилями
HTML пример использования
Устанавливаем фоновый цвет трех колонок таблицы при помощи тегов и :
Как правильно верстать HTML-таблицы
Учимся верстать таблицы так, чтобы их верно понимали браузеры, поисковики и люди с ограниченными возможностями.
Из этой статьи вы узнаете, как верстать таблицы с учётом не только синтаксиса, но и семантики — то есть обозначать нужные части таблицы тегами, которые отражают их содержание.
Знакомство с семантической вёрсткой
Семантический подход к вёрстке подразумевает использование HTML-тегов в соответствии с их семантикой (предназначением), а его суть заключается в верности выбора тегов и их взаимного расположения.
Семантические теги передают смысл (или обозначают важность) содержащегося в них контента.
Семантический подход — противоположность визуальному, при котором важно только то, как HTML-страница выглядит.
Почему семантика так важна
Она повышает доступность контента. Тогда его лучше понимают:
Семантически верно размеченный контент может выглядеть абсолютно так же, как и свёрстанный без учёта семантики. Это касается любых элементов на HTML-странице.
Так, можно использовать для всех них тег
Для оформления страниц при семантической вёрстке применяют каскадные таблицы стилей (CSS).
Рассмотрим, какие теги отвечают за вёрстку таблиц, когда и зачем нужен каждый.
Frontend-разработчик, программист, дизайнер. Три года в разработке сайтов и приложений, около девяти — в дизайне. Был графдизайнером в языковой школе ILS и разработчиком в IT-компании IVIT. Сейчас преподаёт в Skillbox.
Строки и ячейки таблицы
Каждая таблица состоит из строк и ячеек, а задаётся тегом — это контейнер для остальных тегов таблицы.
Тег образует контейнер для создания строки таблицы. Каждая ячейка в такой строке устанавливается с помощью тега (хотя первая может быть задана и тегом ).
Важно понимать. Дочерними элементами строки могут быть только ячейки (и заголовочная ячейка ). А сама строка дочерним элементом ячейки быть не может. Это ограничивает возможную вложенность тегов.
Мы видим три строки (элементы ). В каждой из строк по три ячейки ( ). Представим это HTML-кодом:
Объединение ячеек
Ячейки можно объединять (растягивать по горизонтали и вертикали) с помощью специальных атрибутов. При этом поглощаемые ячейки задавать своими тегами уже не придётся.
И тут важно не запутаться:
Атрибут colspan тегов и объединяет ячейки по горизонтали (то есть ячейки одной строки). Значение colspan указывает, сколько столбцов пересекает ячейка.
Атрибут rowspan тегов и объединяет ячейки по вертикали (то есть ячейки разных строк). Значение rowspan задаёт, через сколько строк проходит ячейка.
Рассмотрим пару примеров:
Вторая ячейка первой строки пересекает два столбца. То есть она растянулась по горизонтали и приняла в себя третью ячейку первой строки. Третья ячейка второй строки пересекает две строки, то есть растянулась по вертикали, заняв и третью ячейку третьей строки.
Поэтому третьи ячейки для первой и третьей строк задавать не нужно. Они уже поглощены другими. Теперь к коду:
Как такое сверстать:
Здесь вторая ячейка второй строки занимает два столбца и две строки. Обратите внимание, что во второй строке нет третьей ячейки и в третьей строке нет второй и третьей ячеек. Теперь места этих ячеек занимает вторая ячейка второй строки.
Заголовок таблицы
Этот тег следует включать в любую таблицу. Где бы вы его ни разместили, его содержимое будет выведено перед таблицей. Изменить это можно с помощью свойства caption-side (значение top — для вывода до таблицы, и bottom — после).
Тег по умолчанию выравнивает своё содержимое по центру. Чтобы установить выравнивание по левому или правому краю, достаточно поменять значение свойства text-align.
Зачем нужен заголовок?
Примечание. Если дизайнер не предусмотрел заголовок таблицы, то хороший разработчик придумает его, добавит в разметку и скроет через CSS. Это повысит доступность контента.
Даже скрытый заголовок всё равно доступен при навигации по странице с помощью клавиатуры. И речевой браузер для людей с ограниченными возможностями тоже понимает тег — читая текст в этом теге, он меняет интонацию, темп речи, повышает громкость голоса и тому подобное.
Структура таблиц
Согласно стандарту HTML5, в таблице может быть только по одной секции thead и tfoot, а вот tbody — несколько.
Эти элементы полезны не только для доступности, но и для стилизации (как логичные точки добавления CSS к таблице).
Шапка таблицы
Этим тегом задают заголовочную секцию таблицы. Чаще всего речь идёт о первой строке — содержащей заголовки столбцов.
Браузер и поисковики считают эту часть заголовочным колонтитулом таблицы. Например, при печати колонтитулы таблицы будут на каждой напечатанной странице — и благодаря такой шапке вы не забудете, что значат данные каждого столбца.
Заголовки столбцов и строк. Тег
Тег задаёт особые ячейки, с которых начинаются строки или столбцы. В такой ячейке обычно хранится атрибут для всех данных строки или столбца.
Как мы и говорили выше, к содержимому таких ячеек применяется определённый стиль: по умолчанию это выделение жирным шрифтом и выравнивание по центру ячейки.
Благодаря заголовочным ячейкам таблица выглядит лучше, а искать данные в ней становится проще.
Важно. Не применяйте для визуального форматирования — только для выделения ячейки-заголовка. Этот принцип касается всех элементов разметки, которые обладают семантикой.
Тег даёт ещё одно преимущество: вместе с атрибутом scope он связывает каждый заголовок со всеми данными строки или столбца. То есть добавляет к интуитивной, визуально считываемой связи такую, которую понимают и программы.
К тегу и атрибуту scope мы вернёмся ближе к концу статьи, где подробнее поговорим о доступности таблиц для пользователей с ограниченными возможностями.
Тело таблицы
Секция содержит основную часть информации и группирует главные части таблицы. То есть можно использовать сколько угодно раз, чтобы разбивать основной контент таблицы на части, данные которых связаны общей логикой.
Тег семантически важен: браузер, поисковые роботы и помощники для людей с ограниченными возможностями благодаря ему понимают, где находится основное содержимое таблицы.
| Месяц | Дни недели | Оплата(тыс. р.) |
|---|---|---|
| Январь | Понедельник | 50 |
| Вторник | 40 | |
| Среда | 35 | |
| Четверг | 40 | |
| Пятница | 15 | |
| Суббота | 60 | |
| Воскресенье | 30 | |
| Февраль | Понедельник | 20 |
| Вторник | 25 | |
| Среда | 15 | |
| Четверг | 70 | |
| Пятница | 77 | |
| Суббота | 63 | |
| Воскресенье | 30 |
Данные основной части таблицы надо сгруппировать по смыслу. У нас сначала идёт январь, затем февраль. Значит, для данных каждого месяца логично использовать свой :
Подвал таблицы
Секция используется для группировки содержимого нижней части таблицы.
Семантически это итог таблицы (например, результат подсчёта сумм по столбцам).
| Нечётное | Чётное |
|---|---|
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
| Вы узнали, что такое чётные и нечётные числа | |
Важно помнить!
Теги и нужны не всегда. Бывают таблицы без шапки и подвала.
К тому же браузер всё равно подставит этот тег сам, а всегда полагаться на браузеры — значит оставить место для возможных ошибок.
| 1 | Мавзалеев И. В. | 10.09.1992 |
| 2 | Киреева А. Ю. | 02.05.1996 |
| 3 | Корнеев И. Ю. | 09.10.1990 |
| 4 | Тресков В. А. | 25.03.1993 |
| 5 | Ибрагимов А. Е. | 15.10.1994 |
| 6 | Борисенко Д. С. | 10.10.1991 |
Теги и
C помощью тега удобно стилизовать столбцы таблицы через CSS (не приходится писать классы для каждой ячейки в разных строках). Это крутая фишка для любого разработчика.
Для группировки тегов применяют специальный тег :
позволяет задать стиль сразу для группы столбцов, а тег внутри — переопределить его для отдельных столбцов в группе.
Атрибут span
У тега есть атрибут span, который распространяет стиль на несколько столбцов.
Первый тег — это первый столбец, а второй тег — второй, но из-за атрибута span, в котором мы указали значение «2», его стиль распространяется и на третий.
Атрибут scope тега
Когда таблица хорошо структурирована, достаточно беглого взгляда, чтобы понять, какие где данные: мигом возникают визуальные ассоциации между основной информацией в таблице и заголовками её колонок и/или строк.
Но что, если наши пользователи не могут провести такую визуальную параллель. Например, они слабовидящие. Как им прочитать сложную таблицу?
Люди с ослабленным зрением часто применяют скринридеры — программы, которые читают для них веб-страницы. С обычным текстом скринридер справляется хорошо, но интерпретировать сложную таблицу для него проблема.
Поэтому разработчики должны позаботиться об этом и дополнить визуальные ассоциации в таблице программными, которые скринридер сможет понять.
Чаще всего это делают с помощью тега и атрибута scope, который сообщает скринридеру, какие ячейки точно являются заголовками — например, заголовок строки, в которой программа находится, или же заголовок столбца.
Благодаря им все пользователи могут интерпретировать таблицу так же, как и зрячие люди.
Вернёмся к нашей таблице чётности чисел:
| Нечётное | Чётное |
|---|---|
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
| Вы узнали, что такое чётные и нечётные числа | |
Чтобы однозначно указать заголовки столбцов, делаем вот так:
И у каждой строки тоже можно определить заголовок (если в таблице есть не только заголовки столбцов). Слегка изменим для этого наш пример:
| Пара № | Нечётное | Чётное |
|---|---|---|
| 1 | 1 | 2 |
| 2 | 3 | 4 |
| 3 | 5 | 6 |
| Вы узнали, что такое чётные и нечётные числа | ||
Скринридер распознаёт такую семантическую разметку и позволяет пользователям прочесть весь столбец или строку целиком.
У атрибута scope есть ещё два значения — colgroup и rowgroup. Они используются для таблиц с двумя и более уровнями заголовков (заголовки, которые группируют подзаголовки).
Так заголовок верхнего уровня получает scope=»colgroup», а у его подзаголовков scope=»col», и аналогично для строк.
Подытожим
Заботьтесь обо всех пользователях — верстайте таблицы семантически верно.
Сокращение от англ. table row — строка таблицы.
Сокращение от англ. table data — значение (ячейки) в таблице.
Сокращение от англ. table header — заголовок таблицы (ячейка).
Производное от английских слов column («столбец, колонка») и span («размах, объединять, охватывать, перекрывать»).
Производное от английских слов row («ряд, строка») и span («размах, охватывать, объединять, перекрывать»).
