Статьи

Опубликовано 23.02.2008 // Тэги: css, html, photoshop // Комментарии: 0

Перевод статьи Вирл Питерс (Veerle Pieters)

Оригинал доступен на сайте Veerle.duoh.com

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

XHTML

Если вы знакомы с той самой статьей, вы, возможно, помните, что я предлагала читателю ознакомиться с материалом Bring on the tables. Объяснить лучше Роджера (Roger) эту публикацию я не могу. Тем не менее, я предлагаю вам краткий перечень советов, связанных с версткой таблиц с учетом accessibility:

— обязательно используйте элементы для заголовков
— не забывайте о подписи (caption) вашей таблицы, в особенности, если вы имеете дело с более чем одной таблицей на странице;
— используйте краткие атрибуты для описания содержания таблицы;
— разделите вашу таблицу на секции путем группировки строк таблицы, используя, если необходимо, <thead>, <tfoot> и <tbody> -элементы.

Зачем использовать заголовки и строки в таблице?

В этом два преимущества. Во-первых, “правильные” таблицы доступны для людей, использующих экранную лупу (screen reader). Во-вторых, это облегчает стилизацию таблиц посредством CSS. Вы можете назначить всем <th> элементам разные стили, и это будет отличать ячейки от тех, которые используют <td> элемент. Добавление строкового атрибута поможет читателям со слабым зрением лучше различать таблицы. Я и вы легко увидим разницу между ячейками, но и люди со слабым зрением не всегда различают два вида заголовков: одна из ячеек относится к строке, другая – к столбцу. Мы задействуем строковой параметр для того, чтобы “объяснить” предназначение заголовков и как они связаны с данными ячейками.

<table>
<tr>
<td></td>
<th scope="col">Webhosting Home</th>
<th scope="col">Webhosting Home Plus</th> 
</tr>
<tr>
<th scope="row">Data usage</th>
<td>1 GB per month</td>
<td>2 GB per month</td>
</tr>
</table>

*Когда используется атрибут <abbr> в заголовках

Если заголовки достаточно длинные, вы можете вписать дополнительные строки с использованием аббревиатуры <abbr> как атрибута.

…



Webhosting Home for limited usage
Webhosting Home Plus for more extended usage
 

Для чего нужны подписи (captions)?

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

…

Company X webhosting products overview

Для чего нужно резюме?

Чтение таблицы для людей со слабым зрением требует от них много терпения, а подпись зачастую дает только намек на содержание таблицы. Давайте описание заранее, прежде чем читатели будут вникать в смысл данных таблицы. Резюме может дать людям гораздо больше дополнительной информации о том, что они читают.

…

Company X webhosting products overview

CSS

Настало время рассказать о стиле и цвете. У меня для вас два примера:

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

Во втором примере, соответственно, есть фоновое изображение.

Стилизация ячеек

В CSS-примере ниже я обозначила стили границ. Граница вида collapse предназначена для ячеек, не имеющих отступов.

table {
width:90%;
border-top:1px solid #e5eff8;
border-right:1px solid #e5eff8;
margin:1em auto;
border-collapse:collapse;
}

td {
color:#678197;
border-bottom:1px solid #e5eff8;
border-left:1px solid #e5eff8;
padding:.3em 1em;
text-align:center;
}