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

Февраль 02, 2014   Александр Маврин   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 не будет опубликован. Обязательные поля помечены *