CSS таблица зебра

Привет, друзья. Я заметил, что на мой блог стали приходить люди по запросу: CSS таблица зебра, но до этого момента именно этого материала у меня не было. Бала немного другая статья, на тему создания красивой таблицы CSS и сейчас будем исправлять ситуацию, чтобы предоставить пользователю именно ту информацию, которую он ищет. Я еще в 2011 году задался вопросом, как вставить таблицу на страницу WordPress блога и нашел для этого дела специальный плагин. Но спустя какое-то время стал избавляться от плагинов и оказалось, что таблицы можно делать при помощи CSS.

Вот реальный пример CSS таблицы зебры:

Из-за того, что строки таблицы имеют разный цвет, ее называют зеброй. Цвет, кстати, можно сделать любой. Когда я делал эту таблицу, то применил к ней еще псевдокласс hover для того, чтобы при наведении на определенный пункт, он подсвечивался. мне кажется, что так смотрится гораздо лучше. И CSS кода для такой таблицы нужен самый минимум. Вот он:

1
2
3
4
5

.wp-table{width: 450px; margin: 0 auto; border-collapse: collapse;
font-size:13px; font-family:arial; color:#333;}
.wp-table td{border: 1px solid #666;}
.wp-table tr:nth-child(odd){background:#E6EEEE;}
.wp-table tr:hover{background:#999; color:#fff; text-shadow:1px 1px 1px #333;}

Таблица на странице выглядит так:

1
2
3
4
5
6
7
8
9
10
11
12

<table class="wp-table">
<tr>
<td>№1</td>
<td>Продукт 1</td>
<td>$5</td>
</tr>
<tr>
<td>№2</td>
<td>Продукт 2</td>
<td>$5</td>
</tr>
</table>

таким образом, эту css таблицу зебру можно вставлять на любой сайт, не только на WordPress. Я подготовил для вас пример, который вы можете скачать прямо сейчас и уже спокойно разобраться, что к чему. Можно изменить ширину таблицы, сейчас она 450 пикс. Так же можно изменить цвета строк по своему усмотрению.

СКАЧАТЬ