Библиотека Интернет Индустрии I2R.ru

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

Существует три распространенных способа верстки веб-страниц, отличающихся различным подходом - с помощью фреймов, таблиц и слоев. Такое разделение не означает, что используется только один прием верстки, скорее речь идет об их сочетании друг с другом.

В данной статье мы не будем затрагивать верстку с помощью фреймов, об этой теме написано уже множество материалов, где на разные лады поминают достоинства и недостатки фреймов. Обратимся к верстке таблицами и слоями. В последнее время все больше тем посвящено выбору между этими подходами к созданию веб-страниц и обсуждению, что лучше. На самом деле проблема по большей части надумана, нет особой разницы, как будет верстаться страница - слоями или таблицами. Каждый подход применяется для своих собственных целей. Чтобы было понятно, где и для чего используются таблицы и слои, приведено сравнения их свойств.

Слои

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

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

Таблицы

• Использование таблиц понятно, просто и удобно.
• Применение невидимой рамки у таблиц - мощный и удобный способ размещения содержимого на веб-странице.
• Можно просто задавать ширину таблицы в процентах, пикселах и выравнивать ее по левому, правому краю или по центру веб-страницы.

• Пока таблица не загрузится полностью, содержимое ее не будет показываться. Если на веб-странице размещена большая таблица, загрузка страницы существенно замедляется.
• Код HTML для создания таблиц может быть громоздок, особенно если требуется сделать несколько вложенных таблиц.

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

Фоновая область

Любая таблица с параметром bgcolor создает прямоугольную область определенного цвета. Такое выделение материала отделяет его от других элементов и привлекает внимание читателя. Отступ от края таблицы до содержимого регулируется параметром cellpadding или cellspacing.

Пример 1. Создание фоновой области с помощью таблицы

Параметры слоя регулируются с помощью стилей. Чтобы задать фон области используется параметр background-color. Браузеры по разному обрабатывают этот параметр. Internet Explorer и Opera заливают цветом прямоугольную область, что весьма логично (рис. 1), а вот Netscape изменяет цвет фона только под текстом, вдобавок убирая отступы вокруг него (рис. 2).

Рис. 1. Internet Explorer	Рис. 2. Netscape

Чтобы избавиться от этого недостатка, можно сделать рамку вокруг области, совпадающую с цветом фона.

Пример 2. Фоновая область с помощью слоя

<div style="background-color:#f0f0f0; padding: 10px; width: 400; border: solid #ffffff 1px"> После осмотра визуальными методами своего рабочего места можно осторожно включить питание ЭВМ. </div>

Параметр padding задает отступы от содержимого до края области, а вот border нужен, чтобы браузер Netscape показывал все корректно.

Создание рамок

Метод создания рамки вокруг области с использованием стилей совпадает как у таблиц, так и у слоев. Единственное отличие - Netscape 4.x рамку вокруг таблицы показывать не будет.

Пример 3. Создание рамки

<style> table { border: solid #336699 1px; padding: 10px } div { border: solid #336699 1px; padding: 10px; width: 400px } </style> Рамка с использованием таблицы <table width=400> <tr><td>Во избежании медицинских осложнений стул рекомендуется выбирать с мягким сидением.</td></tr> </table> Рамка с использованием слоя <div> Во избежании медицинских осложнений стул рекомендуется выбирать с мягким сидением. </div>