Css-таблицы (версия 2)

Перевод статьи Вирл Питерс (Veerle Pieters)
Оригинал доступен на сайте Veerle.duoh.com

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

XHTML

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

— обязательно используйте <TH>элементы для заголовков
— не забывайте о подписи (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>
     <strong>*Когда используется атрибут &lt;abbr&gt; в заголовках</strong>
     

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

<table>
     <tr>
     <td></td>
     <th scope="col" abbr="Home">Webhosting Home for limited usage</th>
     <th scope="col" abbr="Home Plus">Webhosting Home Plus for more extended usage</th> 
     </tr>
     ...
     </table>
     

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

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

<table>
     <caption>Company X webhosting products overview</caption>
     ...
     </table>
     

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

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

<table summary="Webhosting products overview showing all available packages, what's included and what the monthly cost is with an option to order">
     <caption>Company X webhosting products overview</caption>
     ...
     </table>
     

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;
     }
     

Стилизация границ

В нижеследующем коде вы увидите, что я использую классы для оформления чередующихся строк. В то же время, если вы стремитесь сохранить ваш код максимально “чистым”, вы всегда можете использовать простой javascript, чтобы не “засорять” код. Также я добавила класс с другим стилем и другим фоновым изображением для первой колонки.

CSS для примера №1

tr.odd td {
     background:#f7fbff
     }
     tr.odd .column1 {
     background:#f4f9fe;
     }
     .column1 {
     background:#f9fcfe;
     }
     

CSS для примера №2

tr.odd td,
     tr.odd .column1 {
     background:#f4f9fe url(images/background.gif) no-repeat;
     }
     .column1 {
     background:#f9fcfe;
     }
     

Оформление элементов <thead> и <tfoot>

Я использовала разное оформление для заголовков таблицы:

thead th {
     background:#f4f9fe;
     text-align:center;
     font:bold 1.2em/2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
     color:#66a3d3;
     }
     

Для стилизации нижней части таблицы, я добавила элемент <strong> для заголовков и <em> элемент для цен:

tfoot th {
     background:#f4f9fe;
     text-align:center;
     }
     

Это оформление для элементов, оформленных через <strong>:

tfoot th strong {
     font:bold 1.2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
     margin:.5em .5em .5em 0;
     color:#66a3d3;
     }
     

А это – CSS для цен, оформленных через <em>:

tfoot th em {
     color:#f03b58;
     font-weight: bold;
     font-size: 1.1em;
     font-style: normal;
     }
     

Создание фонового изображения

Откройте в Adobe Photoshop новый документ 25 на 600 пикселей. Создайте новый слой с тонким вертикальным градиентом. Выберите светло-синий оттенок как цвет фона и еще более светлый для заднего плана (это тот цвет, который будет использоваться в качестве фонового цвета в CSS). В случае, если ячейка расширится вертикально, она будет заполнена определенным цветом. Выберите инструмент “Gradient” и перетащите вертикальную линию снизу вверх, зажав Shift.

Создайте еще один новый слой, выберите “Pencil” и убедитесь, что толщина установлена в 1 пиксель. Нарисуйте горизонтальные линии, начав c верхнего левого угла, и, удерживая клавишу Shift, перетяните в правый угол по горизонтали. Сделайте то же самое по вертикали.

Да, вы сделали это! Надеюсь, что вам понравилось это руководство и вы узнали некоторые ценные вещи :)