Каскадные таблицы стилей
CSS советы & приемы

Состояние

Предупреждение: во время написания (февраль 2003) основные браузеры не поддерживали 'nth-child' свойство (представленное в ноябре 2001) и только некоторые поддерживали COL элемент.

Even and odd rules

Один способ улучшить читабельность больших таблиц - это раскрасить альтернативные ряды. Например, таблица ниже имеет светло-серый фон для четных рядов и белый для нечетных. Правила для этого предельно просты:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Month	1994	1995	1996	1997	1998	1999	2000	2001	2002
Jan	14	13	14	13	14	11	11	11	11
Feb	13	15	12	15	15	12	14	13	13
Mar	16	15	14	17	16	15	14	15	15
Apr	17	16	17	17	17	15	15	16	16
May	21	20	20	21	22	20	21	20	19
Jun	24	23	25	24	25	23	25	23	24
Jul	29	28	26	26	27	26	25	26	25
Aug	29	28	27	28	28	27	26	28	26
Sep	24	23	23	26	24	24	24	22	21
Oct	20	22	20	22	20	19	20	22
Nov	18	17	16	17	16	15	14	15
Dec	15	13	13	14	13	10	13	11

Фактически CSS позволяет не только разрешить четные/нечетные альтернативы, но и произвольные интервалы. Ключевые слова 'even' (четный) и 'odd' (нечетный) являются просто удобными условными обозначениями. Например, для длинного списка рекомендуется сделать следующее:

li:nth-child(5n+3) {font-weight: bold}

Это говорит о том, что каждый 5й список пустой, начиная с 3го. Другим словами, пункты под номерами 3, 8, 13, 18, 23 и т.д. будут пустыми.

Четные и нечетные колонки

То же самое действует для колонок таблицы, но для этого нужен элемент в документе, который соответствует колонке. Для этого HTML обеспечивает COL. Таблица должна начинаться с одного COL для каждой колонки:

<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Month<th>1994<th>1995<th>1996...

(COL может использоваться для других вещей, кроме стилей, но в этом случае все что нам нужно, чтобы присутствовали COL элементы.) Следующие правила дают первой колонке желтый фон, а затем каждой другой колонке, начиная с третьей, серый:

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}

Month	1994	1995	1996	1997	1998	1999	2000	2001	2002
Jan	14	13	14	13	14	11	11	11	11
Feb	13	15	12	15	15	12	14	13	13
Mar	16	15	14	17	16	15	14	15	15
Apr	17	16	17	17	17	15	15	16	16
May	21	20	20	21	22	20	21	20	19
Jun	24	23	25	24	25	23	25	23	24
Jul	29	28	26	26	27	26	25	26	25
Aug	29	28	27	28	28	27	26	28	26
Sep	24	23	23	26	24	24	24	22	21
Oct	20	22	20	22	20	19	20	22
Nov	18	17	16	17	16	15	14	15
Dec	15	13	13	14	13	10	13	11

Фон рядов (TR) прописан до фона колонок (COL), так что если вы хотите убедиться, что фон колонок видимый, не устанавливайте фон на ряды.