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

табличная и блочная вёрстка сайта

Приветствую Вас дорогой читатель!

Сегодня я хочу рассказать Вам чем блочная вёрстка сайта отличается от табличной и провести небольшой анализ чтобы выявить какую вёрстку лучше использовать и почему.

Итак, давайте сначала рассмотрим табличную вёрстку.

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

Создаётся на основе таблицы, для ячеек которых прописываются стили и вставляется контент.

Достоинства:

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

Недостатки:

  • менее гибкая
  • большой объём HTML кода
  • при создании адаптивного дизайна с ней крайне трудно и неудобно работать
  • более сложно править (особенно если дело касается переноса какого то блока в другую часть страницы)
  • более сложно править (особенно если дело касается переноса какого то блока в другую часть страницы)

Блочная вёрстка сайта

Блочная вёрстка сайта с каждым днём становится всё более популярной, за счёт того что она более гибкая.

Делается в виде отдельных блоков, которые выстраиваются один за другим и для каждого из которых прописываются свои стили (цвета, размеры, положение и т.д.) Создание такой страницы похоже на строительство дома из кубиков. Вы выстраиваете кубики разных размеров так как Вам хочется чтобы при этом получился дом. И при желании Вы можете в любой момент поменять местами какие то кубики.

Достоинства:

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

Недостатки:

  • при вёрстке макета из нескольких колонок возможны перескакивания блоков на новую строку при масштабировании браузера
  • значительно сложнее добиться кроссбраузерности
  • сложнее в освоении чем табличная

Сравнение блочной и табличной вёрстки

Давайте сравним.

Давайте сравним код табличной и блочной вёрстки сайта. Для этого возьмём один и тот же макет и реализуем его с использованием табличной и блочной вёрстки.

Сравнение блочной и табличной вёрстки

Код полученной вёрстки представлен ниже.

Табличная вёрстка
Блочная вёрстка сайта
Основные теги: table, tr, td
Основные теги:div
HTML код табличной вёрстки
HTML код для блочной вёрстки
CSS код табличной вёрстки
CSS код блочной вёрстки
Результат (табличная)
Результат (блочная)
табличная вёрстка
блочная вёрстка

Как видим результат особо не отличается.

Давайте посмотрим сам код.

В случае с табличной вёрсткой HTML код получился больше при том что сама таблица не сложная. В случае с более сложной структурой страницы разница в объёме HTML кода будет ещё больше.

При блочной вёрстке сайта мы получаем меньше html кода, но зато больше css кода.

Так какой же вариант всё таки выбрать?

Если Вы новичок в вёрстке и хотите верстать несложные макеты для себя – то смело выбирайте табличную вёрстку, так как с ней проще разобраться на первых парах.

Если же Вы собираетесь заниматься вёрсткой на профессиональном уровне и делать сайты на заказ – то без блочной вёрстки Вам не обойтись! Так как во-первых она позволяет Вам реализовать дизайн-макеты любого уровня сложности, а во-вторых даёт возможность делать адаптивную вёрстку и перестраивать блоки так как Вам нужно в зависимости от устройства, на котором просматривается сайт.

И ещё блочная вёрстка может легко заменить табличную, а табличная блочную в полной мере заменить не сможет.

На сегодняшний день большинство современных сайтов делается при помощи блочной вёрстки. Таблицы используют только для вёрстки некоторых элементов страницы и то не всегда.

Какую вёрстку будете использовать Вы – это Ваш личный выбор. И я надеюсь что в этой статье я помогла Вам разобраться в этом вопросе и сделать для себя определённые выводы.

Желаю Вам приятного продуктивной работы и отличного результата.

До встречи в следующих статьях.

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

3 комментария

  1. Блочная вёрстка сайта или табличная?

    • Мне больше нравится блочная :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif