Табличная вёрстка VS Блочная вёрстка

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

Начну с преимуществ и недостатков табличной вёрстки:

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

Теперь о преимуществах и недостаках блочной вёрстки:

Значительно меньше HTML-кода и, как следствие, уменьшение веса страницы.
Блоки загружаются быстрее таблиц (особенно больших таблиц).
В отличии от таблиц, блоки - универсальное средство для создания любого дизайна.
Гораздо сложнее табличной вёрстки.
Огромные проблемы с кроссбраузерностью.
Блоки начинают наезжать (либо спадать) друг на друга при маленьких разрешениях экрана.

Вот все преимущества и недостатки блочной и табличной вёрстки. От себя хочу добавить, что в 99% Вы будете использовать и то, и другое, но сейчас вопрос стоит о создании самого макета сайта в целом. И здесь я хочу дать Вам рекомендацию, какой из типов вёрстки выбрать.

Блочная вёрстка лучше табличной, НО при условии, что Вы добьётесь кроссбраузерности и хорошего отображения сайта при разных разрешениях экрана. Данный сайт свёрстан блоками, однако, добиться кроссбраузерности и хорошего отображения на разрешениях (я добился хорошего отображения на разрешениях от 800 на 600, хотя на практике достаточно от 1024 на 768) очень тяжело. Об этом я предупреждаю заранее, поэтому если у Вас ещё маленький опыт вёрстки, то забудьте о блочной вообще. Лучше делайте табличную вёрстку.

Вывод: если Вы ещё недостаточно опытны, то используйте только табличную вёрстку, иначе принимайте решение в зависимости от конкретного случая. И всегда ответьте себе на вопрос: "Готовы ли Вы к потере огромного количества времени ради совсем небольшой пользы?".

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 33 ):

А как натянуть таблицу на всю страницу, у меня почему то со всех сторон 1-2 пикселя занимает пустое место страницы

Извиняюсь за вопрос, мб он покажется туповатым, то что все такие такое блочная верстка, рассказано, насколько я увидел здесь только про таблицы, Заранее спасибо.

Блочная вёрстка - это использование стилизованных div в самой основе структуры страницы.

да вот щас сюда перешел чтобы удалить пост)) Понял внезапно,спасибо

Верстаю сайт блоками див.Конструкция простая.шапка и футер,между ними еще три блока(margin: 0; padding: 0;).ширину писал в пикселах сначала.общая получается 1280px ,а эти три блока соответственно 200+800+280px.Всё должно умещатьсь,а нет.Правый блок падает вниз,делаю чуть меньше крайний блок до тех пор пока умещается,тогда у меня появляется горизонтальная полоса прокрутки.Решил всё переделать в %. Всё получилось ровно ничего не падает всё как должно быть.А до того как я всё это настроил ,задавал вопросы в "Ответах@mail" мне сказали что писать размеры в % ,считается дурным тоном.Вопрос к вам ,как вы считаете почему так?мне многие так написали.И может я что то не так делал когда делал в пикселах?

В % надо писать только центральный блок, а вот левый и правый - можно в абсолютных единицах, а можно и в процентах. А вообще, как такового правила, или дурного тона не существует по данной теме. Всё зависит от типа вёрстки, и оба варианта допустимы.

Еще вопрос .Padding Увеличивает размер блока?А то у меня почему то увеличивает,как такое может быть?

padding увеличивает размер блока. Поэтому при увеличении padding, нужно самостоятельно уменьшать width.

Я хочу узнать мнения експерта,а все таки Михаил,какая лучшая вёрстка "Блочная" или "Табличная"?Какую вёрстку вы предпочитаете?Жду на ваш ответ.

Хотя у них свои преимущества и недостатки, в основном, профессионалы выбирают блочную.

У меня возникла еще одна проблема с таблицами.Я создал таблицу для входа на сайт,а у меня,"Меню" сайта опустилось вниз,а еще текст которий был написан - приветствие,тожу упустилось на низ,а теперь я немогу поднять наверх на левий бок мне нужно поднять "Меню" сайта.Я уже взял меню в таблицу и пробовал разлычними атрибутами поднять,но всеровно ничево не получаетса. Уважаемий Михаил,может есть какой небудь "тег" или "атрибут" чтобы я мог поднять "Меню" на левий бок наверх?

Посмотрите через firebug вкладку Layout для нужного элемента. Вохможно у Вас откуда-нибудь появились отступы, которые Вы не обнулили.

Не помогло,я по другому сделал я поднял меню с помощю позиционирования и теперь розмещаю таблици куда надо.Вы меня извините за ошибки в тексте,потомушто я с Украини и не учю руский язык,только украинский и английский.Но всеровно спасибо что отозвались!И еще один надеюсь последний вопрос. Подскажите Михаил!с помощю какого тега или атрибута я могу перемищать "Блоки",котории создаютса с тега <div> или как можно по другому назвать - позиционировать,всмысле ставить блоки куда надо?

📎📎📎📎📎📎📎📎📎📎