HTML таблицы продвинутые возможности и доступность
Во второй статье этого модуля мы рассматриваем ещё несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.
Необходимые знания:
Базовый HTML (Введение в HTML).
Цель:
Изучить более продвинутые возможности HTML таблиц и их доступность.
«>» title=»Permalink to Добавление заголовка к таблице с помощью «>Добавление заголовка к таблице с помощью
Как можно понять из короткого примера выше, заголовок отражает в себе описание контента таблицы. Это полезно для всех читателей просматривающих страницу и желающих получить краткое представление от том полезна ли для них таблица, что особенно важно для слепых пользователей. Вместо того чтобы читать содержимое множества ячеек чтобы понять о чем таблица, он или она могут полагаться на заголовок и принимать решение читать ли таблицу более подробно.
Заголовок помещают сразу после тега
.
Примечание: Атрибут summary (en-US) также может быть использован в
элементе предоставляя описание — это также читается скринридерами. Однако мы рекомендуем вместо этого использовать элемент, так как summary deprecated в HTML5 спецификации и не может быть прочитан зрячими пользователями (он не отображается на странице).
Упражнение: Добавление заголовка
Давайте попробуем это, вернёмся к примеру который мы ранее встретили в прошлой статье.
Примечание: Этот пример можно найти на GitHub по ссылке timetable-caption.html (живой пример).
_ _и_ «>_ _и_» title=»Permalink to Добавление структуры с помощью, и«>Добавление структуры с помощью, и
Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отображаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.
Примечание:
всегда включён в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используетсяи посмотрите HTML код в browser developer tools — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это даёт больше контроля над структурой таблицы и стилем.
Упражнение: Добавление структуры таблицы
Давайте используем эти новые элементы.
Примечание: Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, Вступление в CSS это хорошее место для начала; у нас также есть статья конкретно о стилизации таблиц).
Ваша готовая таблица должна выглядеть примерно так:
Примечание: Этот пример можно также найти на GitHub по ссылке spending-record-finished.html (живой пример).
Вложенные таблицы
В одну таблицу вкладывать другую таблицу возможно, если вы используете полную структуру включая элемент
. Это как правило не рекомендуется, так как делает разметку более запутанной и менее доступной для пользователей скринридеров, так в большинстве случаев вы можете просто вставить дополнительные ячейки/строки/столбцы в существующую таблицу. Однако, иногда это необходимо, например, если вы хотите легко импортировать контент из других источников.
Разметка простой вложенной таблицы:
Результат которого выглядит примерно так:
title1
title2
title3
cell1
cell2
cell3
cell2
cell3
cell4
cell5
cell6
Таблицы для пользователей с ограниченными возможностями
Давайте кратко опишем как мы используем данные таблицы. Таблицы могут быть удобным инструментом, который даёт нам быстрый доступ к данным и позволяет искать разные значения. Например, быстрого взгляда на таблицу ниже достаточно, чтобы найти сколько колец было продано в Амстердаме в августе 2016. Чтобы понять эту информацию, мы проводим визуальные ассоциации между данными в этой таблице и её заголовками колонок и/или строк.
Items Sold August 2016
Clothes
Accessories
Trousers
Skirts
Dresses
Bracelets
Rings
Belgium
Antwerp
56
22
43
72
23
Gent
46
18
50
61
15
Brussels
51
27
38
69
28
The Netherlands
Amsterdam
89
34
69
85
38
Utrecht
80
12
43
36
19
Но что если вы не можете провести эти визуальные ассоциации? Как тогда вы сможете прочитать таблицу выше? Люди с ослабленным зрением часто используют скринридер, который читает им информацию с веб-страницы. Это не проблема когда вы читаете простой текст, но интерпретация таблицы может быть сложной проблемой для слепых людей. Тем не менее, вместе с правильной разметкой мы можем заменить визуальные ассоциации программными.
В этой части статьи приводятся дополнительные способы которые делают таблицы более доступными.
Использование заголовков столбцов и строк
Скринридеры будут определять все заголовки и использовать их создавая программные ассоциации между этими заголовками и ячейками к которым они относятся. Сочетание заголовков столбцов и строк будет определять и интерпретировать данные в каждой ячейке так, что пользователи скринридеров могут интерпретировать таблицу также как это делают зрячие пользователи.
Атрибут scope
И у каждой строки может быть определён заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):
Скринридер распознает разметку структурированную таким образом, что позволяют пользователям прочитать весь столбец или строку целиком.
Атрибуты id и headers
Альтернатива атрибута scope это использование атрибутов id и headers задавая ассоциации между заголовками и ячейками. Этот способ выглядит следующим образом:
Это обеспечивает явное определение позиции для каждой ячейки вашей HTML таблицы, определяет заголовки столбцов и строк таблицы. Для того чтобы это работало реально хорошо таблице нужно определить и заголовки столбцов, и заголовки строк.
Вернёмся к нашему примеру с расчётом затрат, его можно переписать следующим образом:
Примечание: Этот метод создания очень точного определения ассоциаций между заголовками и данными в ячейках, но использует гораздо больше разметки и оставляет обширное пространство для ошибок. Атрибута scope обычно достаточно для большинства таблиц.
Упражнение: играем со scope и headers
Примечание: вы можете проверить как работает последние примеры здесь items-sold-scope.html (also see this live) и items-sold-headers.html (see this live too).
Заключение
Есть ещё некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали всё что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите Styling Tables.
Учимся верстать таблицы так, чтобы их верно понимали браузеры, поисковики и люди с ограниченными возможностями.
: colette / respawn entertainment, oculus
Из этой статьи вы узнаете, как верстать таблицы с учётом не только синтаксиса, но и семантики — то есть обозначать нужные части таблицы тегами, которые отражают их содержание.
Знакомство с семантической вёрсткой
Семантический подход к вёрстке подразумевает использование 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 («размах, охватывать, объединять, перекрывать»).
The basic tag is written like this with the caption text inserted between the opening and closing tags.
The tag must be inserted immediately after the tag. A table should have no more than one caption.
Example
The following example shows the element in action. You can modify the code (on the left) and click «Refresh» to see your changes take effect (on the right).
Attributes
The tag accepts the following attributes. Try adding some to the above example to see how it affects the display/behavior of the element.
Attributes Specific to the Element
Global Attributes
The tag accepts the following global attributes. These attributes are standard across all HTML 5 tags.
Attribute
Description
accesskey
Specifies a shortcut key that can be used to access the element.
[Any string of characters. This string of characters specifies the key/s the user needs to use in order to access the element.]
autocapitalize
Specifies whether and how text input is automatically capitalized as it is entered/edited by the user.
Custom data attributes are intended to store custom data, state, annotations, and similar, private to the page or application, for which there are no more appropriate attributes or elements.
dir
Specifies the direction of the text.
Value
Description
ltr
Specifies that the text should read left to right.
rtl
Specifies that the text should read right to left.
auto
Specifies that the text direction should be determined programatically using the contents of the element.
draggable
Specifies whether the user is allowed to drag the element or not.
Value
Description
true
Specifies that the element is draggable.
false
Specifies that the element is not draggable.
auto
Uses the default behavior of the user agent/browser. This is the default value.
dropzone
Specifies what should happen when the user «drops» an element (i.e. after dragging it) onto the current element.
Must be an unordered set of unique space-separated tokens that are ASCII case-insensitive.
Value
Description
copy
Results in a copy of the dragged data. Default value.
move
Results in the data being moved to the new location.
link
Results in a link to the original data.
Any keyword with eight characters or more, beginning with the an ASCII case-insensitive match for the string » string: «
Specifies that items with the drag data item kind Plain Unicode string and the drag data item type string set to a value that matches the remainder of the keyword are accepted.
Any keyword with six characters or more, beginning with an ASCII case-insensitive match for the string » file: «
Allows you to specify which file types can be processed (i.e. copied, moved or linked) in this dropzone. Example: dropzone=»copy file:image/png file:image/gif file:image/jpeg»
Note that this attribute must not have more than one of the three feedback values (copy, move, and link) specified. If none are specified, the copy value is implied.
Indicates that the element is not yet, or is no longer, relevant. The browser/user agent does not display elements that have the hidden attribute present.
This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either hidden or hidden=»hidden» ).
For example, a block of text that has been marked with the inert attribute may not be searchable when the user attempts a browser text search (eg, commonly called «Find in page» or similar). The text may not be able to be targetted for user interaction events (such as mouseover etc), and the user may not be able to select the block of text.
This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either inert or inert=»inert» ).
The itemid attribute can only be present in elements that include both the itemscope and the itemtype attributes, as long as the itemtype attribute specifies a vocabulary that supports global identifiers for items, as defined by that vocabulary’s specification.
itemprop
Provides one or more properties to one or more «items».
Although the itemprop attribute is optional and can be used on any HTML element, if used it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, representing the names of the name-value pairs that it adds. The attribute’s value must have at least one token. According to the HTML5 specification, each token must be one of the following:
Also, Specifications that introduce defined property names that are not absolute URLs must ensure all such property names contain no U+002E FULL STOP characters (.), no U+003A COLON characters (:), and no space characters.
Used in conjunction with the itemscope attribute, the itemref attribute provides a list of additional elements to crawl to find the name-value pairs of the «item». Although the itemref attribute is optional, if specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, consisting of IDs of elements in the same home subtree. Also, the itemref can only be used on elements that also have the itemscope attribute present.
HTML5 elements that have the itemscope attribute create a name-value pair called an «item». Elements with an itemscope attribute may also have an itemtype attribute specified, to give the item types of the item.
This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either itemscope or itemscope=»itemscope» ).
The itemtype attribute must only be present in elements that include the itemscope attribute.
lang
Sets the language code to be used.
[Must be a valid RFC 3066 language code, or an empty string.]
spellcheck
Specifies whether the element should have its spelling checked.
Value
Description
[Empty string]
The element should have its spelling checked.
true
The element should have its spelling checked.
false
The element should not have its spelling checked.
If this attribute is missing, the element will use the default behavior, possibly based on the parent’s own spellcheck state.
Assigns a slot to an element: an element with a slot attribute is assigned to the slot created by the slot element whose name attribute’s value matches that slot attribute’s value — but only if that slot element finds itself in the shadow tree whose root’s host has the corresponding slot attribute value.
style
Specifies inline styles for the element. The value should be the style definition you wish to use.
tabindex
Helps determine the tabbing order (when the user ‘tabs’ through the elements on the page).
title
Specifies a title to associate with the element. Many browsers will display this when the cursor hovers over the element (similar to a «tool tip»).
[Any text to be displayed as a «tool tip».]
translate
Specifies whether the element’s attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged.
The translate attribute is an enumerated attribute and may contain the following possible values:
If the translate attribute is provided, but its value is missing or is invalid, the element will inherit its value from its parent element.
Event Handler Content Attributes
An event handler content attribute is an attribute for a specific event handler.
The HTML specification includes the following event handler content attributes. Most can be used on all HTML elements, but there are exceptions, as outlined below.
Event Handlers for All HTML Elements & document & window Objects
The following table lists the event handlers supported by all HTML elements, as both event handler content attributes and event handler IDL attributes; and supported by all Document and Window objects, as event handler IDL attributes.
Attribute
Description
onblur
User has left the focus of the element.
onerror
Invoked when an error occurs while the Window object is being loaded. Also handler for script error notifications.
onfocus
Invoked when the focus is on the element.
onload
The element has loaded.
onresize
The viewport has been resized.
onscroll
scroll event handler. Invoked when the element’s scrollbar is being scrolled.
Attribute
Description
onafterprint
afterprint event handler
onbeforeprint
beforeprint event handler
onbeforeunload
beforeunload event handler
onhashchange
hashchange event handler. The hashchange event is fired when navigating to a session history entry whose URL differs from that of the previous one only in the fragment identifier.
onlanguagechange
languagechange event handler.
onmessage
message event handler.
onmessageerror
messageerror event handler.
onoffline
offline event handler.
ononline
online event handler.
onpagehide
pagehide event handler. The pagehide event is fired when traversing from a session history entry.
onpageshow
pageshow event handler. The pageshow event is fired when traversing to a session history entry.
onpopstate
popstate event handler. The popstate event is fired when navigating to a session history entry that represents a state object.
onrejectionhandled
rejectionhandled event handler.
onstorage
storage event handler.
onunhandledrejection
unhandledrejection event handler.
onunload
unload event handler.
The following are the event handlers supported by all HTML elements, as both event handler content attributes and event handler IDL attributes; and supported by all Document objects, as event handler IDL attributes:
Attribute
Description
oncut
cut event handler.
oncopy
copy event handler.
onpaste
paste event handler.
The following event handler is supported on Document objects as an event handler IDL attribute.
