Версия для печати

Полная версия

Итак, попробуем сверстать наш макет используя таблицы. Очевидно, что без CSS нам не обойтись, поэтому в данном случае речь идет именно о табличном позиционировании. С этой точки зрения для оформления текста, элементов меню и т.д. воспользуемся уже созданными ранее CSS-правилами.

Я не буду подробно рассматривать все этапы верстки, а остановлюсь лишь на некоторых ее особенностях. Сам код Вы можете проанализировать самостоятельно. Если будут вопросы - задавайте.

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

При создании внешней таблицы необходимо иметь в виду, что ширина ячеек, относящихся к одному столбцу - всегда одинакова, независимо от того, какие свойства они имеют. Это относится не только к "реальным" ячейкам столбца таблицы, но и к тем, которые объединены свойством COLSPAN. Поясню на примере. Пусть у нас есть таблица с двумя строками и тремя столбцами, объединим две левые ячейки верхней строки и две правые ячейки нижней:

Укажем ширину верхней правой и нижней левой ячейки в 15%. Вот как это должно выглядеть и как это выглядит в MSIE:

Остальные броузеры устанавливают ширину ячеек в 50%.

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

Можно увидеть, что проблема решается. Вполне возможно, что я здесь в чем-то не прав. Выслушу любые Ваши замечания.

Шапка. Здесь есть одна особенность. Шапка у нас состоит из четырех блоков, разделенных линиями голубого цвета толщиной 1px. С помощью CSS это было реализовано как рамка соответствующих блоков. В данном случае логично эту рамку сделать с помощью таблицы у которой border равен 1px и имеет соответствующий цвет #9BCCFF. MSIE на высоте - выглядит так, как и ожидалось. Остальные броузеры показывают какое-то серое трехмерное безобразие. Поэтому рамку можно сделать следующим образом. Берем таблицу 1х1 и устанавливаем ей фон цвета будущей рамки. Внутрь нее вставляем другую таблицу необходимой структуры и со свойством cellspacing равным ширине рамки. Далее ячейки внутренней таблицы закрашивают в необходимый цвет (в данном случае - синий), причем это осуществляется не установлением фона для всей таблицы, а установлением фона для каждой ячейки (можно установить фон для каждой строки - так быстрее). В результате мы получим таблицу необходимого цвета, через просвет ячеек которой будет выглядывать фон внешней таблицы. Вот как все сложно:

Создание меню с помощью таблицы сложностей вызвать не должно. Здесь используются теже принципы, что и построении его с помощью CSS.

Вроде бы все нюансы рассмотрел. Смотрите исходный код и если что непонятно - спрашивайте.

Верстаем шапку сайта.

Верхнее и нижнее меню.

Объединяем все вместе.

Вместо заключения.