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

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
Заказать работу
предложить оффер

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

Archive

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