Заголовок таблицы

HTML таблицы продвинутые возможности и доступность

Во второй статье этого модуля мы рассматриваем ещё несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.

Необходимые знания:	Базовый HTML (Введение в HTML).
Цель:	Изучить более продвинутые возможности HTML таблиц и их доступность.

Добавление заголовка к таблице с помощью

table> caption>Dinosaurs in the Jurassic periodcaption> . table> 

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

Упражнение: Добавление заголовка

Давайте попробуем это, вернёмся к примеру который мы ранее встретили в прошлой статье.

1. Откройте расписание занятий школьного учителя по языку в конце статьи HTML таблицы основы, или сделайте копию нашего timetable-fixed.html файла.
2. Добавьте подходящий заголовок к таблице.
3. Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.

Примечание: Этот пример можно найти на GitHub по ссылке timetable-caption.html (живой пример).

Добавление структуры с помощью , и

Когда таблицы становятся более сложными по структуре полезно дать им более структурированное определение. Отличный способ сделать это используя (en-US), и (en-US), которые позволяют вам разметить header, footer и body секции таблицы.

Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отображаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.

• Элементом нужно обернуть часть таблицы которая относится к заголовку — обычно это первая строка содержащая заголовки колонок, но это не обязательно всегда такой случай. Если вы используете / (en-US) элемент, тогда заголовок должен находиться ниже его.
• Элементом нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер всё равно отобразит его внизу таблицы).
• Элементом необходимо обернуть остальную часть содержимого таблицы которая не находится в header или footer таблицы. Этот блок располагают ниже заголовка таблицы или иногда footer таблицы, зависит от того какую структуру вы решите использовать (читать выше по тексту).

Примечание: всегда включён в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется и посмотрите HTML код в browser developer tools — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это даёт больше контроля над структурой таблицы и стилем.

Упражнение: Добавление структуры таблицы

Давайте используем эти новые элементы.

1. В первую очередь, сделайте копию spending-record.html и minimal-table.css в новой папке.
2. Попробуйте открыть это в браузере — вы увидите, что все выглядит классно, но могло бы быть лучше. Строка «SUM» которая содержит потраченные суммы кажется находится не в том месте и некоторые детали отсутствуют в коде.
3. Поместите очевидную строку заголовка внутрь элемента, строку «SUM» внутрь элемента и оставшийся контент внутрь элемента.
4. Сохраните, перезагрузите и вы увидите, что добавление элемента привело к тому, что строка «SUM» опустилась к нижней части таблицы.
5. Далее, добавьте атрибут colspan , чтобы ячейка «SUM» занимала первые четыре столбца, таким образом числовое значение «Cost» появится в последнем столбце.
6. Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в вашего HTML документа вы увидите пустой элемент . Внутри этого элемента добавьте следующие строки CSS кода:

tbody  font-size: 90%; font-style: italic; > tfoot  font-weight: bold; > 

Примечание: Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, Вступление в CSS это хорошее место для начала; у нас также есть статья конкретно о стилизации таблиц).

Ваша готовая таблица должна выглядеть примерно так:

DOCTYPE html> html> head> meta charset="utf-8"> title>My spending recordtitle> style> html  font-family: sans-serif; > table  border-collapse: collapse; border: 2px solid rgb(200,200,200); letter-spacing: 1px; font-size: 0.8rem; > td, th  border: 1px solid rgb(190,190,190); padding: 10px 20px; > th  background-color: rgb(235,235,235); > td  text-align: center; > tr:nth-child(even) td  background-color: rgb(250,250,250); > tr:nth-child(odd) td  background-color: rgb(245,245,245); > caption  padding: 10px; > tbody  font-size: 90%; font-style: italic; > tfoot  font-weight: bold; > style> head> body> table> caption>How I chose to spend my moneycaption> thead> tr> th>Purchaseth> th>Locationth> th>Dateth> th>Evaluationth> th>Cost (€)th> tr> thead> tfoot> tr> td colspan="4">SUMtd> td>118td> tr> tfoot> tbody> tr> td>Haircuttd> td>Hairdressertd> td>12/09td> td>Great ideatd> td>30td> tr> tr> td>Lasagnatd> td>Restauranttd> td>12/09td> td>Regretstd> td>18td> tr> tr> td>Shoestd> td>Shoeshoptd> td>13/09td> td>Big regretstd> td>65td> tr> tr> td>Toothpastetd> td>Supermarkettd> td>13/09td> td>Goodtd> td>5td> tr> tbody> table> body> html> 

Примечание: Этот пример можно также найти на GitHub по ссылке spending-record-finished.html (живой пример).

Источник

Заголовок таблицы

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

• left — выравнивает заголовок по левому краю таблицы. Браузер Firefox располагает текст сбоку от таблицы, Internet Explorer и Opera располагают заголовок сверху, выравнивая его по левому краю.
• right — в браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. Firefox отображает заголовок справа от таблицы.
• center — заголовок располагается сверху таблицы по ее центру. Такое расположение задано в браузерах по умолчанию.
• top — результат аналогичен действию атрибута center , но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
• bottom — заголовок размещается внизу таблицы по ее центру.

Пример 12.7. Создание заголовка таблицы

       
Изменение добычи ресурсов по годам
 
 
2003
2004
2005
 
 
Нефть
43
51
79
 
 
Золото
29
34
48
 
 
Дерево
38
57
36
 
 
  

Ниже показан результат данного примера (рис. 12.9).

Рис. 12.9. Вид заголовка таблицы в браузере Safari

HTML по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

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

Популярные задачи

• TEX
• Отступы между блоков
• Андроид в тени
• Ссылка как кнопка
• Вложенные списки
• Форма регистрации
• Объединение ячеек таблицы
• Обязательные поля формы
• Цвет и фон в таблице
• Асуанская плотина
• Батарейка
• Заголовки

Источник