наверх





Таблица-зебра - это такая таблица, в которой после каждой строчки изменяется цвет фона строки. То есть, к примеру, белый-черный-белый-черный... Это то и сделаем, используя лишь CSS.


Для создания "зебры" в таблице, можно воспользоваться JS. Но, такой метод будет довольно хлопотный. Можно создать "зебру" вручную, то есть ручками добавлять классы к тегу <tr>. Такой способ подойдет для небольших таблиц. А что, если строчек в таблице много? То тогда без автоматизирования будет долго. А что бы не пользоваться JS, можно использовать псевдокласс CSS3 :nth-child.

Данный псевдокласс было создан для добавления свойств тегу, идущему под определенным номером. Можно задать, что бы свойства задавались лишь четным или нечетным тегам. В основном данный псевдокласс можно применить именно то что в таблицах. Правила написания :nth-child:

селектор:nth-child(значение) {
...
}


Значениями могут быть:

odd - нечетные числа (1, 3, 5, 7 ...).
even - четные числа (2, 4, 5, 6 ...).
число - любое число от одного.

Но у данного метода есть минус: он не поддерживается в старых браузерах.

И, что бы создать стиль "зебры" в таблице, нужно сделать следующие:

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;    /* Цвет фона */
}





Просмотр демо-варианта


Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.