CSS: оформление таблиц. Примеры оформления

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

В таблицах можно преобразить практически всё. Красивое оформление таблиц CSS подразумевает использование оформления границ, фона таблицы, фона ячеек, промежутка между ними и многого другого. Рассмотрим самое основное.

Граница таблицы

Стиль оформления таблицы CSS всегда подразумевает игру с границей (рамкой). Все таблицы по умолчанию не обводятся рамкой. То есть она равна 0 пикселям. Но это можно исправить при помощи свойства border.

Можно указать внешнюю рамку для всей таблицы:

table { border: 3px solid black- }

Благодаря этой строчке у всех таблиц на сайте, где используется этот стиль, будет черная рамка. Обратите внимание, что граница только по краям, но не внутри таблицы. Для ячеек и строк рамка задается иначе.

th, td {border: 3px solid black-}

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

Слово solid обозначает сплошное оформление. Указывать можно и другие значения.

Чаще всего используется именно сплошная рамка, поскольку она смотрится более привлекательно и не отвлекает внимания от основного контента сайта.

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

table {border-top: 1px solid red- }

Так можно задать рамку только для верхней части таблицы. Аналогично и для любых других сторон, просто вместо top пишем: right, left или bottom.

Заголовок таблицы

Заголовок таблицы можно указать при помощи тега . У этого тега можно в CSS прописать много свойств для более тонкой настройки. В CSS оформление таблиц хорошо тем, что можно маневрировать элементами так, как вы хотите.

Этот заголовок отображается так же, как стандартно в книгах (например "Таблица 1").

Указать можно и расположение этого заголовка свойством caption-side (top или bottom). Выравнивание слева или справа задается свойством text-align.

Фон таблицы

Фоном таблицы может быть какой-нибудь цвет или рисунок. Цвет задается свойством background-color. Названия свойств полностью соответствуют употребляющимся в речи. Это облегчает запоминание во много раз.

Цвет можно указывать как названием, так и различными кодировками. Кроме этого, можно указать следующее:

• Transparent - прозрачность элемента.
• Inherit - цвет такой же, как и у родительского элемента.
• Initial - значение по умолчанию.

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

Кроме этого, фоном может быть изображение. Для этого в стиле прописывается свойство background-image. Путь указывается вот так:

url(`URL`)

Путь до файла может быть как относительным, так и абсолютным.

Более сложную заливку можно делать градиентом:

• linear-gradient();
• radial-gradient();
• repeating-linear-gradient() и repeating-radial-gradient() - повтор градиента.

Фон ячеек

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

Кроме чередования, можно указывать и номер конкретного столбца или строки. Например вот так:

• tr:nth-child (even) { ... } - указание чередования строк;
• tr:nth-child (1) { ... } - указание свойства конкретной строки;
• td:nth-child (even) { ... } - указание чередования столбцов;
• td:nth-child (1) { ... } - указание свойства конкретного столбца.

Кроме чередования и номеров, можно указывать - первый (td:first-child) или последний (td:last-child).

Промежуток между ячейками

В CSS оформление таблиц позволяет убрать промежутки между ячейками. По умолчанию они есть. Например, если задать рамку в таблице без настроек расстояния между границами, то будет вот такой результат.

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

border-collapse: collapse

Но бывает и так, что расстояние, наоборот, нужно увеличить. Причем размер промежутков можно указать как между столбцами, так и между строками. Для этого указываем следующее значение (вместо collapse):

border-collapse:separate

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

border-spacing: 20px.

Если нужно указать разное расстояние между строками и колонами, то указывается два значения:

border-spacing:10px20px.

Разница в браузерах

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

Выше приведен пример толщины рамки для цифровых значений.

Далее приведем пример толщины рамки для констант.

Стили рамок также сильно отличаются.

Поэтому при разработке всегда смотрите результат в разных браузерах.

В CSS оформление таблиц рекомендуется делать с проверкой типа браузера. Особенно большая проблема раньше была с пользователями со старыми версиями Internet Explorer.

Совсем продвинутые разработчики могут в зависимости от браузера подключать совершенно разные CSS файлы. А кто-то делает проверки в каждом или каком-нибудь конкретном стиле (классе).

Больше всего проблем возникает с тенями.

CSS: оформление таблиц, примеры

Оформление может быть самым разнообразным. Всё зависит от сайта в целом и его дизайна. Всё должно сочетаться и не пестрить цветами. Также большую роль вносит и вкус разработчика. Чувство прекрасного у всех разное.

Приведем примеры различных таблиц. На рисунке выше показано использование наклона и игра с цветом фона и границ.

Многим будет интересен пример красивого аккуратного оформления, которое не будет резать глаза пользователям. Такой вариант уместен практически в любой ситуации.

Края можно делать скругленными. Смотрится довольно красиво.

Заключение

Как видите, для оформления внешнего вида таблиц в CSS существует огромное количество инструментов. У каждого параметра также огромное количество вариантов значений. Если пользоваться всем этим сразу, можно создавать шедевры. Особенно если делать адаптивный дизайн под все браузеры.

Главное при оформлении - не переборщить с эффектами. Всё нужно делать в меру. На первых порах верстальщики любят экспериментировать и используют сразу все свои знания. В итоге таблицы оказываются перенасыщенными свойствами. Старайтесь избегать этих ошибок.

Более того, некоторые параметры могут мешать друг другу. Например, незачем указывать цвет фона таблицы, если при этом еще там установлен фоновый рисунок, который будет перекрывать указанный цвет.