Стильная таблица html css
В недавнем прошлом популярность таблиц была невероятно высока, они использовались не только для представления табличных данных, но также были основным средством для формирования структуры документа (не смотря на ряд недостатков). В настоящее время для верстки документа все больше используют блочный элемент DIV.
Таблица же остается основным элементом языка HTML, которая незаменима для создания сложных конструкций, для представления табличных данных, где блочные элементы бессильны, и не обладают такой вариативностью.
Основа таблицы
Таблица является сложной конструкцией, и формируется из нескольких HTML тегов. На первом этапе она строится из блочного элемента
, который представляет фундамент, основу таблицы. Следующий этап в построении - строки таблицы
, которые формируются с помощью парных тегов
:
Заключительный этап построения таблицы является создание ячеек . Для этой цели есть две категории тегов:
- парный тег создает ячейку, которая служит заголовком столбца, данный тег является не обязательным; - обязательный парный тег создает ячейки - основу таблицы;
Заголовок 1 | Заголовок 2 | Заголовок 3 | Заголовок 4 | Заголовок 5 |
---|---|---|---|---|
Ячейка 1,1 | Ячейка 1,2 | Ячейка 1,3 | Ячейка 1,4 | Ячейка 1,5 |
Ячейка 2,1 | Ячейка 2,2 | Ячейка 2,3 | Ячейка 2,4 | Ячейка 2,5 |
Итог 1 | Итог 2 | Итог 3 | Итог 4 | Итог 5 |
Рис 1. Таблица
Как видно из кода расположенного выше, таблица содержит четыре строки (
Обратите внимание на структуру таблицы, она имеет строго вложенную иерархическую структуру, если ее нарушить и переставить теги в ином порядке, таблица, либо не отобразится на странице, либо отобразится, но не корректно. Основные правила при конструировании таблицы:
- Парный тег
основа таблицы, все остальные теги вложены в него;
- Парный тег
второй уровень таблицы или ее строка, должен быть вложен в тег ;
- Парные теги
и третий уровень таблицы или ее ячейки, должны быть вложены в тег и содержат табличные данные; - Если поместить любой другой тег или текст вне парного тега
, то эти данные будут проигнорированы и никак не отобразится на веб-странице; Заголовок таблицы
В таблице предусмотрена возможность добавления заголовка, с помощью парного тега
. В принципе его можно вставить в любое место таблицы, это не является ошибкой. По умолчанию текст заголовка выводится над таблицей.
Заголовок Таблицы Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Ячейка 1,1 Ячейка 1,2 Ячейка 1,3 Ячейка 1,4 Ячейка 1,5 Ячейка 2,1 Ячейка 2,2 Ячейка 2,3 Ячейка 2,4 Ячейка 2,5 Итог 1 Итог 2 Итог 3 Итог 4 Итог 5 Рис. 2. Таблица с заголовком.
Секции таблицы
С помощью секций, которые представляют собой парные теги, таблицу можно разбить на логически части. Они не отображаются браузером на странице, однако для каждой из них можно задать свое представление. Существуют следующие три логические части:
-
- Секция заголовков столбцов;
- - Секция основы таблицы;
- - Секция итоговых данных, резюмирующая всю таблицу;
,
, , помещаются внутрь таблицы, и должны содержать теги
: ), воспользуйтесь атрибутом ROWSPAN со значением 2:Заголовок Таблицы Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Ячейка 1,1 Ячейка 1,2 Ячейка 1,3 Ячейка 1,4 Ячейка 1,5 Ячейка 2,1 Ячейка 2,2 Ячейка 2,3 Ячейка 2,4 Ячейка 2,5 Итог 1 Итог 2 Итог 3 Итог 4 Итог 5 Объединение ячеек
Выше была рассмотрена таблица с простой структурой, а что если необходимо ее усложнить, к примеру, объединить несколько ячеек в одну. Для этого случая существуют специальные атрибуты COLSPAN и ROWSPAN тегов
и . Первый служит для объединения по горизонтали, второй по вертикали. Значением для атрибута случит число объединяемых ячеек: 1. Для объединения по горизонтали первых четырех ячеек последней строки таблицы, необходимо атрибуту COLSPAN тега
(в котором содержится текст “Итог 1”) присвоить значение 4: Итог (1+2+3+4) 2. Для объединения ячеек по вертикали основной части документа (часть
Ячейка (1,1+2,1) Ячейка (1,2+2,2) Ячейка (1,3+2,3) Ячейка (1,4+2,4) Обратите внимание, если объединять ячейки атрибутами COLSPAN или ROWSPAN, необходимо убрать из кода объединенные ячейки, кроме той с которой начинается объединение, их количество будет зависеть от значения атрибута COLSPAN, ROWSPAN.
То есть, в примере 1, объединяются четыре ячейки, начиная с первой, которой назначается атрибут COLSPAN=4 (т.к. с нее начинается объединения), остальные три необходимо удалить (т.к. они считаются объединенными). В коде останется только пятая ячейка (т.к. она не входит в объединение).
По такому же принципу будет объединение по вертикали. Во втором примере, первым четырем ячейкам строки присваивается атрибут ROWSPAN=2, в результате первые четыре нижние ячейки убираются из кода, т.к. они считаются объединенными. Кроме последней, которая не входит в объединение.
Заголовок Таблицы Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Ячейка (1,1+2,1) Ячейка (1,2+2,2) Ячейка (1,3+2,3) Ячейка (1,4+2,4) Ячейка 1,5 Ячейка 2,5 Итог 1+ Итог 2+ Итог 3+ Итог 4 Итог 5 Рис. 4. Объединение ячеек таблицы с помощью атрибутов COLSPAN, ROWSPAN.
Оформление таблиц CSS свойствами
После создания таблицы средствами HTML, переходим к следующему этапу, оформление таблицы с помощью стилей CSS, которые применим к тегам
,
, , . Рамки для ячеек
Рамку вокруг ячеек можно рисовать с помощью CSS свойства border , со следующим синтаксисом:
Border: “толщина линии” “тип начертания” “цвет”;
- толщина линии - может задаваться в пикселях (px), а также с помощью специальных зарезервированных слов: thin (2 px), medium (4 px) и thick (6 px);
- тип начертания - значения атрибута специальные слова: dotted (точечный пунктир), dashed(пунктирная линия), solid (линия), double (двойная линия) и т.д.
Рис 5. Применение к ячейкам таблицы свойства border, для обрамления каждой ячейки рамкой.
Если необходимо, чтобы рамка была только между ячейками, а не обрамляла каждую в отдельности, необходимо воспользоваться стилевым свойством border-collapse , принимающее значение:
- collapse - рамка между ячейками только одна;
- separate - каждая ячейка обрамляется собственной рамкой;
Рис 6. Применение к таблице свойства border-collapse. Соседние ячейки отделяются одной рамкой.
Размеры ячеек
По умолчание размеры ячеек, браузер формирует в зависимости от их содержания, если необходимо задать статичную форму, воспользуйтесь стилевым свойством width, height. При этом, если содержимое ячейки не помещается в одну строку, то происходит его перенос на следующую.
Рис 7. Применение свойства width и height, для задания ширины и высоты ячеек.
Отступы в ячейках
Существует два вида отступов внешние и внутренние, первый вид отступа задается между границами соседних ячеек, второй от границ ячеек до их содержимого. CSS свойства создающие отступы указаны ниже:
- padding - внутренний отступ, значение устанавливается в пикселях (px);
- border-spacing - внешний отступ, значение устанавливается также в пикселях (px). Данный параметр не следует употреблять, если {border-collapse:collapse}, т.к. отступ устанавливается между границами соседних ячеек, а при наличие указанного свойства соседние ячейки отделены лишь одной рамкой;
Рис. 8. Применение к таблице свойства padding, для задания отступов.
Расположение заголовка
По умолчанию заголовок таблицы располагается над ней, однако место положение можно менять с помощью стилевого свойства caption-side , которые принимает значения:
- top - заголовок располагается над таблицей;
- bottom - заголовок располагается под таблицей;
Цвет ячеек
Для закрашивания ячейки определенным цветом необходимо воспользоваться свойством background-color :
Рис. 10. Выравнивание содержимого ячеек свойствами text-align и vertical-align.
Оформление содержимого ячейки
Под оформление содержимого понимается форматирование текста находящегося в ячейках. Основное CSS свойство, применяемое для этой цели является font :
Рис. 11. Оформление содержимого ячейки свойством font.
Все 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. Путь указывается вот так:
Путь до файла может быть как относительным, так и абсолютным.
Более сложную заливку можно делать градиентом:
- 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 файлы. А кто-то делает проверки в каждом или каком-нибудь конкретном стиле (классе).
Больше всего проблем возникает с тенями.
CSS: оформление таблиц, примеры
Оформление может быть самым разнообразным. Всё зависит от сайта в целом и его дизайна. Всё должно сочетаться и не пестрить цветами. Также большую роль вносит и вкус разработчика. Чувство прекрасного у всех разное.
Приведем примеры различных таблиц. На рисунке выше показано использование наклона и игра с и границ.
Многим будет интересен пример красивого аккуратного оформления, которое не будет резать глаза пользователям. Такой вариант уместен практически в любой ситуации.
Края можно делать скругленными. Смотрится довольно красиво.
Заключение
Как видите, для оформления внешнего вида таблиц в CSS существует огромное количество инструментов. У каждого параметра также огромное количество вариантов значений. Если пользоваться всем этим сразу, можно создавать шедевры. Особенно если делать под все браузеры.
Главное при оформлении - не переборщить с эффектами. Всё нужно делать в меру. На первых порах верстальщики любят экспериментировать и используют сразу все свои знания. В итоге таблицы оказываются перенасыщенными свойствами. Старайтесь избегать этих ошибок.
Более того, некоторые параметры могут мешать друг другу. Например, незачем указывать цвет фона таблицы, если при этом еще там установлен фоновый рисунок, который будет перекрывать указанный цвет.
- - Секция основы таблицы;
- Парный тег