Гарне оформлення таблиць - скрипти для сайтів

Розглянемо, як можна красиво оформити таблицю за допомогою CSS3. Завдяки новим селекторам з'являється можливість створити унікальний стиль без додавання додаткових класів розмітки.

Так буде виглядати наша основна структура таблиці:

У нас є всі елементи, які потрібні для таблиці: header. body і footer.
В даному уроці ми будемо оформляти порівняльні таблиці тарифів хостингу. У прикладі буде три різні варіанти оформлення таблиць. Застосувати той чи інший стиль можна дуже просто, потрібно лише додати до таблиці клас table1. table2 або table3.

Стиль 1 - .table1

Перша таблиця буде в зелених тонах з градієнтом для описових осередків, елменти "th".
Почнемо з загального стилю для таблиці:

Ми хочемо, щоб між осередками таблиці було деякий простір, тому застосуємо властивість border-collapse: separate;

У елементів "th" шапки буде такий стиль:

Для Firefox і Webkit браузерів ми використовували градієнт з трьох кольорів. За допомогою border-radius закргуляем верхню ліву і верхню праву межу осередків.

Тепер займемося елементом "th", котрий є порожньо:

Низ або footer таблиці буде ііметь наступний стиль:

Просто додаємо тінь для поліпшення тексту.

Внутрішні елементи таблиці матимуть світло-зелений фон і білу тінь для тексту:

Також додамо невеликий радіус і кордон, всього 2px до осередків. Це створить невеликий світиться ефект. Ми могли б використовувати і box-shadow для створення схожого ефекту.

Тепер, ми будемо додавати іконку до всіх осередків, у яких є SPAN з класом .check. Досягається це додаванням такого стилю:

Властивість content дозволяє нам додавати певний контент всередині елемента (в даному випадку це зображення). Також ми могли б додати якийсь текст сюди. У цьому випадку ми можемо використовувати псевдо-класи :: after або :: before. які вставлять текст після або перед контентом.

Стиль 2 - .table2

Друга таблиця буде трохи по елегантніше. Чорний header і footer. У цій таблиці не буде порожнього простір між осередками.

Верх і низ таблиці (header і footer) матимуть однаковий вигляд, тому визначимо загальний стиль для них:

Елемент th - опис footer матиме такий стиль:

Осередки footer 'а, для яких ми вже створили спільний з осередками header' а стиль, матимуть інше властивість box-shadow. У хедера тінь падає вгору, у футера ж тінь буде падати вниз. Також змінимо і колір тексту:

Повернемося до хедер, і вкажемо, що якщо осередок порожня, то вона не повинна мати ніяких стилів, тобто призначимо такі:

І для останнього елемента осередку хедера приберемо праву межу:

Для першого осередку хедера і останньої клітинки тіла таблиці приберемо кордону:

Тепер додамо стилі для осередків є описом осередків тіла таблиці, тобто внутрішня частина лівого стовпця:

А такі стилі для осередків тіла таблиці:

І вставимо іконку до елемента SPAN.

Стиль 3 - .table3

І остання на сьогодні таблиця у якій заголовки стовпців матимуть різні кольори.

Основний стиль для таблиці буде таким:

Загальний стиль для всіх осередків th в хедері буде таким:

Порожні осередки будуть без фону і кордонів:

А тепер ми хочемо вибрати конкретні осередки th в хедері і осередки td в футере і надати кожній з них свій унікальний вид. Користуватися будемо селектором: nth-child (номер):

Стиль для всіх осередків футера буде таким:

Додамо внутрішні відступи для осередків:

Рядок з цінами буде у нас з більшим і жирним шрифтом:

Колонки тіла таблиці матимуть альтернативний стиль, тому будемо знову використовувати селектор: nth-child. але в цей раз зі значеннями even і odd:

Додамо праву межу для останніх td в рядку:

Опис з лівого частини має такий стиль:

І додаємо іконку:

Ну ось і все три варіанти розібрані.

СКАЧАТИ Стрибок: 2112
13,57 Kb Хто скачав?