Таблица зебра – это таблица с чередованием цветов.
Для создания “зебры” в таблице, можно воспользоваться JS. Но, такой метод будет довольно хлопотный. Можно создать “зебру” вручную, то есть к каждому тегу tr добавлять классы. Такой способ подойдет для небольших таблиц. А что, если строчек в таблице много? То тогда без автоматизирования будет долго. А что бы не пользоваться JS, можно использовать псевдокласс CSS3 :nth-child.
Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.
Синтаксис
элемент:nth-child(odd | even | <число> | <выражение>) {...}
Значения могут быть:
odd – Все нечетные номера элементов.
even – Все четные номера элементов.
число – Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
выражение – Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2…
Итак приступим к работе, для начала нам надо создать таблицу.
<table cellspacing="0" border="1" >
<tr>
<td>№</td>
<td>Страна</td>
<td>Площадь,км<sup>2<sup></td>
</tr>
<tr>
<td>1</td>
<td>Россия</td>
<td>17 075 400</td>
</tr>
<tr>
<td>2</td>
<td>Канада</td>
<td>9 984 670</td>
</tr>
<tr>
<td>3</td>
<td>Китай</td>
<td>9 596 960</td>
</tr>
<tr>
<td>4</td>
<td>США</td>
<td>9 372 610</td>
</tr>
<tr>
<td>5</td>
<td>Бразилия</td>
<td>8 547 000</td>
</tr>
</table>
Атрибут cellspacing определяет, сколько нужно отступить между ячейками. 0 – отменяет отступы.
Атрибут border – это границы таблицы
Добавляем стили
table tr:nth-child(odd){
background-color: #c8c8c8;
}
Этим мы задали, что если тег tr будет по счету нечетным, то ему будет задан цвет фона #c8c8c8.
Теперь приукрасим нашу таблицу
table, tr, td {
color:#27271E; /* Цвет текста */
border:1px solid #8C7676; /* Границы */
border-collapse:collapse; /* Убираем двойную обводку между ячейками */
}
td {
padding:5px; /* Внутренний отступ */
}
