Статьи

Таблица в CSS

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

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

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

Моя статья о создании CSS-календаря в чем-то близка с идеей верстки таблиц, основанных на CSS. Согласитесь, данные в таблицах могут быть скучными. Это — веская причина, чтобы привлечь внимание к информации и сделать ее приятной для чтения, насколько оно возможно. Презентация, дизайн плюс некоторые базовые правила accessibility нам в этом помогут.

Преимущества такого подхода

Стилизация таблицы с CSS имеет одно явное достоинство: разметка отделяется от визуального представления. Это придает большую гибкость оформления вашей таблицы. Вы можете стилизовать каждую сторону табличной ячейки по раздельности. Разве это не приятно? :)

Приступая к делу

Сначала я сделала простой набросок в Photoshop. Я достаточно долго экспериментировала с подбором некоторых цветовых комбинаций, маркеров, цветов для альтернативных колонок и т. д. Если вы не определились с цветами, вам в помощь этот цветовой калькулятор.

На следующем шаге Я экспортировала эти три изображения в фон заголовка:

bg_header.jpg
bullet1.gif
bullet2.gif

Структура разметки

Код BBEdit предельно прост. Вот отрывок:

<table id="mytable" cellspacing="0" summary="The technical
specifications of the Apple PowerMac G5 series">
<caption>Table 1: Power Mac G5 tech specs </caption>
<tr>
<th scope="col" abbr="Configurations" class="nobg">Configurations</th>
<th scope="col" abbr="Dual 1.8GHz">Dual 1.8GHz</th>
<th scope="col" abbr="Dual 2GHz">Dual 2GHz</th>
<th scope="col" abbr="Dual 2.5GHz">Dual 2GHz</th>
</tr>
<tr>
<th scope="row" class="spec">Model</th>
<td>M9454LL/A</td>
<td>M9455LL/A</td>
<td>M9457LL/A</td>
</tr>
…

CSS-стили

Для заглавных ячеек я использовала изображение, сделанное лишь частично видимым. В частности, вы можете увидеть это на примере верхней левой ячейки. Для ее я завела специальнй класс (.nobg – т. к. я привыкла к аббревиации ‘bg’ вместо ‘background’). Вот как выглядит код:

th {
font: bold 11px “Trebuchet MS”, Verdana, Arial, Helvetica,
sans-serif;
color: #6D929B;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}

th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}

Заголовки с левой стороны, которые отображаются как ячейки (заголовки спецификации) привязаны к альтернативным стилям:

th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(images/bullet1.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
sans-serif;
}

th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(images/bullet2.gif) no-repeat;
font: bold 10px “Trebuchet MS”, Verdana, Arial, Helvetica,
sans-serif;
color: #B4AA9D;
}

Ячейки таблицы, содержащие техническую спецификацию Power Mac G5, также связаны с альтернативными стилями:

td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #6D929B;
}

td.alt {
background: #F5FAFA;
color: #B4AA9D;
}

Это финальный результат:

demo таблицы
CSS-стили

Надеюсь, вам понравились мои таблицы ;-)