А в этой статье я расскажу об их оформлении с помощью CSS. Для форматирования таблиц каскадные стили используют перечисленные ниже свойства.
width и height
Задают соответственно ширину и высоту таблицы. Без этих свойств параметры определяются автоматически и зависят от содержимого контейнера
. Значения устанавливаются в любых единицах длины CSS, но зачастую используются пиксели (px
) и проценты (%
). Последние настраивают ширину относительно родительского элемента, первые же задают абсолютную величину.
Table {width: 450px; height: 80%;}
caption-side
Указывает, где будет размещён заголовок таблицы, описанный тегом
. Свойству можно задавать значения:
- top
- расположить над таблицей.
- bottom
- разместить под таблицей.
Эксклюзивно для обозревателя Firefox доступны значения left
(заголовок слева) и right
(справа от таблицы), но другие браузеры их не понимают.
Table {caption-side: top;}
border-collapse
Помогает избежать ситуаций, когда границы ячеек образуют двойные рамки. На рисунке ниже показан как раз такой случай.
Так рамки ячеек отображаются по умолчанию. Правило border-collapse: separate;
даёт такой же эффект. Чтобы решить проблему, нужно объявить border-collapse: collapse;
(результат показан на рисунке ниже).
border-spacing
Определяет расстояние между границами ячеек. Правило задаётся сразу для всей таблицы. Если значение одно, то оно установит расстояние и по горизонтали, и по вертикали. Если значения два, то первое задаст расстояние по горизонтали, второе - по вертикали. Свойство несовместимо с правилом table {border-collapse: collapse;}
.
Table {
border: 4px double #FCA360;
border-collapse: separate;
border-spacing: 10px 20px;
}
td {
padding: 3px;
border: 1px solid #FCA360;
}
Задаёт таблице следующее оформление:
empty-cells
Указывает, будет ли отображаться фон и границы ячейки, если она пуста. Значение у свойства может быть одно из двух:
- show
- показывать границы и фон (по умолчанию).
- hide
- скрыть их. Если все ячейки строки пусты, то будет скрыта, соответственно, вся строка. Если таблице задано правило border-collapse: collapse;
, то свойство игнорируется.
table-layout
Указывает браузеру, как определять ширину ячеек таблицы, основываясь на их содержимом.
- auto
. Ширина определяется автоматически. При этом либо суммируется ширина всех столбцов, либо берётся значение свойства width
, если таблице оно задано. Браузер сначала загружает таблицу, потом анализирует её, определяя ширину, и только после этого отображает.
- fixed
. Фиксированная ширина, которая определяется по первой строке.
Пример оформления таблицы
Не забывайте, что таблице можно задавать и другие универсальные правила, например, как мы это делали с высотой (height
) и шириной (width
).
Помня это, оформим несложную таблицу, частично прокомментировав код.
border-collapse
Пример таблицы
| Цены | 2014 |
2015 | 2016 |
| Хлеб | 16 |
18 | 21 |
| Сахар | 35 |
44 | 50 |
| Соль | 8 |
8,50 | 9 |
В браузере таблица будет выглядеть, как показано ниже.
width: 50%;
Задаём ширину таблицы в половину от родительской. 50% берётся от ширины контейнера
, потому что других родителей у неё нет. То есть таблица будет занимать ровно половину окна браузера.
caption-side: bottom;
Размещаем заголовок снизу, под таблицей.
border: 4px solid #006400;
Задаём таблице цветную рамку толщиной 4 пикселя.
border-collapse: collapse;
Объединяем границы ячеек.
table-layout: fixed;
Настраиваем способ определения браузером ширины таблицы.
font-size: 13px;
Задаём размер шрифта заглавных ячеек.
font-weight: bold;
Делаем текст внутри них жирным.
background: #ADFF2F;
Устанавливаем цвет фона ячеек.
border-top: 4px solid #006400; border-bottom: 3px solid #FF8C00;
Настраиваем верхние и нижние рамки.
color: #039;
Определяем цвет текста.
padding: 8px;
Задаём расстояние от содержимого ячеек до их границ равным восьми пикселям.
Табличные данные
- информация, которую можно отобразить в виде таблицы и логически разделить по столбцам и строкам. Для отображения табличных данных на веб-страницах используется HTML тег
, представляющий из себя контейнер с содержимым таблицы. Контент HTML таблицы описывается построчно, каждая строка начинается с открывающего тега и заканчивается закрывающим тегом
.
Внутри тега
располагаются ячейки таблицы, представленные тегами | или | . Именно ячейки содержат весь контент таблицы, отображаемый на веб-странице.
Рамка таблицы
По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border . Но стоит обратить внимание на то, что если добавить рамку только к элементу , то она отобразиться вокруг всей таблицы. Для того, чтобы ячейки таблицы тоже имели рамку, надо будет установить свойство border и для элементов | и | . Table, th, td { border: 1px solid black; }
Попробовать »
Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing , которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально.
Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing , то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse . Оно может принимать два значения:
- separate:
является значением по умолчанию. Ячейки отображаются на небольшом расстоянии друг от друга, каждая ячейка имеет свою собственную рамку.
- collapse:
соединяет соседние рамки в одну, все промежутки между ячейками, а также между ячейками и рамкой таблицы игнорируются.
Название документа
| Имя | Фамилия |
|---|
| Гомер | Симпсон |
| Мардж | Симпсон |
| Имя | Фамилия |
|---|
| Гомер | Симпсон |
| Мардж | Симпсон |
Попробовать »
Размер таблицы
После добавления рамок к ячейкам таблицы стало заметно, что содержимое ячеек слишком близко расположено к краям. Для добавления свободного пространства между краями ячеек и их содержимым можно воспользоваться свойством padding : Th, td { padding: 7px; }
Попробовать »
Размер таблицы зависит от ее содержимого, но часто возникают ситуации, когда таблица оказывается слишком узкой и появляется необходимость ее растянуть. Ширину и высоту таблицы можно изменять с помощью свойств width и height , задавая нужные размеры или самой таблице или ячейкам: Table { width: 70%; }
th { height: 50px; }
Попробовать »
Выравнивание текста
По умолчанию текст в заголовочных ячейках таблицы выравнивается по центру, а в обычных ячейках текст выровнен по левому краю, используя свойство text-align можно управлять выравниванием текста по горизонтали.
CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align:
- top:
текст выравнивается по верхней границе ячейки
- middle:
выравнивает текст по центру (значение по умолчанию)
- bottom:
текст выравнивается по нижней границе ячейки
Название документа
| Имя | Фамилия |
|---|
| Гомер | Симпсон |
| Мардж | Симпсон |
Попробовать »
Чередование фонового цвета строк таблицы
При просмотре больших таблиц, содержащих много строк с большим количеством информации, бывает трудно отследить, какие данные относятся к конкретной строке. Чтобы помочь пользователям сориентироваться, можно использовать два разных фоновых цвета поочередно. Для создания описанного эффекта можно использовать селектор class , добавляя его к каждой второй строке таблицы:
Название документа
| Имя | Фамилия | Положение |
|---|
| Гомер | Симпсон | отец |
| Мардж | Симпсон | мать |
| Барт | Симпсон | сын |
| Лиза | Симпсон | дочь |
Попробовать »
Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс:nth-child , позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса:nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные): Tr:nth-child(odd) { background-color: #EAF2D3; }
Попробовать »
Изменение фона строки при наведении курсора
Еще одним способом повышения удобочитаемости табличных данных является изменение фонового цвета строки при наведении на нее курсора мыши. Это поможет выделить нужное содержимое таблицы и повысит визуальное восприятие данных.
Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс:hover к селектору строки таблицы и задать нужный цвет фона: Tr:hover { background-color: #E0E0FF; }
Попробовать »
Выравнивание таблицы по центру
Выравнивание HTML таблицы по центру возможно только в том случае, если ширина таблицы меньше, чем ширина её родительского элемента. Чтобы выровнять таблицу по центру, надо воспользоваться свойством margin , задав ему минимум два значения: первое значение будет отвечать за внешний отступ таблицы сверху и снизу, а второе - за автоматическое выравнивание по центру: Table { margin: 10px auto; }
Попробовать »
Если вам нужны разные отступы сверху и снизу таблицы, то можно задать свойству margin три значения: первое будет отвечать за отступ сверху, второе за выравнивание по горизонтали, а третье за отступ снизу: Table { margin: 10px auto 30px; }
В недавнем прошлом популярность таблиц была невероятно высока, они использовались не только для представления табличных данных, но также были основным средством для формирования структуры документа (не смотря на ряд недостатков). В настоящее время для верстки документа все больше используют блочный элемент 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. Таблица с заголовком.
Секции таблицы
С помощью секций, которые представляют собой парные теги, таблицу можно разбить на логически части. Они не отображаются браузером на странице, однако для каждой из них можно задать свое представление. Существуют следующие три логические части:
-
- Секция заголовков столбцов;
-
- Секция основы таблицы;
-
- Секция итоговых данных, резюмирующая всю таблицу;
, , , помещаются внутрь таблицы , и должны содержать теги :
Заголовок Таблицы
| Заголовок 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. Для объединения ячеек по вертикали
основной части документа (часть ), воспользуйтесь атрибутом ROWSPAN со значением 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 стили применяемые к таблице
|
|
| |
