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

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

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

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

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

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

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

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

<!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>Жесткая табличная HTML верстка сайта</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>

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

Отметим, что использована структура 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-ти пикселям (по часовой стрелке, начиная сверху). Жесткость такой верстки заключается в том, что размеры таблицы заданы в пикселях, а не в процентах, то есть они не зависят от размера монитора или окна браузера.

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

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

<title>Резиновая HTML табличная верстка сайта</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>

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

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

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

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

Блочная HTML верстка HTML табличная верстка сайта HTML CSS верстка