Таблицы HTML используются для отображения табличных данных со строками и столбцами. Решение об использовании <table> должно основываться на представляемом вами контенте и потребностях ваших пользователей в отношении этого контента. Если данные представляются, сравниваются, сортируются, вычисляются или имеют перекрестные ссылки, то <table> , вероятно, будет правильным выбором. Если вы просто хотите аккуратно разместить нетабличный контент, например большую группу миниатюрных изображений, таблицы не подходят: вместо этого создайте список изображений и задайте стиль сетки с помощью CSS .
В этом разделе мы обсудим все элементы, составляющие таблицу, а также некоторые функции доступности и удобства использования, которые следует учитывать при представлении табличных данных. Хотя «Изучение HTML» не связано с CSS, и существует целый курс, посвященный изучению CSS , мы рассмотрим некоторые свойства CSS, специфичные для таблиц.
Элементы таблицы, по порядку
Тег <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 . Ни один из этих трех элементов не имеет каких-либо атрибутов, специфичных для элемента.
Что мы имеем на данный момент:
<table>
<caption>MLW Students</caption>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
Элемент <tfoot> изначально был указан так, чтобы он располагался сразу после <thead> и перед <tbody> из соображений доступности, поэтому вы можете столкнуться с этим неинтуитивным порядком исходного кода в устаревших базах кода.
Содержимое таблицы
Таблицы можно разделить на верхние, основные и нижние колонтитулы, но ни один из них на самом деле ничего не делает, если таблицы не содержат строк, ячеек и содержимого. Каждая строка таблицы <tr> содержит одну или несколько ячеек. Если ячейка является ячейкой заголовка, используйте <th> . В противном случае используйте <td> .
Таблицы стилей пользовательского агента обычно отображают содержимое ячейки заголовка таблицы <th> как центрированное и полужирное. Этими стилями по умолчанию и всеми стилями лучше всего управлять с помощью CSS вместо устаревших атрибутов, которые раньше были доступны в отдельных ячейках, строках и даже в <table> .
Были атрибуты для добавления полей между ячейками и внутри ячеек, для границ и для выравнивания текста. Cellpadding и cellpacing, которые определяют пространство между содержимым ячейки и ее границей, а также между границами соседних ячеек, должны быть установлены с помощью свойств CSS border-collapse и border-spacing соответственно. Border-spacing не будет иметь никакого эффекта, если установлен border-collapse: collapse . Если border-collapse: separate; установлен, можно полностью скрыть пустые ячейки с помощью empty-cells: hide; . Чтобы узнать больше о стилях таблиц, ознакомьтесь с интерактивной презентацией стилей CSS, связанных с таблицами .
В примерах мы добавили рамку к таблице и каждой отдельной ячейке с помощью CSS, чтобы сделать некоторые функции более заметными:
В этом примере у нас есть заголовок, заголовок и тело таблицы. Заголовок имеет одну строку, содержащую три ячейки заголовка <th> , тем самым создавая три столбца. Тело содержит три строки данных: первая ячейка является ячейкой заголовка строки, поэтому мы используем <th> вместо <td> .
Ячейка <th> имеет семантическое значение с неявной ролью ARIA заголовка столбца или заголовка строки . Он определяет ячейку как заголовок столбца или строки ячеек таблицы, в зависимости от значения перечисляемого атрибута scope . Браузер по умолчанию будет использовать col или row , если scope не задана явно. Поскольку мы использовали семантическую разметку, ячейка 1956 имеет два заголовка: «Год» и «Лу Миниус». Эта ассоциация сообщает нам, что «1956» является «годом» окончания учебы «Лу Миниуса». В этом примере, когда мы видим всю таблицу, связь визуально очевидна. Использование <th> обеспечивает ассоциацию, даже если столбец или строка заголовка прокручиваются вне поля зрения. Мы могли бы явно указать <th scope="col">Year</th> и <th scope="row">Lou Minious</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> , element и ее единственный потомок, пустой элемент столбца <col> . Элемент <colgroup> используется для определения групп столбцов или элементов <col> внутри таблицы.
Если используется, группировка столбцов должна быть вложена в <table> сразу после <caption> и перед любыми данными таблицы. Если они охватывают более одного столбца, используйте атрибут span .
Порядок содержания таблицы обычно следующий: <table> и <caption> — это два элемента, которые должны быть включены:
<table>
<caption>Table Caption</caption>
<colgroup>
<col/>
</colgroup>
<thead>...
Ни <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 для элементов таблицы , включите атрибуты role ARIA. Хотя это может показаться излишним, свойство display CSS может повлиять на дерево доступности в некоторых браузерах.
Представление данных
Элементы таблицы имеют семантическое значение, которое используется вспомогательными технологиями, позволяющими перемещаться по строкам и столбцам, не теряясь. Элемент <table> не следует использовать для представления. Если вам нужен заголовок над списком, используйте заголовок и список . Если вы хотите разместить контент во многих столбцах, используйте многоколоночный макет . Если вы хотите разместить контент в сетке, используйте CSS Grid . Используйте таблицу только для данных. Подумайте об этом так: если для представления на собрании вашим данным требуется электронная таблица, используйте <table> . Если вы хотите использовать функции, доступные в программном обеспечении для презентаций, таком как Keynote или Powerpoint, вам, вероятно, понадобится список описаний .
Хотя сортировка столбцов таблицы входит в компетенцию JavaScript, разметка заголовков, чтобы пользователи знали, что столбец можно сортировать, входит в компетенцию HTML. Сообщите пользователям, что столбцы таблицы можно сортировать с помощью значков, отображающих возрастание, убывание или несортировку. Столбец, отсортированный в данный момент, должен включать атрибут aria-sort с перечисляемым значением направления сортировки. <caption> может вежливо объявлять об обновлениях порядка сортировки с помощью aria-live и диапазона, который динамически обновляется и виден пользователям программ чтения с экрана. Поскольку столбец можно сортировать, щелкнув по содержимому заголовка, содержимое заголовка должно быть <button> .
Если вы не представляете табличные данные, не используйте <table> . Если вы используете таблицу для презентации, установите role="none" .
Многие разработчики используют таблицы для размещения форм, но в этом нет необходимости. Но вам нужно знать о HTML-формах, поэтому мы рассмотрим их дальше.
Проверьте свое понимание
Проверьте свои знания таблиц.
Какой элемент используется для разметки ячеек, являющихся заголовками?
<header><caption><th>Какая информация, скорее всего, подойдет для размещения в таблице?
<dl> .<ul> .