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

Табличная верстка сайта

Урок 24. Жесткая и резиновая табличная верстка сайта

или примеры верстки сайта с помощью таблиц

Способ табличной верстки сайта не является рекомендуемым или семантически правильным, в отличие от того, что был показан в предыдущем уроке, где верстка осуществлялась обычными контейнерами <div> </div> со стилевыми описаниями. В современном XHTML таблицы рекомендуется использовать только для представления данных, но никак не для верстки сайта. Невзирая на это, мы все же рассмотрим такой способ как дополнение к урокам, где мы занимались построением таблиц.


Примеры верстки страниц при помощи таблицы.

Содержание страницы

  1. Жесткая табличная верстка сайта
  2. Резиновая табличная верстка

Жесткая табличная верстка

Пример жесткой табличной верстки сайта:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Жесткая табличная верстка сайта</title>
<style type="text/css">
.header {width:100%; height:60px; background-color:#717dc9; padding:20px; text-align:center}
.left_col {width:120px; height:460px; background-color:#dddddd; padding:15px; vertical-align:top}
.center_col {width:500px; background-color:#ffffff; padding:15px; vertical-align:top}
.right_col {width:120px; background-color:#dddddd; padding:15px; vertical-align:top}
.footer {width:100%; padding:10px 0 10px 20px; background-color:#717dc9; font-size:13px}
</style>

</head>
<body>
<table cellpadding="0" cellspacing="0" width="860" align="center">
<tr>
<td colspan="3" class="header">Мой сайт</td>
</tr>
<tr>
<td class="left_col">Меню</td>
<td class="center_col">Содержание</td>
<td class="right_col">Ссылки</td>
</tr>
<tr>
<td colspan="3" class="footer">&copy; Все права защищены</td>
</tr>
</table>

Результат: жесткая табличная верстка

Отметим, что использована структура XHTML документа, о чем свидетельствует <!DOCTYPE> и открывающий тег <html>.

Параграф <p class="left_col"> содержит CSS атрибут class="", значение которого – селектор описывается в секции <style type="text/css"> </style>.

Дальше вспоминаем уроки по таблицам...... Указываем ширину первой и третьей ячейки среднего ряда: width:120px + padding:15px = 150px (ширина одной ячейки) — умножаем на 2, получаем 300px. Ширина среднего столбца (ячейки) = (равна) ширина таблицы (860px) - (минус) ширина левого и правого столбца (300px). Что касается высоты, то все ячейки одого ряда автоматически выравниваются по самой высокой, поэтому в стилях, в описаниях среднего ряда была указана высота только одной — крайней левой. При расчете размеров всегда нужно учитывать значения padding, margin, border. Значения этих атрибутов задаются так: padding:20px – внутреннее поле элемента по всему своему периметру равно 20-ти пикселям или так: padding:10px 0 8px 60px – верхнее внутреннее поле равно 10-ти пикселям, правое – нулю, нижнее – 8-ми пикселям и левое – 60-ти пикселям (по часовой стрелке, начиная сверху). Жесткость такой верстки заключается в том, что размеры таблицы заданы в пикселях, а не в процентах, то есть они не зависят от размера монитора или окна браузера.

Резиновая табличная верстка

Пример резиновой табличной верстки сайта:

<title>Резиновая табличная верстка сайта</title>
<style type="text/css">
.header {height:60px; background-color:#717dc9; padding:20px; text-align:center}
.left_col {width:120px; height:460px; background-color:#dddddd; padding:15px; vertical-align:top}
.center_col {background-color:#ffffff; padding:15px; vertical-align:top}
.right_col {width:120px; background-color:#dddddd; padding:15px; vertical-align:top}
.footer {padding:10px 0 10px 20px; background-color:#717dc9; font-size:13px}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td colspan="3" class="header">Мой сайт</td>
</tr>
<tr>
<td class="left_col">Меню</td>
<td class="center_col">Ширина ячейки в данном случае зависит от величины монитора или размера окна браузера.</td>
<td class="right_col">Ссылки</td>
</tr>
<tr>
<td colspan="3" class="footer">&copy; Все права защищены</td>
</tr>
</table>

Результат: резиновая табличная верстка

Сравните этот код и код из предыдущего примера, и вы увидите, что было изменено значение лишь одного атрибута в теге <table>. При <table width="100%"> горизонтальный размер таблицы напрямую зависит от разрешения монитора. В нашем случае ширина первого и третьего столбцов (ячеек) среднего ряда установлена жестко, а второй столбец растягивается, обеспечивая 100% ширину таблице. Недостатком такого типа верстки сайта является непостоянная структура содержимого «резиновых» ячеек, которая изменяется в зависимости от размера окна браузера — при этом изменяется и внешний вид страницы.

Подробно взаимодействие основных инструментов сайтостроения: HTML и CSS, а также все способы верстки рассматриваются в следующем разделе самоучителя, в уроке CSS верстка.

Дата публикации: Ноябрь 2009 | Обновление: Август 2014

Урок 23. Блочная верстка   HTML табличная верстка   HTML + CSS верстка

    Сохранить в сервисы и закладки