7.5 Применение таблиц для верстки сайта. Макет из трех колонок
Использование трех колонок на страницах сайта обусловлено объемом информации, которую требуется показать посетителю. Обычно одна колонка, самая широкая, отдается под текст основного материала, статьи, например, а остальные колонки применяются для навигации, рекламы, анонсов и т.д. Принцип создания трехколонной модульной сетки с помощью таблицы аналогичен созданию двухколонной сетки, поэтому остановимся лишь на некоторых моментах.
Ширина разных колонок зависит от используемого макета – фиксированного или «резинового». При макете фиксированной ширины общая ширина таблицы задается в пикселах и остается постоянной независимо от разрешения монитора и размера окна браузера. При этом ширину отдельных колонок также имеет смысл установить в пикселах. Пусть ширина макета задана как 800 пикселов, а колонки соответственно 200, 400 и 200 пикселов. При определении ширины колонок следует принимать во внимание значение параметраcellpadding. На ширину ячеек этот аргумент не влияет, но зато уменьшает область, которая отводится под содержимое ячеек.
Пример.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<table width="800" align="center" cellspacing="0" cellpadding="5" border="2" bordercolor="black">
<tr> <td colspan="3" bgcolor="#FBF0DB">Заголовок</td> </tr>
<tr>
<td width="200" valign="top">Навигация</td>
<td width="400" valign="top">Контент</td>
<td width="200" valign="top">Реклама</td>
</tr>
<tr> <td colspan="3">Дно</td> </tr>
</table>
</body>
</html>
Рисунок 7.12 – Табличный макет сайта фиксированной ширины
Ширину всех ячеек в подобном случае задавать не обязательно. Так, если не указать ширину одной ячейки, то она будет вычислена автоматически исходя из общей ширины таблицы и ширины остальных ячеек. В других случаях, например, когда не установлена ширина двух ячеек, их размер определяется по содержимому. Поскольку содержимое ячеек варьируется от страницы к странице, то ширина также будет «плавать», поэтому ширину колонок лучше указывать задавать.
При «резиновом» макете ширина таблицы устанавливается в процентах от ширины окна браузера и, таким образом, напрямую зависит от нее. Здесь возможны два варианта:
ширина всех ячеек задана в процентах;
сочетание процентов и пикселов, когда ширина одних ячеек устанавливается в процентах, а других – в пикселах.
В первом случае вначале устанавливается ширина всей таблицы в процентах, а затем ширина отдельных ячеек. Причем в сумме ширина ячеек должна получиться 100%, несмотря на то, что размер таблицы может быть иным. Это обусловлено тем, что ширина таблицы вычисляется относительно доступного пространства веб-страницы, а размер ячеек устанавливается относительно всей таблицы в целом.
Пример.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#maket {
width: 90%; /* Ширина всей таблицы в процентах */
border-collapse: collapse; /* Отображать только одинарные линии */
}
#maket TD {