Почему блочная верстка лучше табличной?
При создании сайта одним из главных этапов является его верстка. Многие спорят, что же лучше — блочная или табличная верстка? Однозначного ответа нет: и тот и другой метод имеет свои преимущества и недостатки и активно сегодня используется при разработке сайтов различной тематики. Мы все же считаем, что блочная верстка лучше. Почему? Об этом мы и расскажем в данной статье.
Что такое табличная верстка?
Подробнее остановимся на каждом из этих видов версток. Итак, что такое табличная верстка? Она базируется на использовании таблиц (тэгов в HTML), в которые вписывается контент. Эти таблицы могут быть вложенными, что позволяет создавать целые иерархии таблиц, что было раньше очень удобно при верстке сложных страниц. Одним из главных преимуществ такой верстки является то, что с ней легко реализовать кроссбраузерный дизайн.
Табличная верстка сайта проста для изучения, именно поэтому сегодня многие специалисты отдают предпочтение ей. Но, следует помнить, что использование таблиц может привести к сильной «закомментированности» кода, что негативно сказывается на продвижении сайта.
Что такое блочная верстка?
Что такое блочная верстка? Она отличается тем, что вместо таблиц в HTML код вставляются блоки с контентом. По своей реализации сложнее табличной, но обладает рядом преимуществ, которые делают ее незаменимой при создании качественного адаптивного сайта. Верстка блоками позволяет сделать страницы «легче», чем те, которые сверстаны таблицами, поэтому они лучше воспринимаются поисковыми машинами и пользователями интернета.
Блочная или табличная верстка?
Итак, подведем итог, почему блочная верстка лучше табличной? Вы наверное и сами уже поняли. Во-первых, она значительно быстрее грузится в отличии от таблиц, которым требуется для этого больше времени.
Во-вторых, верстка блоками занимает меньше HTML-кода и легче редактируется. Например, если с сайта необходимо убрать какой-то элемент, то для этого просто необходимо убрать ненужный блок, при этом структура сайта не нарушится. С таблицами все намного сложнее: в случае удаления хотя бы одной ячейки рушится вся структура.
И, в-третьих, блочная верстка — универсальна, поэтому ее можно использовать для создания любого дизайна. А это значит, что с ней вы можете реализовывать самые оригинальные идеи для вашего сайта.
Отлично!
Хорошо!
Любопытно..
Не очень
О чем это?
Подпишитесь на нашу рассылку, чтобы получать интересные материалы и инсайты из жизни компании Мы будем готовить для вас только самые актуальные и интересные материалы 🚀
Табличная вёрстка VS Блочная вёрстка
Одним из самых популярных споров между верстальщиками — это, какая вёрстка лучше: табличная или блочная. Вопрос этот очень спорный и каждый по-своему прав. Хотя я убеждён, что всё зависит от конкретной ситуации, поэтому и блочная вёрстка, и табличная вёрстка имеют право на существование. И в этой статье я постараюсь разобрать преимущества и недостатки каждой из них. Чтобы при выборе типа вёрстки для своего сайта, Вы опирались, в первую очередь, на их особенности.
Начну с преимуществ и недостатков табличной вёрстки:
- Таблицы не перекрываются друг с другом при маленьких разрешениях.
- Легко делать кроссбраузерный дизайн.
- Гораздо проще блочной вёрстки.
- Очень много лишнего кода, ввиду бесконечного создания строк и столбцов.
- Далеко не каждый дизайн можно создать с помощью таблиц.
Теперь о преимуществах и недостаках блочной вёрстки:
- Значительно меньше HTML-кода и, как следствие, уменьшение веса страницы.
- Блоки загружаются быстрее таблиц (особенно больших таблиц).
- В отличии от таблиц, блоки — универсальное средство для создания любого дизайна.
- Гораздо сложнее табличной вёрстки.
- Огромные проблемы с кроссбраузерностью.
- Блоки начинают наезжать (либо спадать) друг на друга при маленьких разрешениях экрана.
Вот все преимущества и недостатки блочной и табличной вёрстки. От себя хочу добавить, что в 99% Вы будете использовать и то, и другое, но сейчас вопрос стоит о создании самого макета сайта в целом. И здесь я хочу дать Вам рекомендацию, какой из типов вёрстки выбрать.
Блочная вёрстка лучше табличной, НО при условии, что Вы добьётесь кроссбраузерности и хорошего отображения сайта при разных разрешениях экрана. Данный сайт свёрстан блоками, однако, добиться кроссбраузерности и хорошего отображения на разрешениях (я добился хорошего отображения на разрешениях от 800 на 600, хотя на практике достаточно от 1024 на 768) очень тяжело. Об этом я предупреждаю заранее, поэтому если у Вас ещё маленький опыт вёрстки, то забудьте о блочной вообще. Лучше делайте табличную вёрстку.
Вывод: если Вы ещё недостаточно опытны, то используйте только табличную вёрстку, иначе принимайте решение в зависимости от конкретного случая. И всегда ответьте себе на вопрос: «Готовы ли Вы к потере огромного количества времени ради совсем небольшой пользы?«.
Создано 13.04.2011 23:00:30
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 33 ):
А как натянуть таблицу на всю страницу, у меня почему то со всех сторон 1-2 пикселя занимает пустое место страницы
Извиняюсь за вопрос, мб он покажется туповатым, то что все такие такое блочная верстка, рассказано, насколько я увидел здесь только про таблицы, Заранее спасибо.
Блочная вёрстка — это использование стилизованных div в самой основе структуры страницы.
да вот щас сюда перешел чтобы удалить пост)) Понял внезапно,спасибо
Верстаю сайт блоками див.Конструкция простая.шапка и футер,между ними еще три блока(margin: 0; padding: 0;).ширину писал в пикселах сначала.общая получается 1280px ,а эти три блока соответственно 200+800+280px.Всё должно умещатьсь,а нет.Правый блок падает вниз,делаю чуть меньше крайний блок до тех пор пока умещается,тогда у меня появляется горизонтальная полоса прокрутки.Решил всё переделать в %. Всё получилось ровно ничего не падает всё как должно быть.А до того как я всё это настроил ,задавал вопросы в «Ответах@mail» мне сказали что писать размеры в % ,считается дурным тоном.Вопрос к вам ,как вы считаете почему так?мне многие так написали.И может я что то не так делал когда делал в пикселах?
В % надо писать только центральный блок, а вот левый и правый — можно в абсолютных единицах, а можно и в процентах. А вообще, как такового правила, или дурного тона не существует по данной теме. Всё зависит от типа вёрстки, и оба варианта допустимы.
Еще вопрос .Padding Увеличивает размер блока?А то у меня почему то увеличивает,как такое может быть?
padding увеличивает размер блока. Поэтому при увеличении padding, нужно самостоятельно уменьшать width.
Я хочу узнать мнения експерта,а все таки Михаил,какая лучшая вёрстка «Блочная» или «Табличная»?Какую вёрстку вы предпочитаете?Жду на ваш ответ.
Хотя у них свои преимущества и недостатки, в основном, профессионалы выбирают блочную.
У меня возникла еще одна проблема с таблицами.Я создал таблицу для входа на сайт,а у меня,»Меню» сайта опустилось вниз,а еще текст которий был написан — приветствие,тожу упустилось на низ,а теперь я немогу поднять наверх на левий бок мне нужно поднять «Меню» сайта.Я уже взял меню в таблицу и пробовал разлычними атрибутами поднять,но всеровно ничево не получаетса. Уважаемий Михаил,может есть какой небудь «тег» или «атрибут» чтобы я мог поднять «Меню» на левий бок наверх?
Посмотрите через firebug вкладку Layout для нужного элемента. Вохможно у Вас откуда-нибудь появились отступы, которые Вы не обнулили.
Не помогло,я по другому сделал я поднял меню с помощю позиционирования и теперь розмещаю таблици куда надо.Вы меня извините за ошибки в тексте,потомушто я с Украини и не учю руский язык,только украинский и английский.Но всеровно спасибо что отозвались!И еще один надеюсь последний вопрос. Подскажите Михаил!с помощю какого тега или атрибута я могу перемищать «Блоки»,котории создаютса с тега или как можно по другому назвать — позиционировать,всмысле ставить блоки куда надо?
14.Сравнение табличной и блочной верстки.
1.Удобство и простота работы с ячейками таблицы, используемыми в качестве элементов структуры электронного издания. С помощью таблицы можно достаточно просто создавать несложные структуры. В случае необходимости задания более сложной структуры мы потратим немного больше времени. Но при масштабировании окна браузера колонки сохранят свой исходный вид, а также взаимное расположение. К тому же, независимо от наполнения соседних ячеек, по высоте они останутся одинаковыми.
2.Использование табличной верстки хорошо подходит для создания так называемого «резинового» макета, в котором ширина зависит от ширины окна браузера.
3.В ячейках таблицы мы можем одновременно выравнивать по горизонтали и вертикали.
4.Меньше всего зависит от выбранного пользователем браузера.
Недостатки табличной верстки:
1.Для отображения страницы надо дождаться, пока браузер загрузит всю таблицу.
2.Более громоздкий и менее понятный код при создании таблиц, т.к. сложная иерархическая структура вложенных тегов.
3.Отсутствует разделение оформления и содержимого.
4.Плохая индексация. Раздробленность информации затрудняет правильное индексирование страницы поисковыми системами.
5.Отсутствие полосы прокрутки (при фреймовой верстве можно прокручивать части).
6.Верстка не соответствует стандартам html и css (таблицы должны быть только для табличных данных).
Достоинства блочной верстки:
1.Сильно уменьшен код html-страниц за счет использования элементов div.
2.Есть возможность нестандартного вложения блоков друг в друга – можно размещать элементы как хотим.
3.Блоки отображаются по мере своей загрузки, что ускоряет работу с электронными изданиями.
4.Лучшая индексация поисковыми системами.
5.Есть возможность расположения нескольких слоев друг над другом, что помогает улучшить индексацию.
6.Возможность использования полосы прокрутки отдельных блоков.
7.С точки зрения моды – данная верстка сейчас самая популярная
Недостатки блочной верстки:
1.При низком разрешении экрана у монитора пользователя блоки могут поменять свое взаимное расположение.
2.В разных браузерах (старых версий) верстка может выглядеть по-разному.
3.Эта верстка самая сложная.
15.Блочная фиксированная разметка с помощью css.
CSS свойства позиционирования позволяют вам позиционировать элемент. Также они могут расположить элемент позади другого, и указать, что должно произойти, когда содержимое элемента слишком большое.
Элементы могут располагаться, используя свойства top (сверху), bottom (снизу), left (слева), и right (справа). Однако, эти свойства не будут работать, пока не установлено свойство position.
Существует четыре различных метода позиционирования.
Статическое позиционирование
HTML элементы позиционируются статически по умолчанию. Статически позиционированный элемент всегда располагается в соответствии со стандартным потоком элементов на странице.
Статически расположенные элементы не подвергаются воздействию свойств top, bottom, left, и right.
Фиксированное Позиционирование
Элемент с фиксированным положением позиционирован относительно окна браузера.
Он не будет двигаться, даже если окно прокручивается:
Пример:
Замечание: IE7 и IE8 поддерживают значение fixed только если указан тип документа !DOCTYPE.
Фиксированно расположенные элементы удаляются из нормального потока. Документ и другие элементы ведут себя так, будто фиксированно расположенный элемент не существует.
Зафиксированные элементы могут перекрывать другие элементы.
Абсолютное Позиционирование
Абсолютно позиционированный элемент располагается относительно первого родительского элемента, который позиционирован иначе, чем статически. Если такого элемента не найдено, за родительский элемент принимается :
Пример:
Абсолютно позиционированные элементы удаляются из стандартного потока элементов. Документ и другие элементы ведут себя так, будто абсолютно позиционированный элемент не существует.
Абсолютно расположенные элементы могут перекрывать другие элементы.