Что лучше блочная или табличная верстка?
На протяжении последних двух лет я только и слышу от заказчика (ов), что он желает сверстать имеющийся у него макет дизайна сайта с использованием блоков. Т.е. ему нужна блочная верстка построенная на DIV и CSS. Но так ли хорош такой код? Об этом я задумываюсь уже на протяжении длительного времени. Мне приходилось создавать разные сайты, многие из которых были сверстаны с применением таблиц, блоков или третьего варианта блоков и таблиц.
На мой взгляд преимущества блочной верстки над табличной очевидны, это:
- малый размер HTML кода, по сравнению с таблицами
- основные параметры и характеристики блоков хранятся в отдельном CSS файле, который прекрасно кешируется браузерами и не нуждается в постоянной загрузке.
- возможность располагать основной контент в самом верху страницы (в самом коде), но выводить на экран в любой точке, хоть в самом низу. задавая просто соответствующие параметры блоку.
Но наряду с этими, вроде бы как преимуществами, возникает целый ряд проблем и недостатков, связанных уже с самим процессом блочной верстки и с отображением ее в разных браузерах (Особенно проблемы возникают с Internet Explorer 6).
Основные недостатки, на которые так же следует обратить внимания:
- Для написания правильно работающего кода во всех браузерах, и корректного отображения страницы в последствии, требуется гораздо больше времени чем при использовании табличной верстки
- Порой написанный код получается гораздо больше чем ожидалось изначально, это происходит в следствии разных подгонок, корректировок, хаков или дополнительно написанных стилей для отдельных браузеров
- За частую приходиться прибегать к применению JavaScript или библиотек типа jQuery, что так же сказывается не лучшим образом для сайта в целом. Возможно не правильно отображение страницы если у пользователя браузер не поддерживает выполнение JS или это функция отключена.
- Опять же что касается такого проблемного браузера как IE6. В блочной верстке часто используется параметр позиционирования float (влево или вправо), часто блоки начинают прыгать и заползать друг под друга, при изменении размеров страницы (окна браузера). Так же замечалось, что когда в IE Tester (6) все работает нормально, в самом же IE6 были сплошные недочеты.
- Не редко приходиться для закрашивания или подгонки фона, использовать дополнительные картинки. Например когда блок навигации не удается растянуть по всей высоте страницы до футера, применяется метод для отрисовки ложных колонок — Faux columns
- Так же часто стоимость по таким работам выходит больше нежели стоимость табличной верстки.
Конечный результат и затраченное на него время, часто может быть не оправданно. По этому я считаю что стоит хорошенько подумать о том как вы будите верстать, с применением какого метода?

Автор:







Добрый день!
Решил научится верстать сайты. Нашёл вашу статью «Кросбраузерная двух колоночная блочная верстка» очень интересно и главное доступно и понятно видя наглядный пример. Не могли бы вы так же выложить пример табличный вёрстке?
Всё очень правильно подмечено. С табличной вёрсткой код такой громоздкий, что без комментариев не обойтись, а с блочной — и времени много уходит и IE их не видит, но блочная все же — красивее смотрится, особенно если применять все возможности CSS3. А HTML5 и CSS3 полностью корректно отображает браузер Safari от Apple.
Как писал автор статьи — я смотрю по ситуации и использую либо табличную либо блочную верстку. Главное, чтобы сайт отображался так, как нужно заказчику, а создан он с помощью блоков или таблиц — заказчику не важно, так как он не будет лазить каждый раз в код и редактировать что-то под себя.
Так себя приучил писать комментарии к блокам, переменным, таблицам, функциям, чтобы в последствии, когда нужно будет доделать что-то новое или переделать старое, то я смогу быстро разобраться где, что находится.