Сайт своими руками


Пособие для начинающих
Редактируем готовые шаблоны


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


» » Расширенные элементы таблицы. Пример HTML5.

Расширенные элементы таблицы. Пример HTML5.

  • Автор: Saah
  • |
  • Комментариев: 0
  • |
  • Просмотров: 393
Расширенные элементы таблицы. Пример HTML5.

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

<table>
<caption> Калории и содержание жира в наиболее популярных продуктах дневного
рациона</caption>
<col span="1" class="itemname">
<colgroup id="data">
<col span="1" class="calories">
<col span="1" class="fat">
</colgroup>
<thead>
<tr>
<th scope="col">Блюда</th>
<th scope="col">Калории</th>
<th>Жиры (г)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Куриный бульон</td>
<td>120</td>
<td>2</td>
</tr>
<tr>
<td>Салат Цезарь</td>
<td>400</td>
<td>26</td>
</tr>
</tbody>
</table>

Результат на странице:
Расширенные элементы таблицы. Пример HTML5.

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

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

Специальные возможности.
Такие элементы специальных возможностей, как подписи и сводки, предоставляют описание содержимого таблицы. Атрибуты scope и headers, предназначены для однозначного соотнесения заголовков и соответствующих им данных таблицы. Мы обсудим их позднее в этой главе.
В задачи данной книги не входит исчерпывающее исследование расширенных элементов таблиц, но если вам предстоит работать с объемными таблицами, стоит изучить эти вопросы самостоятельно. Подробную информацию вы найдете на сайте консорциума Всемирной паутины (www.w3.org/TR/html5).

ПРИМЕЧАНИЕ:
Согласно спецификации HTML5, таблица должна содержать «в следующем порядке: необязательный элемент caption, за которым могут располагаться несколько (или ни одного) элементов colgroup, далее необязательный элемент thead, затем необязательный элемент tfoot, после чего следуют несколько (или ни одного) элементов tbody или один или несколько элементов tr, далее необязательный элемент tfoot (но в общей сложности может быть только один дочерний элемент tfoot)».

Скачать пример описанных выше расширенных элементов таблицы на готовой странице в формате html: elements-html.rar [561 b] (cкачиваний: 4)


Людям интересно:


Статья опубликована: 27-03-2016, 11:13

Сохраните для себя


Оставьте комментарий.
Ваше мнение будет полезно посетителям сайта:




Имя:* E-Mail:*
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Вставка ссылкиВставка защищенной ссылки Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите код: *
Использование материалов сайта приветствуется. При копировании и размещении данной информации на сторонних ресурсах, ссылка на сайт SiteY.ru желаема.