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

Таблицы и рамки

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

Чтобы четко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает параметр border тега <TABLE>, который определяет толщину рамки.

В примере 1 показано создание границы вокруг ячеек.

Пример 1. Добавление рамки к таблице

Валидный HTML
<!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>
</head>
<body>

<table width="200" cellpadding="5" border="2">
<tr>
<td>Чебурашка</td>
<td>Крокодил Гена</td>
<td>Шапокляк</td>
</tr>
</table>

</body>
</html>

Рамки созданные таким образом незначительно отличаются по своему виду в разных браузерах.

Internet Эксплорер Файер фох Опера
Internet Explorer Файер фох Opera

Рис. 1. Рамка, полученная с помощью параметра border

Чтобы получить рамку одного вида, рекомендуется применить стилевым тегом border, применяя его к ячейкам таблицы (тегу <TD> или <TH>). Однако и здесь нас подстерегают подводные камни. Поскольку рамка создается для каждой ячейки, то в местах соприкосновения ячеек получается граница удвоенной толщины. Для решения указанной особенности существует несколько путей. Самый простой — применить свойством border-collapse со значением collapse. В его задачу входит отслеживать соприкосновение линий и вместо двойной границы изображать одинарную. Этот атрибут дастаткова добавляем к тегу <TABLE>, а дальше он все сделает самостоятельно (пример 2).

Пример 2. Применение border-collapse при создании рамок таблицы

Валидный 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; /* Линия между ячейками отображается как одна */
}

TD {
 border: 2px solid green; /* Параметры рамки вокруг ячеек таблицы */
 text-align: center; /* Выравниваем контент по центру */
}
</style>
</head>
<body>

<table width="200" cellspacing="0" cellpadding="2">
<tr><td>0</td><td>X</td><td>X</td></tr>
<tr><td>0</td><td>0</td><td>X</td></tr>
<tr><td>X</td><td>X</td><td>0</td></tr>
</table>

</body>
</html>

Разница между границами таблицы при добавлении параметра border-collapse, а также без него представлена на рис. 2.

Рис. 2б a

Рис. 2б б

Рис. 2. Вид таблицы при использовании атрибута border-collapase

На рис. 2а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление параметра border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 2б).

Для разработки однотипных линий внутри таблицы можно пойти и другим путем. Следует добавляем для селектора <TD> рамку, но отменить линию справа и снизу, задавая соответствующим атрибутам значение none. Тогда при состыковке ячеек их границы не будут накладываться друг с другом по той причине, что линия будет только одна. Однако при этом методе формирования границ нет линий снизу и справа у самой таблицы. Добавляя параметры border-right и border-bottom к селектору <TABLE>, получим в итоге нужную рамку (пример 3). Для однотипности следует позаботиться, чтобы стиль, толщина и цвет границы во всех случаях совпадали.

Пример 3. Создание рамки у таблицы с помощью атрибута border

Валидный 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-right: 2px solid green; /* Граница у таблицы справа */
 border-bottom: 2px solid green; /* Граница у таблицы снизу */
}

TD {
 border: 2px solid green; /* Параметры рамки вокруг ячеек таблицы */
 border-right: none; /* Убираем линию справа */
 border-bottom: none; /* Убираем линию снизу */
 text-align: center; /* Выравниваем контент по центру ячейки */
}
</style>
</head>
<body>

<table width="200" cellpadding="2">
<tr><td>0</td><td>X</td><td>X</td></tr>
<tr><td>0</td><td>0</td><td>X</td></tr>
<tr><td>X</td><td>X</td><td>0</td></tr>
</table>

</body>
</html>

У этого способа возможны вариации, например, для селектора <TD> добавляем границу только справа и снизу, а у <TABLE>, наоборот, добавляем атрибут border, но линию справа и снизу убрать. В любом случае представленный результат будет один.

Простой и оригинальный вид таблицы можно получить, если цвет границ сделать совпадающим с цветом фона. Но чтобы линии были видны, обязательно следует сделать заливку фона у тега <TD> или <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 (ЦСС)">
BODY {
 background: white; /* Цвет фона web-страницы */
}

TABLE {
 border-collapse: collapse; /* Линия между ячейками отображается как одна */
}

TD {
 border: 2px solid white; /* Параметры рамки вокруг ячеек таблицы */
 background: #ccc; /* Цвет фона ячеек */
 text-align: center; /* Выравниваем контент по центру */
}
</style>
</head>
<body>
<table width="200" cellspacing="0" cellpadding="2">
<tr><td>0</td><td>X</td><td>X</td></tr>
<tr><td>0</td><td>0</td><td>X</td></tr>
<tr><td>X</td><td>X</td><td>0</td></tr>
</table>
</body>
</html>

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

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

Рис. 3

Рис. 3. Вид границ, совпадающих с цветом фона

Статья опубликована: 08.09.2009 Последнее обновление: 30.03.2009
Поиск по сайту
Таблицы
Разделы
Теги по теме

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

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

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

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

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

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

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

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

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

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

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

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

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