или примеры верстки сайта с помощью таблиц
Способ табличной верстки сайта не является рекомендуемым или семантически правильным, в отличие от того, что был показан в предыдущем уроке, где верстка осуществлялась обычными контейнерами <div> </div> со стилевыми описаниями. В современном XHTML таблицы рекомендуется использовать только для представления данных, но никак не для верстки сайта. Невзирая на это, мы все же рассмотрим такой способ как дополнение к урокам, где мы занимались построением таблиц.
Примеры верстки страниц сайтов при помощи HTML таблицы.
Содержание страницы
Пример жесткой HTML табличной верстки сайта:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Результат: жесткая табличная 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 табличной верстки сайта:
<title>Резиновая HTML табличная верстка сайта</title> |
Результат: HTML резиновая табличная верстка
Сравните этот код и код из предыдущего примера, и вы увидите, что было изменено значение лишь одного атрибута в теге <table>. При <table width="100%"> горизонтальный размер таблицы напрямую зависит от разрешения монитора. В нашем случае ширина первого и третьего столбцов (ячеек) среднего ряда установлена жестко, а второй столбец растягивается, обеспечивая 100% ширину таблице. Недостатком такого типа верстки сайта является непостоянная структура содержимого «резиновых» ячеек, которая изменяется в зависимости от размера окна браузера — при этом изменяется и внешний вид страницы.
Подробно взаимодействие основных инструментов сайтостроения: HTML и CSS, а также все способы верстки рассматриваются в следующем разделе самоучителя, в уроке CSS верстка.
Блочная HTML верстка HTML табличная верстка сайта
HTML CSS верстка