Таблица-зебра — это такая таблица, в которой после каждой строчки изменяется цвет фона строки. То есть, к примеру, белый-черный-белый-черный… Это то и сделаем, используя лишь CSS.
<tr>. Такой способ подойдет для небольших таблиц. А что, если строчек в таблице много? То тогда без автоматизирования будет долго. А что бы не пользоваться JS, можно использовать псевдокласс CSS3 :nth-child.
Данный псевдокласс было создан для добавления свойств тегу, идущему под определенным номером. Можно задать, что бы свойства задавались лишь четным или нечетным тегам. В основном данный псевдокласс можно применить именно то что в таблицах. Правила написания:nth-child:
селектор:nth-child(значение) {
...
}
Значениями могут быть:
odd — нечетные числа (1, 3, 5, 7 …).
even — четные числа (2, 4, 5, 6 …).
число — любое число от одного.
Но у данного метода есть минус: он не поддерживается в старых браузерах.
| N | Страна | Население (тыс. человек) |
|---|---|---|
| 1 | Китай | 1 338 613,0 |
| 2 | Индия | 1 166 079,2 |
| 3 | США | 307 212.1 |
| 4 | Индонезия | 240 271.5 |
| 5 | Бразилия | 198 739.3 |
И, что бы создать стиль «зебры» в таблице, нужно сделать следующие:
HTML
<table cellspacing="0"> <tr><th>N</th><th>Страна</th><th>Население (тыс. человек)</th></tr> <tr><td>1</td><td>Китай</td><td>1 338 613,0</td></tr> <tr><td>2</td><td>Индия</td><td>1 166 079,2</td></tr> <tr><td>3</td><td>США</td><td>307 212.1</td></tr> <tr><td>4</td><td>Индонезия</td><td>240 271.5</td></tr> <tr><td>5</td><td>Бразилия</td><td>198 739.3</td></tr> </table>
Атрибут cellspacing определяет, сколько нужно отступить между ячейками. 0 — отменяет отступы.
CSS
table tr:nth-child(odd) {
background-color:#EDEDED; /* Цвет фона */
}
Этим мы задали, что если тег <tr> будет по счету нечетный, то ему будет задан цвет фона #EDEDED. Так же можно поступить и с четными.
Оформим нашу таблицу дальше:
table, tr, td, th {
color:#969799; /* Цвет текста */
font:13pt Andale Mono, monospace; /* Размер, тип шрфита */
border:1px solid #E9E9E9; /* Обводка */
border-collapse:collapse; /* Убираем двойную обводку между ячейками */
}
td, th {
padding:5px; /* Внутренний отступ */
}
th {
font-weight:bold;
background-color:#E5E5E5; /* Цвет фона */
}