Ячейка таблицы css. Поля внутри ячеек. Расстояние между ячейками

Без стилей наша таблица выглядит совсем просто и невзрачно:

Рисунок 1. Вид таблицы без стилей.

Давайте добавим стили, чтобы она была покрасивее:

Река	Длина (км)	Водосборный бассейн
Амазонка	6992	6915000
Нил	6852	3349000
Янцзы	5800	1800000

Теперь наша таблица выглядит так:

Рисунок 2. Вид таблицы со стилями.

В этом стиле нужно обратить внимание на правило:

/* Устанавливаем подсветку строки при наведении курсора */ tr+tr:hover{ background-color: #e6e3da; }

Тут используется селектор соседнего элемента (знак плюс) и псевдокласс :hover ,который определяет стиль элемента при наведении на него курсора мыши.

Нам же не нужно менять при наведении фоновый цвет (background-color ) шапки таблицы, так? Нам нужно менять фоновый цвет для всех строк, кроме первой.

Соседний селектор tr+tr будет применён ко всем строкам, кроме первой. Подробно про соседние селекторы читайте тут. А псевдокласс :hover указывает что применять стиль из правила CSS нужно только при наведении курсора.

Сейчас мы имеем вполне реальный пример таблицы. Только следует учесть, что таблиц на странице может быть несколько и не на все нужно наложить этот стиль. Для того, чтобы стиль работал только на одну таблицу, присвоим ей класс, читайте классы CSS .

В примере ниже комментарий только к добавленому коду.

Река	Длина (км)	Водосборный бассейн
Амазонка	6992	6915000
Нил	6852	3349000
Янцзы	5800	1800000

В работе этого примера ничего не изменилось, но и не должно было. Просто если сейчас вы сохраните этот пример себе на компьютер, а в примере добавите вторую таблицу, например скопируете имеющийся код таблицы, но удалите class ="river ", но стиль будет применён только к таблице с установленным классом. Это простые основы CSS.

Второй пример

Теперь поставим такую задачу: нужно выделить первый столбец светло-серым цветом.

Для решения этой задачи будем использовать псевдокласс :first-child . При помощи этого псевдокласса можно обратиться к первым ячейкам каждой строки.

Имя:	Джек
Фамилия:	Лондон

Это очень простой пример. А давайте используя дочерние селекторы обратимся к этим элементам.

В нашем коде у тега предок , а у него предок

, то есть дочерний селектор должен быть таким:

Имя:	Джек
Фамилия:	Лондон

И теперь мы видим, что наш стиль не работает. Почему? Ведь селектор на первый взгляд указан правильно. Всё дело в том, что после тега

всегда есть тег . Он есть, даже если он не прописан в коде. Поэтому работать будет код:

Имя:	Джек
Фамилия:	Лондон

Этот момент в работе с таблицами нужно обязательно знать.

Теперь ещё один момент, хотя он не имеет прямого отношения к таблицам, но при работе с ними могут часто возникать подобные вопросы. Рассмотрим его на примере этого кода. Например, мы хотим установить красный фоновый цвет для ячеек последней строки. Будем использовать для этого класс (class ="my-td ").

Имя:	Джек
Фамилия:	Лондон

В результате класс сработал во второй ячейке ("Лондон"), но не сработал в первой ячейке, для которой сработал селектор table > tbody> tr > td:first-child .

Почему так случилось?

Потому что селектор table > tbody> tr > td:first-child имеет больший "вес" (значимость) для CSS, т.к. он более конкретизирован.

Как это исправить?

Можно использовать более конкретизированный селектор для определения класса: table > tbody> tr > td.my-td .

Можно использовать правило !important . Это правило повышае приоритет стиля, это использование этого правила считается крайним случаем.

Имя:	Джек
Фамилия:	Лондон

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

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

1. чем конкретнее селектор, тем больше его вес;
2. id главнее class .

Конечно, эта тема напрямую не связана с таблицами HTML, мы лишь рассмотрели пример приоритетности селекторов на примере таблиц.

Но, что касается CSS, то следует помнить, что CSS плохо работает по выбору ячеек таблицы (тег ). Класс лучше присваивать строке (тег ), а потом с помощью селектора с псевдоклассом td:nth-child(n) указывать нужную ячейку.

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

width и height

Задают соответственно ширину и высоту таблицы. Без этих свойств параметры определяются автоматически и зависят от содержимого контейнера

. Значения устанавливаются в любых единицах длины CSS, но зачастую используются пиксели (px ) и проценты (% ). Последние настраивают ширину относительно родительского элемента, первые же задают абсолютную величину.

Table {width: 450px; height: 80%;}

caption-side

Указывает, где будет размещён заголовок таблицы, описанный тегом

, поэтому в том случае, когда требовалось оставить ячейку без содержимого, но отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел (). Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1–2 пиксела, из-за чего широкое распространение получил однопиксельный прозрачный рисунок. Действительно, такой рисунок можно масштабировать на свое усмотрение, но он на веб-странице никак не отображается.

К счастью эпоха однопиксельных рисунков и всяческих распорок на их основе прошла. Браузеры достаточно корректно работают с таблицами и без присутствия содержимого ячеек.

Для управления видом пустых ячеек используется свойство empty-cells , при значении hide граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком. Ячейка считается пустой в следующих случаях:

• нет вообще никаких символов;
• в ячейке содержится только перевод строки, символ табуляции или пробел;
• значение visibility установлено как hidden .

Добавление неразрывного пробела воспринимается как видимое содержание, т.е. ячейка уже будет не пустой (пример 2.10).

Пример 2.10. Пустые ячейки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

. Свойству можно задавать значения:

• 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 ).

Помня это, оформим несложную таблицу, частично прокомментировав код.

Пример таблицы

Цены	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;

Задаём расстояние от содержимого ячеек до их границ равным восьми пикселям.

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

Цвет фона ячеек

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору TABLE . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Хотя свойство background не наследуется, для ячеек значением фона по умолчанию выступает transparent , т.е. прозрачность, поэтому эффект заливки фона получается и у ячеек. Если одновременно с TABLE задать цвет у селектора TD или TH , то этот цвет будет установлен в качестве фона ячейки (пример 2.3).

Пример 2.3. Цвет фона

Заголовок 1	Заголовок 2
Ячейка 3	Ячейка 4

В данном примере получим синий цвет фона у ячеек (тег

) и красный у заголовка (тег	). Это связано с тем, что стиль для селектора TH не определен, поэтому «просвечивается» фон родителя, в данном случае, селектора TABLE . А цвет для селектора TD указан явно, вот ячейки и «заливаются» синим цветом. Результат данного примера показан на рис. 2.4. Рис. 2.4. Изменение цвета фона Поля внутри ячеек Полем называется расстояние между краем содержимого ячейки и её границей. Обычно для этой цели применяется атрибут cellpadding тега . Он определяет значение поля в пикселах со всех сторон ячейки. Допускается использовать стилевое свойство padding , добавляя его к селектору TD , как показано в примере 2.4. Пример 2.4. Поля в таблицах XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx Заголовок 1 Заголовок 2 Ячейка 3 Ячейка 4 В данном примере с помощью группирования селекторов поля установлены одновременно для селектора TD и TH . Результат примера показан на рис. 2.5. Рис. 2.5. Поля в ячейках Если применяется стилевое свойство padding для ячеек таблицы, то действие атрибута cellpadding тега игнорируется. Расстояние между ячейками Для изменения расстояния между ячейками применяется атрибут cellspacing тега . Влияние этого атрибута хорошо заметно при использовании границ вокруг ячеек или при заливке ячеек цветом, который выделяется на фоне страницы. В качестве замены cellspacing выступает стилевое свойство border-spacing , оно устанавливает расстояние между границами ячеек. Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений у этого свойства два, то первое определяет горизонтальное расстояние (т.е. слева и справа от ячейки), а второе - вертикальное (сверху и снизу). Свойство border-spacing действует только в том случае, если для селектора TABLE не задано свойство border-collapse со значением collapse (пример 2.5). Пример 2.5. Расстояние между границами ячеек XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx Леонардо 5 8 Рафаэль 4 11 Микеланджело 24 9 Донателло 2 13 Результат данного примера показан на рис. 2.6. Рис. 2.6. Вид таблицы при использовании border-spacing Браузер Internet Explorer до седьмой версии включительно не поддерживает свойство border-spacing , поэтому в этом браузере для таблиц будет применяться значение cellspacing заданное по умолчанию (обычно оно равно 2px). При добавлении к селектору TABLE свойства border-collapse со значением collapse , атрибут cellspacing игнорируется, а значение border-spacing обнуляется. Границы и рамки По умолчанию границы в таблице изначально нет, а её добавление происходит с помощью атрибута border тега . Браузеры по-разному отображают такую границу, поэтому лучше не указывать этот атрибут вообще, а рисование границ возложить на стили. Рассмотрим два метода, непосредственно связанных со стилями. Использование атрибута cellspacing Известно, что атрибут cellspacing тега задаёт расстояние между ячейками таблицы. Если используется разный цвет фона таблицы и ячеек, то между ячейками возникнет сетка линий, цвет которых совпадает с цветом таблицы, а толщина равна значению атрибута cellspacing в пикселах. В вышеприведенном выше примере 2.3 этот эффект показан, поэтому повторять его не буду. Заметим, что это не совсем удобный способ создания границ, поскольку он имеет ограниченную область применения. Так можно получить только одноцветную сетку, а не вертикальные или горизонтальные линии в нужных местах. Применение свойства border Стилевое свойство border одновременно устанавливает цвет границы, её стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать производные — border-left , border-right , border-top и border-bottom , эти свойства соответственно определяют границу слева, справа, сверху и снизу. Применяя свойство border к селектору TABLE , мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек (пример 2.6). Пример 2.6. Добавление двойной рамки XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx Заголовок 1 Заголовок 2 Ячейка 3 Ячейка 4 В данном примере используется двойная рамка черного цвета вокруг самой таблицы и сплошная рамка белого цвета вокруг каждой ячейки. Результат примера показан на рис. 2.7. Рис. 2.7. Граница вокруг таблицы и ячеек Обратите внимание, что в месте состыковки ячеек образуются двойные линии. Они получаются опять же за счет действия атрибута cellspacing тега . Хотя в коде примера этот атрибут нигде не фигурирует, браузер использует его по умолчанию. Если задать , то получим не двойные, а одинарные линии, но удвоенной толщины. Для изменения указанной особенности применяется стилевое свойство border-collapse со значением collapse , которое добавляется к селектору TABLE (пример 2.7). Пример 2.7. Создание одинарной рамки XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx Заголовок 1 Заголовок 2 Ячейка 3 Ячейка 4 В данном примере создается сплошная линия зеленого цвета между ячейками и черная вокруг таблицы. Все границы внутри таблицы имеют одинаковую толщину. Результат примера показан на рис. 2.8. Рис. 2.8. Граница вокруг таблицы Выравнивание содержимого ячеек По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег	, он определяет заголовок, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 2.8). Пример 2.8. Выравнивание содержимого ячеек по горизонтали XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx Заголовок 1 Ячейка 1 Ячейка 2 Заголовок 2 Ячейка 3 Ячейка 4 В данном примере содержимое тега	выравнивается по левому краю, а содержимое тега	— по центру. Результат примера показан ниже (рис. 2.9). Рис. 2.9. Выравнивание текста в ячейках Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align , как показано в примере 2.9. Пример 2.9. Выравнивание содержимого ячеек по вертикали XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx Заголовок 1 Заголовок 2 Ячейка 1 Ячейка 2 В данном примере устанавливается высота заголовка	как 40 пикселов и выравнивание текста происходит по нижнему краю. Результат примера показан на рис. 2.10. Рис. 2.10. Выравнивание текста в ячейках Пустые ячейки Браузеры иначе отображают ячейку, внутри которой ничего нет. «Ничего» в данном случае означает, что внутрь ячейки не добавили ни рисунок, ни текст, причём пробел в расчёт не принимается. Естественно, вид ячеек различается только в том случае, если вокруг них установлена граница. При использовании невидимой рамки, вид ячеек, независимо от того, есть в них что-нибудь или нет, совпадает. Старые браузеры не отображали цвет фона пустых ячеек вида

Леонардо	5	8
Рафаэль		11
Микеланджело	24
Донателло		13

Вид таблицы в браузере Safari показан на рис. 2.11а. Та же таблица в браузере IE7 продемонстрирована на рис. 2.11б.

а. В браузере Safari, Firefox, Opera, IE8, IE9

б. В браузере IE7

Рис. 2.11. Вид таблицы с пустыми ячейками