Vertical-align: top; /* Вертикальное выравнивание в ячейках */
border: 2px solid black; /* Граница вокруг ячеек */
padding: 5px; /* Поля вокруг ячеек */
}
TD#leftcol {
width: 200px; /* Ширина левой колонки в пикселах */
background: #ccc; /* Цвет фона левой колонки */
}
TD#rightcol {
background: #fc3; /* Цвет фона правой колонки */
}
#maket #footer{
background: #FBF0DB; /* Цвет фона ячеек */
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" id="maket">
<tr>
<td id="header" colspan="2">Заголовок</td>
</tr>
<td id="leftcol">Левая колонка</td>
<td id="rightcol">Правая колонка</td>
</tr>
<tr>
<td id="footer" colspan="2">Дно</td>
</tr>
</table>
</body>
</html>
Рисунок 7.8 – Табличный макет сайта
Использование полей не всегда подходит для установки нужного расстояния между колонок. Например, в случае, когда поля вокруг текста нельзя включать в силу разных соображений. Тогда в качестве разделителя между колонками можно использовать дополнительный столбец.
Пример.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#maket {
width: 100%; /* Ширина всей таблицы в процентах */
border-collapse: collapse; /* Отображать только одинарные линии */
}
#maket #header{
background: #FBF0DB; /* Цвет фона ячеек */
}
#maket TD {
Vertical-align: top; /* Вертикальное выравнивание в ячейках */
padding: 5px; /* Поля вокруг ячеек */
}
TD#leftcol {
width: 200px; /* Ширина левой колонки в пикселах */
background: #ccc; /* Цвет фона левой колонки */
}
#maket #spacer {
width: 10px /* Расстояние между колонками */
}
TD#rightcol {
background: #fc3; /* Цвет фона правой колонки */
}
#maket #footer{
background: #FBF0DB; /* Цвет фона ячеек */
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" id="maket">
<tr> <td id="header" colspan="3">Заголовок</td> </tr>
<td id="leftcol">Левая колонка </td>
<td id="spacer"></td>
<td id="rightcol">Правая колонка</td>
</tr>
<tr> <td id="footer" colspan="3">Дно</td> </tr>
</table>
</body>
</html>
Рисунок 7.9 – Табличный макет сайта
Разделять колонки можно не только с помощью цвета фона и пустого пространства, но и добавлением линии между колонок. Для этого также можно использовать соответствующие стили: border-left, border-right,border-top,border-bottomилиborder– для всех четырех границ сразу. Общий вид:
border-bottom: [border-width || border-style || border-color] | inherit
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений свойства border-style. Значение border-color –устанавливает цвет границы. Значение inherit – наследует значение родителя.
Рисунок 7.10 – Стили рамок
Пример.
TD#leftcol {
width: 200px; /* Ширина левой колонки в пикселах */
background: #ccc; /* Цвет фона левой колонки */
border-right: 4px solid blue; /* Параметры линии */
}
Рисунок 7.11 – Табличный макет сайта
Создание колонок с помощью таблиц процесс достаточно простой и быстрый, необходимо создать таблицу и определить ее визуальные атрибуты. К тому же большинство параметров, определяющих вид таблицы, можно вынести в стили и таким образом ускорить процесс добавления однотипных таблиц и документов на их основе.
При двухколонном макете применяются разные средства по оформлению колонок. Например, используется фоновая заливка, рамка вокруг колонок, изменяется расстояние между ними или установка вертикальной разделительной линии. Все это управляется с помощью стилей, что ведет к сокращению кода, расширяет варианты модификаций таблиц и удобство разработки сайта.