Позиционирование с помощью таблиц

Представляю Вашему вниманию восемнадцатый выпуск информационной рассылки сайта "Веб дизайн в примерах". В этом выпуске рассмотрим способы компоновки и позиционирования элементов на странице.

• Способы позиционирования. Позиционирование с помощью таблиц.
• Анонс следующего выпуска.
• Новости Интернет.

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

В этом выпуске мы остановимся на первом способе позиционирования (для многих целей он окажется достаточным). Параллельно опишем стиль оформления структурных элементов странцы.

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

Код для этой разметки будет состоять из двух частей. Описание стиля элементов разметки и описание самих элементов (таблицы). Стиль описывается следующим образом:

Класс maintable определяет ширину таблицы (400px) и параметры отступов между ячейками таблицы. Стили tdtop и tdbottom задают стиль оформления "шапки" и "подвала" страницы. Стили tdright и tdcenter определяют навигационную и основную секции (левая и центральная колонка). Для трехколончатой верстки необходимо добавить описание еще одной секции по аналогии с предыдущими. И, наконец, класс tdgap определяет промежуток между колонками.

Сам html код страницы имеет следующий вид:

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

В следующем выпуске будет рассмотрен вариант с позиционированием с помощью CSS.

• Адрес сайта: design.originweb.info.
• Для новых подписчиков: архив рассылки.
• Как заработать на собственном сайте читайте в статье Краткая заметка об размещении рекламных материалов на сайте

P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").