Як створити таблицю в html з незвичайним ефектом

Таблиці хороші тим, що в них можна розміщувати великі обсяги інформації і виглядати це буде дуже компактно. Але в даному уроці ми створимо не просто таблицю, в якій буде якась інформація, а таблицю в якій буде в 2 рази більше даних. Вона буде займати стільки ж місця, скільки займає звичайна таблиця, але з містити більше інформації.

На тему таблиць раджу вивчити наступні статті:

Основи CSS - Урок 14. Таблиці
Красиві таблиці на CSS + Відео
Гарний плаваючий заголовок у таблиці

Як зазвичай спершу самостійно подивіться на приклад і спробуйте клікнути на елемент таблиці:

Подивитися прімерСкачать

Приклад розкритих елементів:

Як встановити цю таблицю на свій сайт?

1 Підключаємо іконочние шрифти

між тегами і підключаємо іконки від Font Awesome:

HTML КОД

1	lt;link rel="Stylesheet" href="Http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"gt;

Це буде не зовсім стандартна таблиця, тому що вона буде складатися тільки з блоків:

HTML КОД

12345678910111213

lt;div id="Services" class="Cf"gt;class="Service"gt;lt;div class="Service-icon"gt;lt;span class="Fa fa-paper-plane"gt; lt;/spangt;lt;br/gt; Заголовок 1lt;/divgt;lt;div class="Service-description"gt;lt;pgt; Lorem ipsum dolor sit amet, consectetur adipisicing elit modi.lt;/pgt;lt;/divgt;lt;/sectiongt; ...lt;/divgt;

Трохи поясню структуру:

Рядки: з 2 по 11 - окремий елемент таблиці.
Рядки: з 3 по 7 - видима частина елемента з іконкою.
Рядки: з 8 і 10 - частина елемента, яка з`являється при натисканні.

2 CSS стилі

На даному етапі у нас присутня тільки структура таблиці і немає жодного стилю. Давайте ж зробимо таблицю більш красивою:

CSS КОД

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364

#services {max-width: 850px-margin: 30px auto 0-}#services .service .service-icon: hover {cursor: pointer-color: # 28B595-}#services .service .service-icon span {display: block--webkit-transition: all 0.1s linear--moz-transition: all 0.1s linear-transition: all 0.1s linear-}#services .service .service-icon span.fa {font-size: 40px-}#services .service .service-icon {text-align: center--webkit-transition: all 0.1s linear--moz-transition: all 0.1s linear-transition: all 0.1s linear-}#services .service .service-icon: hover span {position: relative-bottom: 5px-}#services .service {width: 33%-float: left-padding: 0.5em-min-height: 200px-overflow: hidden-position: relative-border: 1px solid #eee-}#services .service .service-icon,#services .service .service-description {position: absolute-width: 100%-height: 100%-top: 0-left: 0-background: #fff-padding: 50px 0-color: # 222-}#services .service .service-description {left: 100%-background: # 323A45-color: #fff-padding: 50px-}#services .service .service-description: hover {cursor: pointer-}

Але це ще не все, тому що на мобільних пристроях ми можемо розмістити не по три елементи в рядку, а послідовно зменшувати кількість елементів в залежності від розміру екрану пристрою. Робиться це за допомогою медіа запитів:

CSS КОД

1234567891011

@media screen and (max-width: 600px) {#services .service {width: 50%-}}@media screen and (max-width: 320px) {#services .service {width: 100%-}}

3 jQuery

Залишилося підключити бібліотеку jQuery і обробити клік мишкою по елементу:

CSS КОД

123456789101112131415161718

lt;script src="Https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"gt; lt;/scriptgt;lt;scriptgt; $ (document) .ready (function () {$ ( `. service`). click (function () {var $ this = $ (this) -if ($ this.hasClass ( "open")) {$ this.find ( `. service-icon`). animate ({left: "0"}) - $ this.find ( `. service-description`). animate ({left: "100%"}) - $ this .removeClass ( "open") -} else {$ this.find ( `. service-icon`). animate ({left: "-100%"}) - $ this.find ( `. service-description`). animate ({left: "0"}) - $ this.addClass ( "open") -}}) -}) -lt;/scriptgt;

На цьому установка завершена!

висновок

Розміщуючи інформацію в таблицях ми хочемо якомога більше компактно розмістити велику кількість даних. З цією таблицею можна розмістити на тієї ж частини сторінки 2 рази більше інформації. Звичайно не завжди можна застосувати цей спосіб, але потрібно завжди пам`ятати про нього. Тому раджу додати в закладки, щоб його можна було швидко знайти його.

Успіхів!

джерело: оригінал

З повагою, Юрій Німець

Поділися в соц мережах: