Таблицы и стили

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
TABLE {
background: maroon; /* Цвет фона таблицы */
color: white /* Цвет текста */
}

TD {
background: navy /* Цвет фона ячеек */
}
</style>
</head>
<body>

<table cellpadding="4" cellspacing="1">
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>

</body>
</html>

В данном примере получим синий цвет фона у ячеек (тег <TD>) и красный у заголовка (тег <TH>). Это связано с тем, что стиль для селектора TH не определен, и он заимствуется у родителя, в данном случае, у селектора TABLE. А цвет для селектора TD указан явно, вот ячейки и «заливаются» синим цветом.

То же самое происходит и с цветом текста. Для всех элементов таблицы в примере он установлен белым.

Результат данного примера показан ниже.

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

Поля внутри ячеек

Полем называется расстояние между краем содержимого ячейки и ее границей. Обычно для этой цели применяется параметр cellpadding тега <TABLE>. Он определяет значение поля в пикселах со всех сторон ячейки. Допускается использовать стилевой параметр padding, добавляя его к селектору TD, как показано в примере 2.

Пример 2. Поля в таблицах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
TABLE {
background: white; /* Цвет фона таблицы */
color: white /* Цвет текста */
}

TD, TH {
background: maroon; /* Цвет фона ячеек */
padding: 5px /* Поля вокруг текста */
}
</style>
</head>
<body>

<table cellspacing="1">
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>

</body>
</html>

В данном примере с помощью группирования селектором поля установлены одновременно для селектора TD и TH.

Результат данного примера показан ниже.

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

Замечание

Если применяется стилевой параметр padding для ячеек таблицы, то действие атрибута cellpadding тега <TABLE> игнорируется.

Границы и рамки

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

Использование параметра cellspacing

Известно, что атрибут cellspacing тега <TABLE> задает расстояние между ячейками таблицы. Если используется разный цвет фона таблицы и ячеек, то между ячейками возникнет сетка линий, цвет которых совпадает с цветом таблицы, а толщина равна значению параметра cellspacing в пикселах. В вышеприведенном примере 2 этот эффект показан, поэтому повторять его не будем.

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

Применение атрибута border

Стилевой атрибут border одновременно задает цвет границы, ее стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать производные этого параметра — border-left, border-right, border-top и border-bottom, они соответственно определяют границу слева, справа, сверху и снизу.

Применяя border к селектору TABLE, мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек (пример 3).

Пример 3. Добавление двойной рамки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
TABLE {
background: #dc0; /* Цвет фона таблицы */
border: 5px double #000 /* Рамка вокруг таблицы */
}

TD, TH {
padding: 5px; /* Поля вокруг текста */
border: 1px solid #fff /* Рамка вокруг ячеек */
}
</style>
</head>
<body>

<table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>

</body>
</html>

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

Результат примера показан ниже.

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

Обратите внимание, что в месте состыковки ячеек образуются двойные линии. Они получаются опять же за счет параметра cellspacing тега <TABLE>. Хотя в коде примера этот атрибут нигде не фигурирует, браузер использует его по умолчанию. Если задать <table cellspacing=”0”>, то получим не двойные, а одинарные линии, но удвоенной толщины. Для изменения указанной особенности применяется стилевой атрибут border-collapse со значением collapse, который добавляется к селектору TABLE (пример 4).

Пример 4. Создание одинарной рамки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
TABLE {
border-collapse: collapse; /* Убираем двойные границы между ячейками */
background: #dc0; /* Цвет фона таблицы */
border: 4px solid #000 /* Рамка вокруг таблицы */
}

TD, TH {
padding: 5px; /* Поля вокруг текста */
border: 2px solid green /* Рамка вокруг ячеек */
}
</style>
</head>
<body>

<table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>

</body>
</html>

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

Результат примера показан ниже.

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

Замечание

При добавлении border-collapse: collapse значение параметра cellspacing тега <TABLE> игнорируется.

Выравнивание содержимого ячеек

По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег <TH>, он определяет заголовок, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 5).

Пример 5. Выравнивание содержимого ячеек по горизонтали

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
TABLE {
border-collapse: collapse; /* Убираем двойные линии между ячейками */
width: 300px /* Ширина таблицы */
}

TH {
background: #fc0; /* Цвет фона ячейки */
text-align: left /* Выравнивание по левому краю */
}

TD {
background: #fff; /* Цвет фона ячеек */
text-align: center /* Выравнивание по центру */
}

TH, TD {
border: 1px solid black; /* Параметры рамки */
padding: 4px /* Поля вокруг текста */
}
</style>
</head>
<body>

<table>
<tr><th>Заголовок 1</th><td>Ячейка 1</td><td>Ячейка 2</td></tr>
<tr><th>Заголовок 2</th><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>

</body>
</html>

В данном примере содержимое тега <TH> выравнивается по левому краю, а содержимое тега <TD> — по центру. Результат примера показан ниже.

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

Выравнивание по вертикали в ячейке всегда происходит по ее центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью атрибута vertical-align, как показано в примере 6.

Пример 6. Выравнивание содержимого ячеек по вертикали

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
TABLE {
border-collapse: collapse; /* Убираем двойные линии между ячейками */
width: 300px /* Ширина таблицы */
}

TH, TD {
border: 1px solid black; /* Параметры рамки */
text-align: center; /* Выравнивание по центру */
padding: 4px /* Поля вокруг текста */
}

TH {
background: #fc0; /* Цвет фона ячейки */
height: 40px; /* Высота ячеек */
vertical-align: bottom; /* Выравнивание по нижнему краю */
padding: 0px /* Убираем поля вокруг текста */
}
</style>
</head>
<body>

<table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>
</table>

</body>
</html>

В данном примере устанавливается высота заголовка <TH> как 40 пикселов и выравнивание текста происходит по нижнему краю. Результат примера показан ниже.

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

Учебник по HTML и CSS

HTML

CSS

Статьи