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

  Александр Маврин   2 комментария

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

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

№1 Продукт 1 $5
№2 Продукт 2 $5
№3 Продукт 3 $5
№4 Продукт 4 $5
№5 Продукт 5 $5
№6 Продукт 6 $5
№7 Продукт 7 $8
№8 Продукт 8 $8
№9 Продукт 9 $8
№10 Продукт 10 $5
№11 Продукт 11 $12
№12 Продукт 12 $10
№13 Продукт 13 $12
№14 Продукт 14 $12
№15 Продукт 15 $12

Из-за того, что строки таблицы имеют разный цвет, ее называют зеброй. Цвет, кстати, можно сделать любой. Когда я делал эту таблицу, то применил к ней еще псевдокласс 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 пикс. Так же можно изменить цвета строк по своему усмотрению.

СКАЧАТЬ

Добавить страницу в закладки

2 комментария
  1. Neoptolem:

    У Вас очень полезный блог!))
    Удачи!

  2. Классный материал. Спасибо автору

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *