Site icon Vavik96

Создаем “таблицу-зебру”

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

 Для создания “зебры” в таблице, можно воспользоваться JS. Но, такой метод будет довольно хлопотный. Можно создать “зебру” вручную, то есть ручками добавлять классы к тегу <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;    /* Цвет фона */
}

Источник

Exit mobile version