Делаем красивую современную таблицу на CSS 3

Здравствуйте, уважаемые читатели. Я как-то писал о том, как вставить таблицу на страницу WordPress блога, но это делается при помощи плагина. Посмотрел я на этот плагин и обнаружил в нем несчетное количество файлов и вес всего этого около 3-х мегабайт! Мне совсем непонятно для чего все это, ведь нужно просто вставить на страницу обычную таблицу. Как известно, плагины очень сильно нагружают сайт и нужно стараться всеми доступными способами от них избавиться. Это позволит ускорить загрузку сайта в разы. Поэтому мы постараемся создать простую таблицу и красиво ее оформим при помощи CSS3.

Для начала напишем стандартный HTML код таблицы и вставим в ячейки какую-нибудь информацию. Я добавил для примера цифры.

1
2
3
4
5
6
7
8

<table>
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
<td>40</td>
</tr>
</table>

Теперь добавим нашей таблице красивое оформление и разберем подробнее CSS код.

1
2
3
4
5
6
7
8

table{width:500px;height:350px;cursor:pointer;
margin:100px auto;}
tr{background:#cffffc;text-align:center;}
td{padding:30px;border:1px solid #111;color:#888;}
td:hover{color:#000;font-weight:bold;background:#FFFFCC;
box-shadow:0 0 80px 1px #CC9900 inset;}
td:active{background:#FFFFCC;
box-shadow:0 0 8px 1px #333 inset;}

Давайте теперь разбираться, что же такое мы здесь написали, какие-то непонятные символы, жуть. 🙂

1. Ширина таблицы: 500 пикселей и высота: 350 пикселей и курсор в виде руки.
2. Выравнивание таблицы по центру страницы.
3. Цвет фона ячеек и выравнивание содержимого по центру.
4. Внутренние отступы, цвет рамки и цвет содержимого.
5. Цвет фона, содержимого при наведении курсора. Содержимое становится полужирным.
6. Внутренняя тень без смещения по осям с размытием, насыщенностью и другим цветом.
7. Цвет фона ячейки при нажатии.
8. Внутренняя тень при нажатии курсора.

В итоге у вас должна получится примерно вот такая таблица, которая реагирует на наведение и нажатие курсора.

Можно самостоятельно изменять параметры, которые здесь установлены. Например поставить цвет, который вам больше нравится, цвет тени и радиус ее размытия и смещения. Вот таким вот образом можно вставлять такие таблицы на любую страницу сайта, если это потребуется.

Скачайте исходник таблицы и разбирайтесь. Пишите в комментариях, что у вас получилось в результате экспериментов. Если вам нужна css таблица зебра, то она есть здесь.

СКАЧАТЬ