Организация табличных данных:удобство доступа и наглядность
Решение
В соответствии со спецификацией HTML таблицы могут содержать до- полнительные элементы и атрибуты, предназначенные не для визуаль- ного оформления, а для обеспечения их корректной интерпретации про- граммами вроде экранного диктора, которыми пользуются посетители со слабым зрением. Их применение не представляет никаких трудно- стей, однако многие веб-разработчики упускают их из виду. Рассмотрим следующий пример:
chapter05/table.html (фрагмент)
<table summary=”This table shows the yearly income for years 1999 through 2002”>
<caption>Yearly Income 1999 - 2002</caption>
<tr>
<th></th>
<th scope=”col”>1999</th>
<th scope=”col”>2000</th>
<th scope=”col”>2001</th>
<th scope=”col”>2002</th>
</tr>
<tr>
<th scope=”row”>Grants</th>
<td>11,980</td>
<td>12,650</td>
<td>9,700</td>
<td>10,600</td>
</tr>
<tr>
<th scope=”row”>Donations</th>
<td>4,780</td>
<td>4,989</td>
<td>6,700</td>
<td>6,590</td>
</tr>
<tr>
<th scope=”row”>Investments</th>
<td>8,000</td>
<td>8,100</td>
<td>8,760</td>
<td>8,490</td>
</tr>
<tr>
<th scope=”row”>Fundraising</th>
<td>3,200</td>
<td>3,120</td>
<td>3,700</td>
Организация табличных данных: удобство доступа и наглядность 135
<td>4,210</td>
</tr>
<tr>
<th scope=”row”>Sales</th>
<td>28,400</td>
<td>27,100</td>
<td>27,950</td>
<td>29,050</td>
</tr>
<tr>
<th scope=”row”>Miscellaneous</th>
<td>2,100</td>
<td>1,900</td>
<td>1,300</td>
<td>1,760</td>
</tr>
<tr>
<th scope=”row”>Total</th>
<td>58,460</td>
<td>57,859</td>
<td>58,110</td>
<td>60,700</td>
</tr>
</table>
Обсуждение
В приведенном выше примере была использована таблица, содержащая элементы и атрибуты для четкого описания содержания каждой ячей- ки. Рассмотрим значение всех этих дополнительных элементов и атри- бутов более подробно.
Атрибут summary элемента table
chapter05/table.html (фрагмент)
<table summary=”This table shows the yearly income for years 1999 through 2002”>
Значение атрибута summary невидимо для пользователей броузеров, но оно будет прочтено экранным диктором. Его следует использовать, что- бы дать пользователю представление о содержании и назначении та- блицы. Эта информация не является необходимой для пользователей обычных броузеров, поскольку они могут получить ее при просмотре страницы, однако она важна для пользователей с ограниченными воз- можностями.
Элемент caption
chapter05/table.html (фрагмент)
<caption>Yearly Income 1999 - 2002</caption>
Элемент caption добавляет к таблице заголовок. По умолчанию он ото- бражается сверху, но его расположение по отношению к таблице можно изменить с помощью CSS-свойства caption-side.
table {
caption-side: bottom;
}
Зачем вообще использовать этот элемент, если можно просто разместить рядом с таблицей заголовок или текст абзаца? С помощью caption текст связывается с таблицей и далее интерпретируется в качестве ее заго- ловка – экранный диктор не сможет интерпретировать этот текст в ка- честве отдельного элемента. Вы хотите, чтобы заголовок отображался как обычный текст абзаца или заголовок третьего уровня в графиче- ском броузере? Нет ничего проще – для этого достаточно всего лишь создать соответствующие правила стилей на CSS, как вы сделали бы это для любого другого элемента.
Элемент th
<th scope=”col”>2000</th>
Элемент th предназначен для обозначения данных, используемых в ка- честве заголовка строки или столбца. В приведенном примере он при- меняется по отношению и к тем и другим; для более конкретного ука- зания используется атрибут scope тега <th>. Он может принимать значе- ние col (колонка, столбец) или row (ряд, строка) в зависимости от того, к чему относится.
Перед тем как начать оформление вида таблиц в соответствии с общим дизайном сайта, рекомендуется вначале обеспечить их доступность для пользователей таких устройств, как экранные дикторы. Доступ- ность относится к тем вопросам, решение которых большинство разра- ботчиков откладывают на потом, говоря: «Сначала разберусь с дизай- ном, а потом возьмусь за это». Однако если контроль за доступностью оставляют на конец всей разработки, то может случиться, что к нему и вовсе не возвращаются, а если и возвращаются, то для исправления возникающих проблем чаще всего требуется значительное количество времени, особенно в сложных приложениях. Если вы возьмете за пра- вило продумывать эти аспекты непосредственно в процессе разработки сайта, то вскоре обнаружите, что это стало вашей второй натурой, лишь незначительно увеличив время работы над проектом.
CSS-атрибуты позволяют оформить таблицу быстро и просто. К при- меру, в самом начале разработки сайта, в котором будет много таблиц, я создаю правило стиля с селектором класса .datatable, которое будет содержать основные описания стилей для всех таблиц и которое можно с легкостью добавить к тегу <table> каждого из них. Затем я создаю пра- вила стиля для .datatable th (ячеек с заголовком), .datatable td (обыч- ных ячеек) и .datatable caption (заголовков таблицы).
Такой подход значительно облегчает добавление новых таблиц. По- скольку все стили уже имеются, достаточно всего лишь применить по отношению к таблице класс .datatable. Если в дальнейшем потребует- ся изменить вид таблиц на сайте, достаточно отредактировать каскад- ную таблицу стилей.
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.