Таблицы¶
Понимание того, как использовать таблицы для разметки табличных данных.
Таблицы HTML используются для отображения табличных данных со строками и столбцами. Решение об использовании <table> должно основываться на содержимом, которое вы представляете, и потребностях ваших пользователей в отношении этого содержимого. Если данные представляются, сравниваются, сортируются, вычисляются или перекрестные ссылки, то <table>, вероятно, будет правильным выбором. Если вы просто хотите аккуратно расположить нетабличное содержимое, например, большую группу уменьшенных изображений, таблицы не подойдут: вместо этого создайте список изображений и оформите сетку с помощью CSS.
В этом разделе мы рассмотрим все элементы, из которых состоит таблица, а также некоторые особенности доступности и удобства использования, которые следует учитывать при представлении табличных данных. Хотя "Изучение HTML" не является фундаментальным курсом по CSS, и существует целый курс, посвященный изучению CSS, мы рассмотрим некоторые специфические для таблиц CSSproperties.
Элементы таблицы, по порядку¶
Тег <table> оборачивает содержимое таблицы, включая все ее элементы. Неявная ARIA-роль элемента <table> — table; вспомогательные технологии знают, что этот элемент представляет собой табличную структуру, содержащую данные, расположенные в строках и столбцах. Если таблица поддерживает состояние выбора, имеет двумерную навигацию или позволяет пользователю изменять порядок ячеек, установите role="grid". Если строки grid могут быть развернуты и свернуты, используйте вместо этого role="treegrid".
Внутри <table> находятся заголовки таблиц (<thead>), тела таблиц (<tbody>) и, по желанию, нижние колонтитулы (<tfoot>). Каждая из них состоит из строк таблицы (<tr>). Строки содержат ячейки заголовка таблицы (<th>) и данных таблицы (<td>), которые, в свою очередь, содержат все данные. В DOM перед всем этим можно обнаружить две дополнительные возможности: заголовок таблицы (<caption>) и группы столбцов (<colgroup>). В зависимости от наличия или отсутствия у <colgroup> атрибута span, она может содержать вложенные элементы столбцов таблицы (<col>).
Дочерними элементами таблицы являются, в порядке убывания:
<caption><colgroup><thead><tbody><tfoot>
Мы рассмотрим дочерние элементы <table>, которые являются необязательными, но рекомендуемыми, затем рассмотрим строки, ячейки заголовка таблицы и ячейки данных таблицы. Элемент <colgroup> будет рассмотрен в последнюю очередь.
Заголовок таблицы¶
Будучи родным, семантическим элементом, <caption> является предпочтительным способом присвоения имени таблице. <caption> обеспечивает описательный, программно связанный заголовок таблицы. По умолчанию он виден и доступен всем пользователям.
Элемент <caption> должен быть первым элементом, вложенным в элемент <table>. Его включение позволяет всем пользователям сразу понять назначение таблицы, не читая окружающий текст. В качестве альтернативы можно использовать aria-label или aria-labelledby в элементе <table>, чтобы предоставить доступное имя в качестве подписи. Элемент <caption> не имеет специфических для данного элемента атрибутов.
Надпись отображается вне таблицы. Расположение надписи можно задать с помощью свойства CSS caption-side, что лучше, чем использование устаревшего атрибута align. Это позволяет установить надпись сверху и снизу. Позиционирование слева и справа, с помощью inline-start и inline-end, пока не поддерживается в полной мере. Верх — это представление браузера по умолчанию.
Желательно, чтобы таблицы данных имели четкие заголовки и подписи, а также были достаточно простыми и практически не требовали пояснений. Следует помнить, что не все пользователи обладают одинаковыми когнитивными способностями. В тех случаях, когда таблица "делает выводы" или иным образом нуждается в интерпретации, дайте краткое резюме основного положения или функции таблицы. Место размещения такого резюме зависит от его длины и сложности. Если оно краткое, используйте его в качестве внутреннего текста подписи. Если длиннее, то кратко изложите суть в подписи, а резюме дайте в абзаце, предшествующем таблице, связав их атрибутом aria-describedby. Другой вариант — поместить таблицу в <figure> и поместить резюме в <figcaption>.
Секционирование данных¶
Содержимое таблиц состоит максимум из трех секций: нулевой или более заголовков таблицы (<thead>), тела таблицы (<tbody>) и нижних колонтитулов таблицы (<tfoot>). Все они являются необязательными, причем поддерживается ноль или более элементов.
Эти элементы не помогают и не мешают доступности таблицы, но они полезны с точки зрения удобства использования. Они предоставляют крючки для стилизации. Например, содержимое заголовка можно сделать липким, а содержимое <tbody> можно сделать прокручиваемым. Строки, не вложенные ни в один из этих трех содержащих элементов, неявно обернуты в <tbody>. Все три элемента имеют одну и ту же неявную роль rowgroup. Ни один из этих трех элементов не имеет специфических для данного элемента атрибутов.
Что мы имеем на данный момент:
1 2 3 4 5 6 7 8 | |
Элемент <tfoot> изначально должен был располагаться сразу после <thead> и перед <tbody> по соображениям доступности, поэтому в устаревших кодовых базах можно встретить такой неинтуитивный порядок исходных текстов.
Содержание таблицы¶
Таблицы можно разделить на заголовки, тело и нижние колонтитулы, но ни один из них ничего не дает, если таблицы не содержат строк, ячеек и содержимого. Каждая строка таблицы, <tr>, содержит одну или несколько ячеек. Если ячейка является ячейкой заголовка, используйте <th>. В противном случае используйте <td>.
Пользовательские таблицы стилей обычно отображают содержимое ячейки заголовка таблицы <th> как выровненное по центру и выделенное жирным шрифтом. Эти стили по умолчанию, как и все стили, лучше всего контролировать с помощью CSS, а не устаревших атрибутов, которые раньше были доступны для отдельных ячеек, строк и даже для <table>.
Существовали атрибуты, позволяющие добавлять вставки между ячейками и внутри ячеек, границы и выравнивание текста. Cellpadding и cellspacing, определяющие пространство между содержимым ячейки и ее границей, а также между границами соседних ячеек, должны задаваться с помощью свойств CSS border-collapse и border-spacing соответственно. border-spacing не будет иметь эффекта, если установлено border-collapse: collapse. Если задано border-collapse: separate;, то можно полностью скрыть пустые ячейки с помощью empty-cells: hide;. Чтобы узнать больше о стилизации таблиц, можно воспользоваться интерактивным слайдом table-related CSS styles.
В примерах мы добавили границу на таблицу и каждую отдельную ячейку с помощью CSS, чтобы сделать некоторые особенности более заметными:
В данном примере мы имеем надпись, заголовок таблицы и тело таблицы. Заголовок имеет одну строку, содержащую три ячейки заголовка <th>, что создает три столбца. Тело содержит три строки данных: первая ячейка является ячейкой заголовка строки, поэтому мы используем <th> вместо <td>.
Ячейка <th> имеет семантическое значение, с неявными ARIA-ролями columnheader или rowheader. Она определяет ячейку как заголовок столбца или строки ячеек таблицы, в зависимости от значения перечисляемого атрибута scope. Если значение scope не задано явно, браузер по умолчанию принимает значение col или row. Поскольку мы использовали семантическую разметку, ячейка 1956 имеет два заголовка: Year и Lou Minious. Эта ассоциация говорит нам о том, что "1956" — это "год" окончания школы для "Lou Minious". В данном примере, поскольку мы видим всю таблицу, ассоциация визуально очевидна. Использование <th> обеспечивает ассоциацию даже в том случае, если столбец или строка заголовка ушли из поля зрения. Мы могли бы явно задать <th scope="col">Год</th> и <th scope="row">Лу Миниус</th>, но для такой простой таблицы, как эта, подойдут перечисляемые значения по умолчанию. Другие значения для scope включают rowgroup и colgroup, которые полезны при работе со сложными таблицами.
Объединение ячеек¶
Подобно MS Excel, Google Sheets и Numbers, можно объединить несколько ячеек в одну. Это делается с помощью HTML! Атрибут colspan используется для объединения двух или более соседних ячеек в пределах одной строки. Атрибут rowspan используется для объединения ячеек в разных строках, располагаясь на ячейке в верхней строке.
В данном примере заголовок таблицы содержит две строки. Первая строка заголовка содержит три ячейки, охватывающие четыре столбца: средняя ячейка имеет значение colspan="2". Это объединяет две соседние ячейки. Первая и последняя ячейки содержат rowspan="2". Это объединяет ячейку с ячейкой в соседней строке, расположенной непосредственно под ней.
Вторая строка в заголовке таблицы содержит две ячейки; это ячейки для второго и третьего столбцов второй строки. Для первого или последнего столбца ячейка не объявляется, так как ячейки первого и последнего столбцов первой строки занимают две строки.
В случаях, когда ячейка определяется несколькими ячейками-заголовками с ассоциациями, которые не могут быть заданы только атрибутами scope, следует включить атрибут headers с разделенным пробелами списком ассоциированных заголовков. Поскольку данный пример представляет собой более сложную таблицу, мы явно определяем область видимости заголовков с помощью атрибута scope. Для большей наглядности мы добавили атрибут headers в каждую ячейку.
Атрибуты headers, возможно, и не были необходимы в таком простом случае, но их важно иметь в своем арсенале, когда таблицы становятся все сложнее. Таблицы со сложной структурой, например, таблицы, в которых заголовки или ячейки объединяются, или таблицы с более чем двумя уровнями заголовков столбцов или строк, требуют явной идентификации связанных с ними ячеек заголовков. В таких сложных таблицах необходимо явно связать каждую ячейку данных с каждой соответствующей ячейкой заголовка со списком разделенных пробелами значений id всех связанных заголовков в качестве значения атрибута headers.
Атрибут headers чаще всего встречается в элементах <td>, но может быть использован и в <th>.
Тем не менее, сложные структуры таблиц могут быть трудны для понимания всеми пользователями, а не только пользователями устройств чтения с экрана. С когнитивной точки зрения и с точки зрения поддержки программ чтения с экрана более простые таблицы с небольшим количеством ячеек или без них, даже без добавления области видимости и заголовков, являются более понятными. Кроме того, ими легче управлять!
Стилизация таблиц¶
Есть два относительно малоизвестных элемента, о которых было сказано вскользь: группа колонок, элемент <colgroup>, и его единственный потомок, пустой элемент колонки <col>. Элемент <colgroup> используется для определения групп столбцов, или элементов <col>, внутри таблицы.
Если он используется, то группировка столбцов должна быть вложена в <table>, сразу после <caption> и перед любыми данными таблицы. Если они охватывают более одного столбца, следует использовать атрибут span.
Порядок изложения содержимого таблицы обычно следующий: два элемента, которые должны быть включены в таблицу, — <table> и <caption>:
1 2 3 4 5 6 7 8 9 10 11 | |
Ни <colgroup>, ни <col> не имеют семантического значения, помогая сделать таблицу более доступной, но они позволяют ограничить стилизацию столбцов, включая задание ширины столбца с помощью CSS.
Стили <col> будут задавать стиль столбца до тех пор, пока не будет стилей <td> или <th>, которые отменяют этот стиль. Например, когда <colspan> используется для объединения ячеек в некоторых строках таблицы, но не во всех, нельзя быть уверенным, что селектор типа tr > *:nth-child(8), который выбирает 8-го ребенка каждой строки, выделит 8-й столбец полностью или выделит 8-й столбец для нескольких строк, но с россыпью ячеек 9-го и 10-го столбцов, в зависимости от того, ячейки какой строки или столбца были объединены.
К сожалению, поддерживается только несколько свойств, стили не наследуются в ячейках, а единственный способ использования элемента <col> в таргетинге ячеек — это сложный селектор, включающий реляционный селектор :has().
Если и <table>, и <colgroup> имеют цвет фона, то 'background-color' <colgroup> будет находиться сверху. Порядок отрисовки следующий: таблица, группы столбцов, столбцы, группы строк, строки, причем ячейки располагаются последними и сверху, как показано на схеме слоев таблицы. Элементы <td> и <th> не являются потомками элементов <colgroup> или <col> и не наследуют их стилистику.
Для разбиения таблицы на полосы удобно использовать структурные селекторы CSS. Например, tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} добавит полупрозрачный черный цвет к каждой нечетной строке в теле таблицы, позволяя проявиться любым фоновым эффектам, установленным для <colgroup>.
Таблицы по умолчанию не являются отзывчивыми. Скорее, по умолчанию они имеют размеры, соответствующие их содержимому. Для того чтобы стилизация макета таблицы эффективно работала на различных устройствах, необходимо принять дополнительные меры. Если вы изменяете свойство CSS display для элементов таблиц, включите атрибуты ARIA role. Хотя это может показаться излишним, свойство CSS display может влиять на дерево доступности в некоторых браузерах.
Представление данных¶
Элементы таблицы имеют семантические значения, которые используются вспомогательными технологиями для навигации по строкам и столбцам без "заблуждений". Элемент <table> не следует использовать для представления данных. Если вам нужен заголовок над списком, используйте header и list. Если вы хотите расположить содержимое во многих колонках, используйте multi-column layout. Если необходимо расположить содержимое в виде сетки, используйте CSS grid. Используйте таблицу только для данных. Подумайте об этом так: если для представления данных на совещании требуется электронная таблица, используйте <table>. Если же вы хотите использовать возможности, доступные в таких программах для создания презентаций, как Keynote или Powerpoint, то вам, скорее всего, понадобится список описаний.
В то время как сортировка столбцов таблицы относится к области JavaScript, разметка заголовков, сообщающих пользователям о возможности сортировки столбцов, относится к области HTML. Сообщите пользователям о возможности сортировки столбцов таблицы с помощью пиктограмм, показывающих сортировку по возрастанию, по убыванию или без сортировки. Сортируемый в данный момент столбец должен содержать атрибут aria-sort с перечисляемым значением направления сортировки. Столбец <caption> может вежливо сообщать об обновлении порядка сортировки с помощью атрибута aria-live и динамически обновляемого span, который виден пользователям программы чтения с экрана. Поскольку столбец сортируется щелчком мыши по содержимому заголовка, содержимое заголовка должно быть <button>.
Если вы не представляете табличные данные, не используйте <table>. Если вы используете таблицу для представления данных, установите role="none".
Многие разработчики используют таблицы для размещения форм, но в этом нет необходимости. Но вам необходимо знать о формах HTML, поэтому мы рассмотрим их далее.