Верстка сайта – табличная или блочная | Блог Алексея Фомичева

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

Что лучше табличная верстка сайта или верстка блоками (div)?

Какую верстку сайта выбрать?

Когда-то, задавая себе этот вопрос, я так и не смог на него дать четкий ответ. Наверное, это было связано с неопытностью в знания основ верстки сайта. Но со временем все изменилось. И теперь тайна, скрытая от моих глаз раскрыта. И мне хочется поделиться с вами этими знаниями.

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

Мой опыт, а это более 6-х с лишним лет создание сайтов для себя (начиная с 2007 года), показал, что табличная верстка сайта является не самым лучшим вариантом при разработке, так размер страницы общее количество тегов используемых при этом просто огромное.

Вроде бы оправдано при этом применение таблиц в качестве макетов страницы. Многие начинающие так и поступают, так как это более простое решение. Но за всем этим стоит большая проблема в оптимизации кода. Страницы получаются громоздкими и тяжелыми.

Ведь по сути таблицы придуманы именно для вывода табличных данных, а не для разметки элементов страницы. Но так повелось в интернет в связи с легкостью форматирования таблицы стали применять и для верстки. Смотрите сами, простая таблица:

1
2
3
4
5
<table>
<tr>
   <td>Ваш текст</td>
</tr>
</table>

В ней может быть достаточно много вложенных таблиц с разным количеством столбцов.

Соответственно можно построить таблицами такую структуру сайта, которая бы устраивала веб-мастера. Такое было ранее и это встречается и посей день.

Вроде бы всех устраивали таблицы, до тех пор, пока не появилась тенденция перехода на другой способ разработки. Блочная верстка сайта — это прорыв на несколько поколений вперед и отказ от применения таблиц в качестве макета.

Смотрите сами, та же таблица может быть представлена в виде блочной (div) верстки:

1
<div>Ваш текст</div>

Такой способ занимает гораздо меньший объем памяти.

Разница в весе веб-страницы и, тем более, целого сайта, становится весьма существенной и непосредственно сказывается на скорости загрузки веб-ресурса, к чему и следует стремиться любому веб-мастеру.

Так почему же многие начинающие выбирают именно табличную верстку сайта, а не блочную.

  • Простота в позиционировании элементов на странице.
  • Можно создавать достаточно сложные дизайнерские решения.

К недостаткам можно отнести достаточно большой код странице, а так же невозможность применить SEO – технологии.

А вот какие преимущества я вижу в блочной верстке по сравнению с табличной:

  • Уменьшение размера веб-страницы, как правило, в 2–3 раза (в зависимости от сложности структуры страниц).
  • Уменьшает время загрузки веб-сайта. При этом вырастет размер CSS-файла, но, благодаря тому, что он единожды кэшируется браузером юзера и при обращении к другим страницам считывается уже с его компьютера, в результате сайт грузится гораздо быстрее, чем табличный.
  • Снижение общемирового интернет-трафика.
  • Снижение нагрузки на сервер.
  • Значительно удобнее менять оформление страниц сайта, вынесенное в CSS-файл. При этом практически отсутствует необходимость редактирования HTML-кода.
  • Легкость манипулирования элементами сайта. Любой SEO-специалист подтвердит, что чем выше контент располагается в HTML-коде, тем боле значима такая страница с точки зрения поисковой оптимизации. Поисковые системы отдадут больше респекта такой странице и быстрее проиндексируют ее.Благодаря возможностям div верстки можно добиться того, что в коде сначала пойдет основной контент, а только потом шапка, левая и/или правая колонки. При этом внешний вид страницы совершенно не изменится. Несомненно, таблицами тоже можно добиться подобного результата, однако дивы позволяют реализовать это гораздо проще.
  • Визуально приятна прозрачность кода при верстке дивами – нет никаких нагромождений тегов, все очень красиво и компактно.

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

Для тех, кто хочет узнать больше о технологии CSS, могу посоветовать следующие ресурсы в Интернет.

– Наверное, самый популярный сайт по теме. Очень рекомендую этот сайт!

– Достаточно много как теоретической, так и практической информации, изложенной простым языком. Рекомендую!

– Советы, секреты, хитрости и тонкости, а также технологии создания правильных XHTML-документов с точки зрения веб-стандартов.

– Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.

– Учебники по HTML, CSS, дизайну, графике и созданию сайтов.

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

С уважением, Алексей Фомичёв

Жизнь:
Зарплата — это наркотик!
— В день выдачи зарплаты беспричинно повышается настроение, хочется шутить и смеяться (Как после приема дозы)
— Получив зарплату один раз вы уже не можете без нее (Вызывает привыкание)
— При долгом отсутствии зарплаты наступает депрессия, весь мир видится в черных тонах (Сами все понимаете)
— Если по каким-то причинам доза зарплаты оказалась больше нормы, эйфория усиливается (При передозе реально загнуться от счастья)



Поделись с друзьями в социальных сетях!


myzoodom.ru


08.11.2013 / Создание блога / Теги: / Комментарии: 4
Похожие записи
Комментарии: 4
  1. 10.11.2013 в 10:51 – Ответить

    Дивная вёрстка наше всё! На счёт уменьшения веса страницы в 2-3 раза я бы поспорил. К примеру возьмём эту страницу. Здесь картинок разных размеров штук 20 так что пара килобайт погоды не сделают.

    • 10.11.2013 в 13:50 – Ответить

      Если речь идет о паре килобайтов, то да смысла нет. Но если идет о десятках и сотен, то тогда есть смысл поразмыслить. Что касается именно моего блога и его страниц. Если бы я не оптимизировал картинки, css и java, а так же не применял кэш, то посетитель бы сайта секунд на 25 ушел бы в нирвану и возможно бы и не дождался загрузки страницы блога.

      Но так как блог оптимизирован, то он загружается за 2-3 секунды, при этом сохраняя качество изображения на достойном уровне.

  2. Андрей
    08.04.2014 в 14:01 – Ответить

    Единственный недостаток табличной верстки это худшая читаемость кода. Это очень важный недостаток, но остальные описаные недостатки — бред.

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