Таблицы

HTML-таблицы отображают табличные данные со строками и столбцами. Выбор типа таблицы <table> зависит от отображаемого контента и потребностей пользователей. Если данные представляются, сравниваются, сортируются, вычисляются или содержат перекрестные ссылки, то <table> вероятно, будет правильным выбором. Если же вас интересует организация нетабличного контента, например, большой группы миниатюрных изображений, таблицы не подходят. Вместо этого создайте список изображений и стилизуйте сетку с помощью CSS .

В этом разделе мы обсудим все элементы, составляющие таблицу, а также некоторые аспекты доступности и удобства использования, которые следует учитывать при представлении табличных данных. Хотя курс «Изучение HTML» не посвящен CSS, мы рассмотрим некоторые специфические для таблиц свойства 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> ).

Дочерние элементы таблицы расположены в следующем порядке:

1. <caption> элемент
2. <colgroup> элементы
3. <thead> элементы
4. <tbody> элементы
5. <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 и cellspacing, определяющие расстояние между содержимым ячейки и её границей, а также между границами соседних ячеек, должны быть заданы с помощью свойств CSS border-collapse и border-spacing соответственно. Border-spacing не будет иметь эффекта, если задано border-collapse: collapse . Если задано border-collapse: separate; можно полностью скрыть пустые ячейки с помощью empty-cells: hide; Чтобы узнать больше о стилизации таблиц, посмотрите интерактивную презентацию CSS-стилей для таблиц .

В примерах мы добавили рамку к таблице и каждой отдельной ячейке с помощью CSS, чтобы сделать некоторые функции более наглядными:

В этом примере у нас есть подпись, заголовок таблицы и тело таблицы. Заголовок содержит одну строку, в которой расположены три ячейки заголовка <th> , таким образом, создаются три столбца. Тело таблицы содержит три строки данных: первая ячейка является ячейкой заголовка для этой строки, поэтому мы используем <th> вместо <td> .

Ячейка <th> имеет семантическое значение с неявными ARIA-ролями columnheader или rowheader . Она определяет ячейку как заголовок для столбца или строки ячеек таблицы в зависимости от значения перечисляемого атрибута scope . Браузер по умолчанию будет использовать col или row , если scope не задан явно. Поскольку мы использовали семантическую разметку, ячейка 1956 имеет два заголовка: Year и Lou Minious. Эта связь указывает нам, что «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 объединяет две или более смежных ячеек в одной строке.
• rowspan объединяет ячейки в разных строках при добавлении его к ячейке в первой из объединяемых строк.

В этом примере заголовок таблицы содержит две строки. Первая строка заголовка содержит три ячейки, занимающие четыре столбца: средняя ячейка имеет colspan="2" . Это объединяет две соседние ячейки. Первая и последняя ячейки имеют rowspan="2" . Это объединяет ячейку с ячейкой в ​​соседней строке, расположенной непосредственно под ней.

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

В случаях, когда ячейка определяется несколькими ячейками-заголовками, связи между которыми нельзя задать только с помощью атрибутов scope , добавьте атрибут headers с разделенным пробелами списком связанных заголовков. Поскольку этот пример представляет собой более сложную таблицу, мы явно определяем область видимости заголовков с помощью атрибута scope . Для большей ясности мы добавили атрибут headers к каждой ячейке.

Атрибуты headers возможно, в данном случае не были необходимы, но их важно помнить по мере усложнения таблиц. Таблицы со сложной структурой, такие как таблицы, в которых заголовки или ячейки объединены, или таблицы с более чем двумя уровнями заголовков столбцов или строк, требуют явного указания связанных ячеек заголовков. В таких сложных таблицах необходимо явно связать каждую ячейку данных с соответствующей ячейкой заголовка, используя список разделенных пробелами id всех связанных заголовков в качестве значения атрибута headers .

Атрибут headers чаще всего встречается у элементов <td> , но также подходит для <th> .

Тем не менее, сложные структуры таблиц могут быть трудны для понимания всеми пользователями, а не только пользователями программ чтения с экрана. С точки зрения когнитивных функций и поддержки программ чтения с экрана, более простые таблицы с небольшим количеством или полным отсутствием объединенных ячеек, даже без добавления областей видимости и заголовков, лучше понимаются. И ими также проще управлять!

Таблицы стилей

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

Если используется группировка столбцов, она должна быть вложена в <table> , сразу после <caption> и перед любыми данными таблицы. Если она охватывает более одного столбца, используйте атрибут span .

Обычно структура таблицы имеет следующий порядок, при этом элементы <table> и <caption> являются двумя основными элементами, которые следует включить:

<table>
  <caption>Table Caption</caption>
  <colgroup>
    <col/>
  </colgroup>
  <thead>...

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

Связанные стили <td> и <th> переопределяют стили <col> . В CodePen мы установили colspan таким образом, чтобы объединить некоторые строки таблицы, но не все. Если к <tr> применить CSS-селектор nth-child , то в зависимости от того, какая строка или столбец были объединены, это может повлиять на стиль.

К сожалению, поддерживается лишь небольшое количество свойств. Стили не наследуются в ячейки, и единственный способ обратиться к ячейкам с помощью <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> .

Таблицы по умолчанию не адаптивны. Вместо этого их размеры по умолчанию определяются в соответствии с содержимым. Для эффективной работы стилей макета таблиц на различных устройствах необходимы дополнительные меры. Если вы изменяете свойство `display` в CSS для элементов таблицы , добавьте атрибуты role ARIA. Хотя это может показаться излишним, свойство display в CSS может влиять на дерево доступности в некоторых браузерах.

Представленные данные

Элементы таблицы имеют семантическое значение, используемое вспомогательными технологиями для облегчения навигации пользователей по строкам и столбцам без потери ориентации. Элемент <table> не следует использовать для оформления. Если вам нужен заголовок над списком, используйте заголовок и список . Если вы хотите разместить контент в нескольких столбцах, используйте многоколоночную компоновку . Если вы хотите разместить контент в сетке, используйте CSS grid .

Используйте таблицу только для хранения данных.

Представьте себе: если для презентации ваших данных на совещании требуется электронная таблица, используйте <table> . Если же вы хотите использовать функции, доступные в программах для создания презентаций, таких как Google Slides или PowerPoint, вам, вероятно, понадобится список описаний .

Вкратце: если вы не представляете данные в табличном виде, не используйте <table> . Если вы используете таблицу для представления данных, установите role="none" .

Многие разработчики используют таблицы для компоновки форм, но это необязательно. Вам необходимо знать, как работать с HTML-формами .

Проверьте свое понимание

Проверьте свои знания таблиц умножения.