Html table атрибуты: Атрибут таблицы

3 row ,

3 row ,

4 заголовок столбца

и ячейка .

Если таблица содержит сортируемые столбцы или строки, атрибут aria-sort следует добавить к элементу ячейки заголовка (а не к самой таблице). Если какие-либо строки или столбцы скрыты, aria-colcount или aria-rowcount должны быть включены, указывая общее количество столбцов или строк, соответственно, вместе с aria-colindex или aria-rowindex в каждой ячейке. aria-colindex или aria-rowindex устанавливается на позицию ячейки в строке или столбце соответственно. Если таблица включает ячейки, которые охватывают несколько строк или несколько столбцов, то также следует включить aria-rowspan или aria-colspan . Поймите, гораздо проще использовать

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

Чтобы создать интерактивный виджет с табличной структурой, используйте шаблон сетки . Если взаимодействие предусматривает состояние выбора отдельных ячеек, если предоставляется навигация слева направо и сверху вниз или если пользовательский интерфейс позволяет изменять порядок ячеек или иным образом изменять порядок отдельных ячеек, например, путем перетаскивания, используйте сетка или древовидная сетка вместо.

Примечание: Настоятельно рекомендуется использовать собственный элемент таблицы HTML, когда это возможно.

Связанные роли, состояния и свойства WAI-ARIA

role="rowgroup"

Необязательный дочерний элемент таблицы, группа строк инкапсулирует группу строк, аналогичную

, и .

роль = "строка"

Строка в таблице и, возможно, в группе строк, которая является контейнером для одной или нескольких ячеек, заголовков столбцов или заголовков строк.

ария-описывается атрибутом

Принимает в качестве значения идентификатор элемента, который служит описанием для таблицы.

aria-метка атрибут

aria-label предоставляет доступное имя для таблицы.

aria-colcount атрибут

Этот атрибут требуется только в том случае, если столбцы постоянно отсутствуют в DOM. Он обеспечивает явное указание количества столбцов в полной таблице. Установите значение на общее количество столбцов в полной таблице. Если неизвестно, установите aria-colcount="-1" .

aria-rowcount атрибут

Этот атрибут требуется только в том случае, если строки не присутствуют в DOM все время, например прокручиваемые таблицы, которые повторно используют строки для минимизации количества узлов DOM. Он обеспечивает явное указание количества строк в полной таблице.

Установите значение на общее количество строк в полной таблице. Если неизвестно, установите ария-рядкаунт="-1" .

Взаимодействие с клавиатурой

Нет

Необходимые функции JavaScript

Нет. Для сортируемых столбцов см. роль арии заголовка столбца.

Примечание: Первое правило использования ARIA заключается в том, что вы можете использовать нативную функцию с уже встроенной семантикой и поведением, которое вам требуется, вместо того, чтобы переназначать элемент и добавлять роль, состояние или свойство ARIA к сделайте его доступным, затем сделайте это. Используйте HTML

элемент вместо роли таблицы ARIA, когда это возможно.

 <дел
  роль = "таблица"
  aria-label="Семантические элементы"
  aria-describedby="semantic_elements_table_desc"
  ария-строка = "81">
  <дел>
    Семантические элементы для использования вместо ролей ARIA
  
  

    <дел роль = "строка">
      Роль ARIA
      Семантический элемент
    
  
  

    

      заголовок
      h2
    
    

      заголовок
      h6
    
    

      группа строк
      голова
    
    

      термин
      дт
    
  

 

Вышеприведенное является частью таблицы.

Хотя полная таблица содержит 81 запись, как указано в свойстве aria-rowcount , в настоящее время видны только четыре. Столбцы можно сортировать, но в настоящее время они не отсортированы, на что указывает свойство aria-sort в заголовках столбцов.

Используйте только

, , , , Элемент HTML инкапсулирует набор строк таблицы ( элементов), указывая, что они составляют тело таблицы (

,

и т. д. для структуры таблицы данных. Вы можете добавить эти роли ARIA, чтобы обеспечить доступность в случае удаления собственной семантики таблицы, например, с помощью CSS. Соответствующий вариант использования роли таблицы ARIA — это когда свойство отображения CSS переопределяет собственную семантику таблицы, например, на дисплей: сетка . В этом случае вы можете использовать роли таблицы ARIA для повторного добавления семантики. Added benefits none Specification Accessible Rich Internet Applications (WAI-ARIA) # table ARIA Authoring Practices # table элемент таблицы HTML Руководство по работе с таблицами HTML АРИЯ: сетка роль Обнаружили проблему с содержанием этой страницы? Отредактируйте страницу на GitHub. Сообщить о проблеме с содержимым. Просмотрите исходный код на GitHub. Хотите принять участие? Узнайте, как внести свой вклад. Последний раз эта страница была изменена 23 февраля 2023 г. участниками MDN. : Элемент Table Body — HTML: Язык гипертекстовой разметки

).

Элемент

вместе со связанными с ним элементами и предоставляют полезную семантическую информацию, которую можно использовать при визуализации для экрана или принтера.

элементов. можно опустить, если первым внутри элемента является элемент , и если элементу не предшествует непосредственно , или элемент, закрывающий тег которого был опущен. (Его нельзя опустить, если элемент пуст.) А Конечный тег элемента можно опустить, если за элементом сразу следует элемент или , или если в родительском элементе больше нет содержимого. (для семантической идентификации строки заголовков столбцов), блок должен следовать за ним.

Если

элементов указаны вне существующих , как прямые дочерние элементы

Категории контента	Нет.
Разрешенный контент	Ноль или более
Отсутствие тега	Начальный тег элемента
Разрешенные родители	В требуемом родительском элементе , элемент можно добавить после <заголовок> , и элемент. Неявная роль ARIA группа строк Разрешенные роли ARIA Любой Интерфейс DOM HTMLTableSectionElement Этот элемент включает глобальные атрибуты. Устаревшие атрибуты выровнять Устаревший Этот перечисляемый атрибут указывает, как будет обрабатываться горизонтальное выравнивание содержимого каждой ячейки. Возможные значения: left , выравнивание содержимого по левому краю ячейки center , центрирование содержимого в ячейке right , выравнивание содержимого по правому краю ячейки выравнивание , вставляя пробелы в текстовое содержимое, чтобы содержимое было выровнено по ячейке char , выравнивание текстового содержимого по специальному символу с минимальным смещением, определяемым атрибутами char и charoff . Если этот атрибут не установлен, предполагается значение слева . Поскольку этот атрибут устарел, используйте вместо него свойство CSS text-align . Примечание: Эквивалентное свойство text-align для align="char" еще не реализовано ни в одном браузере. См. раздел совместимости браузера text-align для значения . бгколор Устаревший Цвет фона таблицы. Это 6-значный шестнадцатеричный код RGB с префиксом « # ». Также можно использовать одно из предопределенных ключевых слов цвета. Поскольку этот атрибут устарел, вместо него используйте свойство CSS background-color . символ Устаревший Этот атрибут используется для установки символа для выравнивания ячеек в столбце. Типичные значения для этого включают точку ( . ) при попытке выровнять числа или денежные значения. Если для align не установлено значение char , этот атрибут игнорируется. уголь Устаревший Этот атрибут используется для указания количества символов для смещения данных столбца от символов выравнивания, заданных атрибутом char . валайн Устаревший Этот атрибут определяет вертикальное выравнивание текста в каждой строке ячеек заголовка таблицы. Возможные значения этого атрибута: baseline , что поместит текст как можно ближе к нижней части ячейки, но выровняет его по базовой линии символов, а не по их нижней части. Если все символы одного размера, это имеет тот же эффект, что и снизу . нижний , что поместит текст как можно ближе к нижней части ячейки; средний , который будет центрировать текст в ячейке; и сверху , что поместит текст как можно ближе к верхней части ячейки. Поскольку этот атрибут устарел, используйте вместо него свойство CSS vertical-align . Если таблица включает блок

, эти элементы будут инкапсулированы отдельным элементом , сгенерированным браузером.

При печати документа элементы

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

Когда таблица представлена ​​в контексте экрана (например, в окне), который недостаточно велик для отображения всей таблицы, пользовательский агент может разрешить пользователю прокручивать содержимое

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

