7.4 Применение таблиц для верстки сайта. Макет из двух колонок
Двухколонная модульная сетка часто применяется на сайтах, при этом, как правило, в одной колонке располагается основной материал (текст статьи, например), а во второй – ссылки на разделы сайта и другая информация. Для создания такого макета хорошо подходит таблица – каждая ячейка выступает в качестве отдельной колонки, что позволяет легко регулировать различные параметры отображения документа.
Рассмотрим простой вариант, с фиксированной шириной левой колонки, а ширина правой колонки варьируется в зависимости от размеров окна браузера. Для этого требуется задать общую ширину всей таблицы в процентах через параметр widthтега <TABLE> и для первой ячейки установить ее ширину в пикселах или процентах также с помощью параметраwidth, но уже для тега <TD>. Вертикальное выравнивание содержимого ячеек по верхнему краю определяется параметромvalignсо значениемtop. Это требуется для того, чтобы при разном объеме содержимого ячеек, они не сдвигались бы относительно друг друга, а начинались одинаково от верхнего края.
Пример.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<table width="100%" cellspacing="0" cellpadding="5" border="2" bordercolor="black">
<tr>
<td colspan="2" bgcolor="#FBF0DB">Заголовок</td>
</tr>
<tr>
<td width="200" valign="top">Левая колонка</td>
<td valign="top">Правая колонка</td>
</tr>
<tr>
<td colspan="2">Дно</td>
</tr>
</table>
</body>
</html>
Рисунок 7.4 – Табличный макет сайта
Рассмотрим тот же вариант, но с фиксированной шириной макета 800рх и выравниванием по центру относительно окна браузера. Для этого необходимо задать общую ширину всей таблицы атрибутом width="800" и атрибутомalign="center"выровнять макет по центру.
Пример.
<table width="800" align="center" cellspacing="0" cellpadding="5" border="2" bordercolor="black">
Рисунок 7.5 – Табличный макет сайта
Параметры настройки отображения таблицы можно заменить стилевыми атрибутами с теми же значениями.
Пример.
<html>
<head>
<style type="text/css">
#maket {
width: 100%; /* Ширина всей таблицы в процентах */
border-collapse: collapse; /* Отображать только одинарные линии */
}
#maket #header{
background: #ccc; /* Цвет фона ячеек */
}
#maket TD {
Vertical-align: top; /* Вертикальное выравнивание в ячейках */
border: 2px solid black; /* Граница вокруг ячеек */
}
TD#leftcol {
width: 200px; /* Ширина левой колонки в пикселах */
}
#maket #footer{
background: #ccc; /* Цвет фона ячеек */
}
</style>
</head>
<body>
<table id="maket" cellspacing="0" cellpadding="0" >
<tr>
<td id="header" colspan="2">Заголовок</td> </tr>
<td id="leftcol">Левая колонка</td>
<td>Правая колонка</td>
</tr>
<tr> <td id="footer" colspan="2">Дно</td> </tr>
</table>
</body>
</html>
Рисунок 7.6 – Табличный макет сайта
Расстояние между колонками регулируется параметром cellpaddingтега <TABLE>. Посколькуcellpaddingопределяет расстояние от границы ячейки до края ее содержимого, то пространство между содержимым разных колонок будет равно удвоенному значению этого параметра. Используя стили, а в частности, атрибутpadding, можно регулировать значение отступа для каждой колонки
Пример. В данном примере значения параметровcellspacingиcellpaddingравны нулю, а расстояние между содержимым колонок определяется аргументомpadding-right, который добавляется к левой ячейке через идентификатор с именемleftcol.
TD#leftcol {
padding-right: 40px; /* Поле справа от текста */
width: 200px; /* Ширина левой колонки в пикселах */
}
Рисунок 7.7 – Табличный макет сайта
Аналогично отступы можно регулировать не только справа, но и с других сторон каждой ячейки. Для задания поля со всех сторон:
TD#leftcol {
padding: 5px; /* Поля вокруг содержимого ячеек */
width: 200px; /* Ширина левой колонки в пикселах */
}
Чтобы визуально отделить одну колонку от другой используют разные приемы, самым распространенным, является использование фонового цвета. Лучше указывать цвет через стили, это позволяет вынести оформление страницы в отдельный файл. Стилевое оформление задается параметром background.
Пример.
<!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 {