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

HTML

CSS

Статьи

Полезное


Статьи

Основы HTML
Текст
Изображения
Ссылки
Списки
Таблицы
Формы
Фреймы
Основы CSS
Рецепты CSS
Оформление таблиц
Основы верстки
Табличная верстка
Верстка с помощью слоев
Использование слоев
Примеры верстки слоями

Сетка таблицы

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

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

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

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

При добавлении border к селектору TD или TH между ячейками возникают двойные линии, которые образуются за счет соприкосновения рамок вокруг ячеек. Чтобы этого не произошло, для селектора TABLE указывается свойство border-collapse со значением collapse, как показано в примере 1.

Пример 1. Создание сетки

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

TD, TH {
 padding: 3px; /* Поля вокруг содержимого таблицы */
 border: 1px solid black /* Параметры рамки */
}

TH {
 background: powderblue /* Цвет фона */
}
</style>
</head>
<body>

<table>
<tr>
<th>&nbsp;</th>
<th>2004</th>
<th>2005</th>
<th>2006</th>
</tr>
<tr>
<td>Рубины</td>
<td>43</td>
<td>51</td>
<td>79</td>
</tr>
<tr>
<td>Изумруды</td>
<td>28</td>
<td>34</td>
<td>48</td>
</tr>
<tr>
<td>Сапфиры</td>
<td>29</td>
<td>57</td>
<td>36</td>
</tr>
</table>

</body>
</html>

В данном примере также устанавливается цвет фона для ячеек заголовка (тег <TH>) через параметр background.

Как вариант, можно вообще убрать рамку вокруг таблицы, оставив только линии внутри нее (рис. 2).

Рис. 2. Сетка внутри таблицы

Рис. 2. Сетка внутри таблицы

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

Пример 2. Таблица без внешней рамки

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

TABLE {
 width: 300px; /* Ширина таблицы */
 border-collapse: collapse; /* Убираем двойные линии между ячейками */
 border: 2px solid white /* Прячем рамку вокруг таблицы */
}

TD, TH {
 padding: 3px; /* Поля вокруг содержимого таблицы */
 border: 1px solid maroon; /* Параметры рамки */
 text-align: left /* Выравнивание по левому краю */
}
</style>
</head>
<body>

<table>
<tr>
<th>&nbsp;</th>
<th>2004</th>
<th>2005</th>
<th>2006</th>
</tr>
<tr>
<td>Рубины</td>
<td>43</td>
<td>51</td>
<td>79</td>
</tr>
<tr>
<td>Изумруды</td>
<td>28</td>
<td>34</td>
<td>48</td>
</tr>
<tr>
<td>Сапфиры</td>
<td>29</td>
<td>57</td>
<td>36</td>
</tr>
</table>

</body>
</html>

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





На главную









  • При использовании материалов сайта ссылка на comnew.ru обязательна!