Ниже приведены несколько примеров использования элемента

. Дополнительные примеры этого элемента см. в примерах для

блоков отдельно друг от друга для одной и той же родительской таблицы.

Вы можете использовать более одного

.

Базовый пример

В этом относительно простом примере мы создаем таблицу, содержащую информацию о группе студентов с

и , количество строк в теле.

HTML

Здесь показан HTML таблицы. Обратите внимание, что все ячейки body, включая информацию о студентах, содержатся в одном элементе

.

 <таблица>
  

<тд>3971244

CSS

Далее показан CSS для оформления нашей таблицы.

 стол {
  граница: 2px сплошная #555;
  граница коллапса: коллапс;
  шрифт: 16px "Lucida Grande", "Helvetica", "Arial", без засечек;
}
 

Во-первых, устанавливаются общие атрибуты стиля таблицы, настраивая толщину, стиль и цвет внешних границ таблицы и используя border-collapse , чтобы гарантировать, что линии границ являются общими для соседних ячеек, а не имеют свои собственные границы. с пробелом между ними. Шрифт используется для установки начального шрифта для таблицы.

-й,
тд {
  граница: 1px сплошная #bbb;
  отступ: 2px 8px 0;
  выравнивание текста: по левому краю;
}
 

Затем стиль устанавливается для большинства ячеек в таблице, включая все ячейки данных, а также стили, общие для наших

, получают дополнительный стиль. Они используют более темный фоновый цвет , больший размер шрифта и более толстую и темную нижнюю границу, чем другие границы ячеек.

Результат

Результирующая таблица выглядит следующим образом:

Несколько тел

Вы можете создавать группы строк в таблице, используя несколько элементов

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

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

Результат

Сначала результирующая таблица, чтобы вы знали, что мы строим:

HTML

Пересмотренный HTML выглядит следующим образом:

Идентификатор учащегося	Имя	Основной
3741255	Джонс, Марта	Информатика
Ним, Виктор	Русская литература
4100332	Петров, Александра	Астрофизика
и	ячейки. Ячейкам придается светло-серый контур толщиной в один пиксель, отступы настраиваются, и все ячейки выравниваются по левому краю с помощью text-align thead > tr > th { цвет фона: #cce; размер шрифта: 18 пикселей; нижняя граница: 2px сплошная #999; } Наконец, ячейки заголовков, содержащиеся в элементе
, для создания заголовков внутри каждого

<тд>3971244

Обратите внимание, что каждый майор находится в отдельном Блок

, первая строка которого содержит один элемент .

Тогда каждая оставшаяся строка в

каждой специальности состоит из двух ячеек: первая для идентификатора студента, а вторая для его имени.

CSS

 таблица {
  граница: 2px сплошная #555;
  граница коллапса: коллапс;
  шрифт: 16px "Lucida Grande", "Helvetica", "Arial", без засечек;
}
й,
тд {
  граница: 1px сплошная #bbb;
  отступ: 2px 8px 0;
  выравнивание текста: по левому краю;
}
thead > tr > th {
  цвет фона: #cce;
  размер шрифта: 18 пикселей;
  нижняя граница: 2px сплошная #999;
}
 

Большая часть CSS не изменилась. Однако мы добавляем немного более тонкий стиль для ячеек заголовков, содержащихся непосредственно в

(в отличие от тех, которые находятся в ). Это используется для заголовков, указывающих соответствующий основной раздел каждой таблицы.

 tbody > tr > th {
  цвет фона: #dde;
  нижняя граница: 1,5 пикселя сплошная #bbb;
  вес шрифта: нормальный;
}
 

Идентификатор учащегося	Имя
Информатика
3741255	Джонс, Марта
4077830	Пирс, Бенджамин
5151701	Кирк, Джеймс
Русская литература
Ним, Виктор
Астрофизика
4100332	Петров, Александра
8892377	Тойота, Хироко
с атрибутом colspan , охватывающим всю ширину таблицы. В этом заголовке указано имя мажора, содержащегося в

Спецификация
HTML Standard # the-tbody-element

Таблицы BCD загружаются только в браузере с включенным JavaScript.

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарий *

Имя *

Email *

Сайт