www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Оформление таблиц > Таблицы и стили

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

контентовая версия  

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

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

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

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

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

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблицы</title>
<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.

Рис. 1

Рис. 1. Изменение цвета фона

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

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

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

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблицы</title>
<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.

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

Рис. 2

Рис. 2. Поля в ячейках

Замечание

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

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

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

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

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

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

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

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

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

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

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблицы</title>
<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>

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

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

Рис. 3

Рис. 3. Граница вокруг таблицы и ячеек

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

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

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблицы</title>
<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>

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

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

Рис. 4

Рис. 4. Граница вокруг таблицы

Замечание

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

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

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

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

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблицы</title>
<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> — по центру. Результат примера показан ниже.

Рис. 5

Рис. 5. Выравнивание контента в ячейках

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

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

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблицы</title>
<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: 0; /* Убираем поля вокруг контента */
}
</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 пикселов и выравнивание контента происходит по нижнему краю. Результат примера показан на рис. 6.

Рис. 6

Рис. 6. Выравнивание контента в ячейках

Статья опубликована: 04.10.2009 Последнее обновление: 17.04.2009
Поиск по сайту
Оформление таблиц
Разделы
Теги по теме

TABLE
Элемент TABLE служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов TR и TD.

TD
Предназначен для разработки одной ячейки таблицы. Тег TD должен размещаться внутри контейнера TR, который в свою очередь располагается внутри тега TABLE.

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

TR
Тег TR служит контейнером для разработки строки таблицы.

CSS (ЦСС) по теме

background
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.

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

border-collapse
Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Добавление значения collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии.

color
Определяет цвет контента элемента.

text-align
Определяет горизонтальное выравнивание контента в пределах элемента.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект