Прокачиваем таблицы с помощью CSS3

Сегодня мы вам покажем, как использовать некоторые полезные свойства CSS3, чтобы облагородить вид ваших таблиц. И это возможно, благодаря новым селекторам, которые могут обращаться к конкретным записям, ячейкам, столбцам. Таким образом, мы сможем создавать уникальные стили таблиц, без использования дополнительных классов в верстке.

Мы будем использовать градиенты -webkit и -moz, чтобы создать великолепный вид без использования изображений, и посмотрим, как вставить контент в элементы с определенным классом.

Но сначала разметка.

Разметка

В начале идет стандартная структура таблицы:

У нас есть все элементы, что используются в таблицах: заголовок (header), тело (body), и подвал (footer). В примере будем использовать данные тарифов одной хостинговой компании. И так, три разных стиля.

Таблица №1

Первая таблица будет в зеленых тонах с градиентом в заглавных ячейках (элементы “th”). Давайте начнем с основного стиля таблицы:

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

Можно использовать стили для шрифта с сайта Typechart. Это очень полезный ресурс с хорошими примерами шрифтов и готовым CSS кодом.

Элементы th в заголовке будут описаны следующим образом:

Мы используем свойство градиента для браузеров Firefox и Webkit (Safari и Chrome), чтобы создать красивый градиент из трех цветов. Свойство border-radius скругляет верхний левый и верхний правый углы ячеек.

Теперь нам нужно позаботиться об элементе th, являющимся пустым. С помощью селекторов CSS3 мы можем делать невероятные вещи, и одна из них — это выбор элементов, являющихся пустыми. Делается следующим образом:

Подвал таблицы оформляется так:

Усилим отображение контента с помощью свойства text shadow.

Внутренние ячейки таблицы оформлены следующим образом: светло-зеленый фон и белая тень текста для получения эффекта гравировки:

Добавим очень тонкий бордюр и скругления для ячеек. Получим небольшой светящийся эффект. Можно использовать свойство box shadow для получения подобного эффекта.

Теперь, нужно добавить иконку для всех ячеек, у которых есть элемент span с классом check. С помощью следующего CSS кода получим:

Это свойство позволит добавить контент (в нашем случае это изображение) внутрь элемента. Также можно добавить текст. Можно использовать свойства ::before или ::after, которые и будут определять, куда вставлять контент.

На этом все. Теперь посмотрим вторую таблицу.

Таблица №2

Вторая таблица выглядит немного элегантней первой, благодаря черному заголовку и подвалу.

В этой таблице нет свободного расстояния между ячейками:

Так как стили у заголовка и подвала похожи, пропишем их вместе:

Элемент th в футере имеет свой стиль:

Ячейки в подвале сейчас такого же стиля, что и в заголовке, нам нужно немного другое свойство box shadow. В заголовке тень указывает наверх, в подвале — вниз. Также меняем цвет текста:

Вернемся наверх и укажем для пустой ячейки стили:

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

С помощью селектора :nth-last-child мы можем указать на последний элемент ячейки в заголовке и указать, что у него нет правого бордюра:

С помощью селектора :first-child мы можем обратится к первой ячейке в заголовке, та которая пустая, и указать, что у нее бордюров нет. Также убираем бордюр у последних ячеек в теле таблицы:

Теперь добавим немного оформления для элементов th в теле таблицы:

И еще немного для остальных ячеек:

Теперь добавим иконку в элементы span с классом check:

Таблица №3

В третьей таблице будет немного больше CSS свойств, в основном, из-за разноцветных столбцов в заголовке. И то можно сделать, использя только селекторы (т.е. без дополнительных классов).

Основной стиль таблицы следующий:

Стиль для ячеек th в заголовке:

Пустые ячейки:

Теперь нам нужно выбрать с помощью селекторов определенную ячейку в заголовке, чтобы раскрасить ее в цвет. С помощью :nth-child(число) мы можем выбирать нужного потомка:

Мы также добавили скругление на ячейки, располагающиеся на углах таблицы.

Основной стиль для ячеек td в подвале:

Добавим немного воздуха для ячеек в теле таблицы:

Нам нужно, что колонка цен была с жирным шрифтом:

Столбцы в теле таблицы будут с измененными стилями. Для этого мы будем использовать селекторы :nth-child, но со значениями even и odd:

Также добавим правый бордюр в последние ячейки в теле таблицы:

Описание в заголовке будем выглядеть следующим образом:

Слева прописываем иконку:

Вот и все стили!