Стилизация строк таблицы
Довольно часто для наглядности данных приставленных в таблице требуется стилизовать строки, таким образом, чтобы каждые четные либо нечетные строки или колонки имели свой цвет фона или текста. Этот метод ранее не поддерживался в старых браузерах, и для кроссбраузерности приходилось это дело выполнять с помощью скриптов. Сегодня же эти правила перестают быть из тех, что поддерживаются некоторыми браузерами, и в подавляющем большинстве браузеров работают.
Стили для сток прописываются в таком виде:
tr:nth-child(even) { background: #CCC; } tr:nth-child(odd) { background: #FFF; }
В результате чего мы можем добиться такого вот вида:
Month | ’94 | ’95 | ’96 | ’97 | ’98 | ’99 | ’00 | ’01 | ’02 |
---|---|---|---|---|---|---|---|---|---|
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 |
На самом деле правило позволяет не только задавать параметры для четных/нечетных полей, но и допускаются произвольные интервалы. К примеру, для длинных списков вы могли бы задавать такие интервалы:
li:nth-child(5n+3) {font-weight: bold; }
Стилизация колонок таблицы
Мы знаем, как можно стилизовать строки таблицы, теперь давайте посмотрим, как можно стилизовать колонки таблицы, таким же образом, как и в примере указанном выше. Для стилизации колонок таблицы нам необходимо внутри таблицы, перед тем как идут теги tr td указать теги col:
<table> <colgroup><col><col><col><col><col><col><col><col><col><col></colgroup> <tr><th>Month<th>'94<th>'95<th>'96...
Сделаем первую колонку таблицы желтым цветом, затем, все последующие каждые вторые колонки серым цветом.
col:first-child {background: #FF0; } col:nth-child(2n+3) {background: #CCC; }
Month | ’94 | ’95 | ’96 | ’97 | ’98 | ’99 | ’00 | ’01 | ’02 |
---|---|---|---|---|---|---|---|---|---|
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 |