опубликовано: 02/03/2008
Сегодня я решил продолжить говорить вроде бы об очевидных вещах, которые, тем неменее, оказываются не столь очевидны даже для опытного верстальщика. Мы поговорим о верстке и почему верстать скелет страницы таблицей плохо. Верстать таблицей вообще не хорошо, но сейчас мы рассмотрим именно в контексте оптимизации кода.
Почему вообще возникает желание сверстать страницу по схеме скелет таблицей, а внутренние блоки div-ами? Как показывает мой опыт, поступают так, с одной стороны, из желания оптимизации. Известно, что таблица не отрисовывается браузером до тех пор, пока не будет полностью получена. Поэтому, если сверстать страницу со сложной структурой полностью таблицами, то, пока прогрузятся уровни всех вложенных таблиц, может пройти достаточно много времени.
А сверстать полностью div-ми да еще и кросс браузерно не хватает опыта. Поведение div-ов кажется сложным и непредсказуемым. Толи дело таблица. Разметил шапку, блок контента и футер, указал их высоты и получил во всех браузерах ожидаемый результат. Не приходиться эмулировать для IE свойство min-width, нет проблем с вертикальным выравниванием, при изменении размеров окна верстка не "ползет".
И вот верстальщик приходит к компромиссному варианту. Внутренние div-ы
будут грузиться быстро, а таблица одна и она простая, значит должны
получить быструю отрисовку страницы с предсказуемостью поведения таблиц.
Это не правильно. Это самообман.
Показываю на примере.
Я написал две небольших тестовых страницы с эмуляцией медленного или
нестабильного соединения, когда данные браузеру приходят не сразу.
Эта полностью на div-ах:
div-ый вариант,
а эта по схеме "скелет таблица, содержимое div-ы":
табличный вариант.
У меня первый вариант грузится так: шапка на 6-ой секунде, страница полностью на 9-ой. Во всех браузерах. Вариант с таблицей в IE отрисовывается только на 14 секунде, т.е. до тех пор, пока браузер не получил закрывающий тег </table> . В других браузерах ситуация лучше, они пытаются по возможности отрисовать страницу даже не полностью получив саму таблицу. Уже на 6 секунде отрисовывается шапка, но полностью страница загружается лишь на 14 после получения завершающего </table> .
Именно поэтому в контексте оптимизации кода я и считаю такую схему верстки ошибочной. Если же вам совершенно безразлично, как будет грузиться ваша страница в браузере, то можно спокойно разверстывать шаблон таблицами.