Таблицы являются широко используемым элементом для представления различных
данных на презентациях, лекциях, в рекламных листовках и не только. Благодаря
своей наглядности, универсальности и простоте таблицы также повсеместно
применяют на сайтах, чтобы лучше донести до читателя нужный материал. Однако в
большинстве случаев на веб-страницах используют весьма убогие средства по
представлению табличных данных. Вместе с тем воспользовавшись мощью стилей,
можно весьма расширить средства по оформлению таблиц, удачно вписать их в дизайн
сайта и нагляднее представить табличные данные.
Далее речь пойдет об оформлении таблиц с помощью стилей. Но в начале
обговорим некоторые моменты, которые помогут лучше понять, что же мы делаем.
Цвет фона одновременно всех ячеек таблицы устанавливается через свойство
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> игнорируется. |
Пример 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 |
|