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

Я разделил 100% ширины страницы на две части: 20% отдал под блок навигации, 80% — под основной контент.

Вёрстка блока навигации. Создаю ячейку, занимающую 20% ширины таблицы. Внутри тегов расположен список ссылок. На его основе можно сделать меню сайта.

Низ сайта (баннеры, счетчики, информация)

В следующей строке настраиваю подвал (низ) сайта. Для этого использую уже знакомые теги. При помощи colspan=2 делаю, чтобы низ сайта занимал по горизонтали сразу две ячейки, как шапка — эти части, в отличие от тела страницы, на блоки в моём случае делить не нужно.

Таким образом, для создания табличной вёрстки сайта, содержащего все основные элементы (шапку, низ, меню, контент страницы) понадобилась таблица, состоящая из четырёх строк и шести ячеек (строки головы и ног сайта содержат по одному элементу).

На современных сайтах практикуется блочная верстка, а таблицы уже вчерашний день.

Полезные ссылки:

• Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
• Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
• Вёрстка сайта с нуля 2.0 — полноценный платный курс;
• Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Источник

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

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

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

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

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

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

Параграф

содержит CSS атрибут class=»» , значение которого – селектор описывается в секции

.

Дальше вспоминаем уроки по таблицам. Указываем ширину первой и третьей ячейки среднего ряда: 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 табличной верстки сайта:

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

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

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

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Табличная верстка в HTML? – Не вопрос!

Источник

Урок 6. Табличный макет сайта

Одним из методов верстки веб-страниц является табличная верстка сайта или табличный макет сайта – когда блоки информации расположены в ячейках макетной таблицы шириной во весь экран.

Табличная верстка сайта – достаточно распространенный на сегодняшний день метод верстки.

Если таблица служит для разметки страницы и оформления дизайна, то она называется макетной.

На рисунке 1 приведен внешний вид сайта, на рисунке 2 – зеленым цветом обозначена таблица, которая является основой макета этого сайта. Для того, чтобы макетную сетку не было видно, используется таблица с невидимой границей. Для этого в теге TABLE задается атрибут border=»0″.

Рисунок 1. Внешний вид сайта

Рисунок 2. Таблица, которая лежит в основе макета сайта

Все многообразие дизайна средствами таблиц можно свести к трем типам:

1. «Фиксированный» (жесткий),
2. «Резиновый» дизайн и
3. Комбинированный из первых двух.

1. «Фиксированный» табличный дизайн (макет) сайта

При «фиксированном» дизайне макет страницы создается на основе таблиц определенной ширины, например макетная таблица шириной 1000px «1000«>.