Добавление некоторых свойств

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

<table>

<caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>

<tr>

<th>Volcano Name</th>

<th>Location</th>

<th>Last Major Eruption</th>

<th>Type of Eruption</th>

</tr>

<tr>

<td>Mt. Lassen</td>

<td>California</td>

<td>1914-17</td>

<td>Explosive Eruption</td>

</tr>

<tr>

<td>Mt. Hood</td>

<td>Oregon</td>

<td>1790s</td>

<td>Pyroclastic flows and Mudflows</td>

</tr>

<tr>

<td>Mt. St. Helens</td>

<td>Washington</td>

<td>1980</td>

<td>Explosive Eruption</td>

</tr>

</table>

Этот код представляется следующим образом:

Recent Major Volcanic Eruptions in the Pacific Northwest
Volcano Name	Location	Last Major Eruption	Type of Eruption
Mt. Lassen	California	1914-17	Explosive Eruption
Mt. Hood	Oregon	1790s	Pyroclastic flows and Mudflows
Mt. St. Helens	Washington	1980	Explosive Eruption

Здесь использованы следующие новые элементы:

• <caption></caption>: Элемент caption позволяет создать заголовок для данных таблицы. Большинство браузеров будут выравнивать заголовок по центру и делает его такой же ширины, как и таблица, если только для другого выравнивания текста не используется CSS.

• <th></th>: Элемент th определяет содержимое между тегами как заголовок таблицы для каждого столбца. Это помогает не только семантически описать содержимое, но также помогает представить его более аккуратно в различных браузерах и устройствах. Приведенный выше пример является наиболее упрощенным способом использования элемента th.

Дополнительная структуризация таблицы

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

<table summary="a summary of recent major volcanic eruptions in the Pacific Northwest">

<caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>

<thead>

<tr>

<th scope="col">Volcano Name</th>

<th scope="col">Location</th>

<th scope="col">Last Major Eruption</th>

<th scope="col">Type of Eruption</th>

</tr>

</thead>

<tfoot>

<tr>

<td colspan="4">Compiled in 2008 by Ms Jen</td>

</tr>

</tfoot>

<tbody>

<tr>

<th scope="row">Mt. Lassen</th>

<td>California</td>

<td>1914-17</td>

<td>Explosive Eruption</td>

</tr>

<tr>

<th scope="row">Mt. Hood</th>

<td>Oregon</td>

<td>1790s</td>

<td>Pyroclastic flows and Mudflows</td>

</tr>

<tr>

<th scope="row">Mt. St. Helens</th>

<td>Washington</td>

<td>1980</td>

<td>Explosive Eruption</td>

</tr>

</tbody>

</table>

Листинг 19.a. Окончательная разметка таблицы (html, txt)

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

Recent Major Volcanic Eruptions in the Pacific Northwest
Volcano Name	Location	Last Major Eruption	Type of Eruption
Mt. Lassen	California	1914-17	Explosive Eruption
Mt. Hood	Oregon	1790s	Pyroclastic flows and Mudflows
Mt. St. Helens	Washington	1980	Explosive Eruption
Compiled in 2008 by Ms Jen

Новыми элементами/атрибутами являются следующие:

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

• Атрибуты colspan и rowspan: Атрибут colspan создает ячейку таблицы, которая будет охватывать более одного столбца. В случае приведенного выше колонтитула, требовалось, чтобы одна ячейка таблицы охватывала всю ширину таблицы, поэтому в нем указано, что он должен охватывать четыре столбца. Альтернативно, можно добавить атрибут ячейки таблицы rowspan, который позволит ячейке таблицы охватывать несколько строк, например, <td rowspan="3">.

• Атрибут summary: Этот атрибут используется для определения сводки содержимого таблицы, для использования считывателями экрана (отметим, что вы не видите его на изображенной версии таблицы выше). Отметим, также, что в более старых рекомендациях W3C, WCAG 1.0 и HTML 4.0 говорится, что можно использовать атрибут summary, как описано выше. Однако, в более новых проектах спецификации атрибут summary не упоминается. Будет ли атрибут summary по-прежнему использоваться, пока не решено, поэтому пока будем считать, что вполне безопасно его применять. В конце концов, он ничего не меняет во внешнем представлении таблицы, и улучшает доступность.

• Атрибут scope: В тегах th можно также заметить атрибуты scope, а также то, что названия вулканов были определены как заголовки внутри строк данных! Это вполне допустимо, но, тем не менее, я отклонилась. Атрибут scope можно использовать в элементе th, чтобы сообщить считывателям экрана, что контент элемента th является заголовком для столбца или строки. Атрибут scope используется только в элементе th.