Заголовок таблицы html: Тег | htmlbook.ru

Leave a Comment / Html / By /

: The Table Caption element — HTML

HTML элемент заголовка таблицы (<caption>) определяет название (заголовок) таблицы. Если этот элемент используется, он всегда должен быть первым вложенным элементом тэга <table> (en-US). Внешний вид и расположение заголовка по отношению к самой таблице может быть изменено с помощью стилей CSS caption-side (en-US) and text-align.

Категории контента (en-US)Нет
Разрешённое содержимоеПотоковый контент (en-US).
Парность теговКонечный тег может быть опущен, если элемент не следует сразу за ASCII пробелом или комментарием.
Разрешённые родителиЭлемент <table> (en-US) как его первый потомок
Разрешённые ARIA-ролиНет
DOM interfaceHTMLTableCaptionElement (en-US)

Этот элемент включает глобальные атрибуты (en-US).

Устаревшие атрибуты

Следующие атрибуты устаревшие и не должны использоваться. Они описаны ниже для справки при обновлении кода и для общего сведения.

align Этот API вышел из употребления и его работа больше не гарантируется.

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

left

Заголовок отображается слева от таблицы.

top

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

right

Заголовок отображается справа от таблицы.

bottom

Заголовок отображается под таблицей.

Примечание: Примечание к использованию: Не используйте этот атрибут, так как он устарел. Элемент <caption> должен быть стилизован с использованием свойств CSS caption-side (en-US) иtext-align.

Когда элемент <table> (en-US), содержащий <caption> является единственным потомком элемента <figure>, вам следует использовать элемент <figcaption> вместо <caption>.

Просто пример, представляющий таблицу, которая содержит заголовок.

<table>
  <caption>Example Caption</caption>
  <tr>
    <th>Login</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>user1</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>user2</td>
    <td>[email protected]</td>
  </tr>
</table>

caption {
  caption-side: top;
  align: right;
}
table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table, th, td {
  border: 1px solid black;
}
Specification
HTML Standard
# the-caption-element

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.
  • Другие связанные с таблицей HTML-элементы: <col>, <colgroup>
    (en-US), <table> (en-US), <tbody> (en-US), <td>, <tfoot>, <th> (en-US), <thead> (en-US), <tr> (en-US);
  • CSS-свойства, которые могут быть применены для стилизации элемента <caption>:
    • text-align, caption-side (en-US).

Last modified: , by MDN contributors

Заголовок и секции таблицы | bookhtml.ru

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

Прежде всего, с помощью парного тега <CAPTION> мы можем дать таблице заголовок. Текст заголовка помещают внутрь этого тега, который, в свою очередь, находится внутри тега <TABLE> (листинг 5.7).

Заголовок таблицы выводится над ней, а текст его выравнивается по центру таблицы. При желании мы можем его как-то оформить, воспользовавшись знакомыми нам по главе 3 тегами:

<CAPTION><STRONG>Это таблица<STRONG></CAPTION>

Обычно тег <CAPTION> помещается сразу после открывающего тега <TABLE> — так логичнее. Но не имеет значения, в каком месте HTML-кода таблицы он присутствует — заголовок все равно будет помещен Web-обозревателем над таблицей.

Кроме того, мы можем логически разбить таблицу HTML на три значащие части — секции таблицы:
— секцию заголовка, в которой находится строка с ячейками заголовка, формирующая ее «шапку»;

— секцию тела, где находятся строки таблицы, составляющие основные данные;

— секцию завершения со строками, формирующими «поддон» таблицы (обычно в «поддоне» располагают итоговые данные и различные примечания).

Секцию заголовка таблицы формирует тег <THEAD>, секцию тела — <TBODY>, а секцию завершения — <TFOOT>. Все эти теги парные, помещаются непосредственно в тег <TABLE> и содержат теги <TR>, формирующие строки таблицы, которые входят в соответствующую секцию (листинг 5.8).

Секции таблицы Web-обозреватель никак не отображает и не выделяет на Web-странице. Они просто делят таблицу на три логические части. Однако мы можем задать для тегов, формирующих секции таблицы, какое-то представление, которое будет управлять их отображением. Подробнее об этом мы узнаем в части II.

НА ЗАМЕТКУ

Тег <TABLE> поддерживает необязательный атрибут SUMMARY, с помощью которого мы можем задать примечание к таблице. Это примечание вообще не показывается на экране, однако может использоваться другими средствами вывода Web-страниц, напри-мер, Web-обозревателями для слабовидящих, зачитывающими содержимое Web-страниц. Так или иначе, примечание к таблицам практически никогда не задается.

Чтобы закрепить полученные знания, давайте применим их к таблице — списку версий HTML, который мы недавно создали на Web-странице index.htm. Над этой таблицей мы вставили абзац с текстом «Список версий HTML:», который так и просится в заголовки. Заодно разделим таблицу на секции заголовка и тела. («Поддона» наша таблица не имеет, так что обойдемся без секции завершения.)

В листинге 5.9 представлен исправленный фрагмент HTML-кода Web-страницы index.htm, который создает эту таблицу.

Сохраним исправленную Web-страницу и откроем ее в Web-обозревателе. И сразу увидим, что текст «Список версий HTML» теперь выровнен по центру таблицы. Это и неудивительно — ведь мы превратили его в заголовок таблицы. Сама же таблица ничуть не изменилась (что тоже понятно — ведь ее секции Web-обозреватель никак не выделяет).

 

таблиц с двумя заголовками | Инициатива веб-доступности (WAI)

в учебнике по таблицам

Обзор

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

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

Кроме того, для идентификации таблицы в документе можно использовать элемент . Это особенно полезно для пользователей программ чтения с экрана, просматривающих веб-страницу в «табличном режиме», где они могут переходить от таблицы к таблице. Дополнительные сведения и рекомендации по использованию элемента приведены на странице Заголовок и сводка.

Таблица с ячейками заголовка в верхней строке и первом столбце

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

Все ячейки заголовка размечены как ячеек с добавленными атрибутами scope .

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

Пример

Слоты доставки:
Понедельник Вторник Среда Четверг Пятница
09:00 – 11:00 Закрыто Открыть Открыть Закрыто Закрыто
11:00 – 13:00 Открыть Открыть Закрыто Закрыто Закрыто
13:00 – 15:00 Открыть Открыть Открыть Закрыто Закрыто
15:00 – 17:00 Закрыто Закрыто Закрыто Открыть Открыть
Фрагмент кода
 <таблица>
  Слоты доставки:
  
    <тд>
    Понедельник
    Вторник
    Среда
    Четверг
    пятница
  
  
    09:00 – 11:00
    Закрыто
    Открыть
    Открыть
    Закрыто
    Закрыто
  
  
    11:00–13:00
    Открыть
    Открыть
    Закрыто
    Закрыто
    Закрыто
  
  […]

Полный код для «Таблица с ячейками заголовка в верхней строке и первом столбце»

Таблица со смещенным столбцом ячеек заголовка

В этой таблице ячейки заголовков строк находятся во втором, а не в первом столбце. Подход аналогичен приведенным выше примерам: область ячеек заголовка в верхней строке устанавливается равной col . Используя значение строки для области , назначает ячейки заголовка во втором столбце ячейкам данных слева и справа от отдельной ячейки заголовка.

Пример

Отпуска за последние шесть месяцев
ID Имя июль август сентября октябрь ноябрь декабря
215 Абель 5 2 0 0 0 3
231 Аннет 0 5 3 0 0 6
173 Бернар 2 0 0 5 0 0
141 Джеральд 0 10 0 0 0 8
99 Майкл 8 8 8 8 0 4
Фрагмент кода
 […]

  215
  Абель
  <тд>5
  <тд>2
  <тд>0
  <тд>0
  <тд>0
  <тд>3

[…]

Полный код для «Таблица со смещенным столбцом ячеек заголовка»

Помогите улучшить эту страницу

Пожалуйста, поделитесь своими идеями, предложениями или комментариями по электронной почте в общедоступном списке wai-eo-editors@w3. org или через GitHub.

Электронная почта Fork & Edit на GitHubNew GitHub Issue

Вернуться к началу

таблиц с одним заголовком | Инициатива веб-доступности (WAI)

в учебнике по таблицам

Обзор

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

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

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

Примечание

Некоторые программы чтения с экрана будут читать «Дата — Событие — Место проведения» в ячейке «Место проведения», поскольку направление элементов неоднозначно.

Пример

Концерты:

Дата Событие Место проведения
12 февраля Вальс со Штраусом Главный зал
24 марта Обелиски Западное крыло
14 апреля Что Главный зал
Фрагмент кода
 <таблица>
  
    Дата
    Событие
    Место проведения
  
  
    12 февраля
    Вальс со Штраусом
    Главный зал
  
  […]

Таблица с ячейками заголовка только в первом столбце

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

Пример

Концерты:

Дата 12 февраля 24 марта 14 апреля
Событие Вальс со Штраусом Обелиски Что
Место проведения Главный зал Западное крыло Главный зал
Фрагмент кода
 <таблица>
  
    Дата
    12 февраля
    24 марта
    14 апреля
  
  
    Событие
    Вальс со Штраусом
    Обелиски
    Что
  
  
    Место проведения
    Главный зал
    Западное крыло
    Главный зал

Таблица с неоднозначными данными

В этом примере данные (имя, фамилия и город) нельзя отличить друг от друга, не зная, какому заголовку они соответствуют. Атрибут scope со значением col определяет направление ячеек заголовка и связывает их с соответствующими ячейками данных.

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

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