Что лучше блочная или табличная верстка?

Author Автор: Роман Чернышов    Опубликовано: 4 ноября 2010

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

На мой взгляд преимущества блочной верстки над табличной очевидны, это:

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

Но наряду с этими, вроде бы как преимуществами, возникает целый ряд проблем и недостатков, связанных уже с самим процессом блочной верстки и с отображением ее в разных браузерах (Особенно проблемы возникают с Internet Explorer 6).

Основные недостатки, на которые так же следует обратить внимания:

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

Конечный результат и затраченное на него время, часто может быть не оправданно. По этому я считаю что стоит хорошенько подумать о том как вы будите верстать, с применением какого метода?

3 комментария to “Что лучше блочная или табличная верстка?”

  • Василий 04.11.2010 в 7:00 пп

    Добрый день!
    Решил научится верстать сайты. Нашёл вашу статью «Кросбраузерная двух колоночная блочная верстка» очень интересно и главное доступно и понятно видя наглядный пример. Не могли бы вы так же выложить пример табличный вёрстке?

  • Игорь 29.06.2012 в 3:28 пп

    Всё очень правильно подмечено. С табличной вёрсткой код такой громоздкий, что без комментариев не обойтись, а с блочной — и времени много уходит и IE их не видит, но блочная все же — красивее смотрится, особенно если применять все возможности CSS3. А HTML5 и CSS3 полностью корректно отображает браузер Safari от Apple.

  • Роман 19.05.2016 в 7:42 пп

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

Оставить комментарий на Игорь

Автор блога
Роман Чернышов
Веб-разработчик,
Full Stack
Senior, Architect
PHP, JavaScript, Node.JS, Python, HTML 5, CSS 3, MySQL, Bash, Linux Admin
Заказать работу
предложить оффер

Моя книга
Книга. Веб-разработчик. Легкий вход в профессию
Печатная книга
Веб-разработчик.
Легкий вход в профессию
Оформить предзаказ
Последние вопросы
Список вопросов
Последние комментарии
Меню

Archive

Мои проекты
Insurance CMS Love Crm CMS Совместные покупки Мой PHP Framework Хостинг для моих клиентов Лицензии на мой софт и поддержка