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

Ноябрь 09, 2012   Александр Маврин   19 комментариев

Таблица CSS
Здравствуйте, уважаемые читатели. Я как-то писал о том, как вставить таблицу на страницу 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. Внутренняя тень при нажатии курсора.

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

10203040
50607080
90100110120

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

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

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

СКАЧАТЬ

Не стесняйтесь делиться записью в социальных сетях. Спасибо


19 комментариев
  1. Спасибо. Простенько и со вкусом. Но все-равно вручную прописывать код таблицы не очень удобно. Хоть бы кнопочку какую-нибудь.

  2. Serhiy:

    И что в них красивого? 💡

  3. Здравствуйте! Хорошо что я вас нашел. Помогите пож-ста, как сделать так чтобы при клике на ячейку открывалась страница. Опишу подробно: Хочу сделать каталог организаций, в каждой ячейке должна быть краткая информация об организации, типа визитки, а при клике открываться страница с подробным описанием об организации. И как отделить ячейки друг от друга примерно на 2 3 мм?

    • Как должна открываться страница при клике? Если в новом окне, то прописать ссылки в ячейках с атрибутом blank
      А если хотите, чтобы ячейки плавно разворачивались, то нужно использовать JS. Для этих целей существуют уже готовые решения, которые можно доработать под себя. Например вот это.

  4. Спасибо вам большое! Мне понравилась вот это http://css-tricks.com/examples/MiddleBoxLinks/. Я скачал а дальше как? как добавить на страницу wordpress? Спасибо

    • Закачать на сервер 2 Javascript файла и подключить их к wordpress шаблону. Добавить в таблицу стилей вашего wordpress шаблона стили из скачанного CSS файла. На страницу вставлять блоки DIV и в них необходимое содержимое. Если разбираетесь в HTML и CSS, то должно получится.

  5. здравствуйте! это опять я))Готовые решения мне не подошли, мне подошла ваша таблица. и я с вопросом: почему когда вписываю в ячейку текст, то строка растягивается? а мне нужно чтобы все ячейки были одинаковыми. Подскажете как решить проблему? вот ссылка biznes.tuvado.ru Заранее спасибо!

  6. Спасибо! Со всем разобралась, вставила ссылки и пр. Все замечательно! Но…Возник конфликт стилей (в частности, у топа комментаторов). Как прописать класс конкретной таблицы? К сожалению, своими силами разобраться не удалось. Буду признательна за подсказку.

  7. Александр, я разобралась, сделала свой класс, все получилось! Спасибо!!

  8. Замечательно!Такое я и сам сделал,а вот может подскажите,как сделать чтоб при нажатии на ячйку,все элементы менялись местами,потом разъезжались в стороны и только потом из центра появлялось окно с информацией?…Спасибо)

  9. Так подскажите код на элементарном примере…Замучался искать что то подобное.. ❓

  10. Юрий:

    Вечер добрый! Может немножко не совсем в тему. Если возможно, подскажите как сделать таблицу tablePress адаптивной? Заранее СПАСИБО! Ну или что ИЗВИНИТЕ 🙂

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

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