Переходим с TABLE’ичной верстки на DIV’овую

Тема сегодняшнего поста является весьма актуальной как для рядовых веб-мастеров, так и для веб-мастеров с СЕОшным уклоном. Более того, поскольку верстка сайтов с недавнего времени для меня является основным родом деятельности, то это и моя самая любимая тема. О том и поговорим. Поскольку ...

Комментарии (87)
  1. 1
    Fyodor
    @

    Что то поздно как то Вы заметили актуальность то, уважаемый автор.
    Эту тему одним из первых (по кр. мере с 2001года) ведет exs.cc — единственный разработчик не просто плав. сайтов, а генераторов плав. сайтов.
    Это просто к слову об актуальности.

    Справедливости ради должен заметить действительную тенденцию — рост популярности div, а не table верстки во всем мире начиная с середины 2006 года.
    Так Дерзать !

  2. 2

    Что то поздно как то Вы заметили актуальность то, уважаемый автор.

    Fyodor, я считаю, что для каждого актуальность проявляется в разное время, все зависит от опыта верстки. А до этого нужно «созреть», дорасти. Я верстаю с 2003-го года, а к дивам пришел только в конце 2006-го, когда верстка стала моим основным родом деятельности.

    Поэтому актуальность темы я заметил не поздно, а своевременно. Конечно же, ИМХО.

  3. 3

    Дмитрий а теперь у вас какой основной вид деятельности ?

  4. 4

    Верстка, уже год как.

  5. 5
    @

    Коллег, мне кажется «уменьшение объемов кода в 2-3 раза», «снижение нагрузки на сервер» и т.п. — это все правильно в теории, но на практике — лабуда. Давайте разберемся. Есть у меня портал realto.ru. Вес заглавной страницы в коде — 136 Кб с контентом. Если выкинуть контент, то, примерно 70 Кб (это с учетом меню, всяких счетчиков и прочей служебной инфы). При этом, когда страница загружается, то передается до 800 Кб данных (картинки, файлы js-скриптов, css и прочее, что кешируется на клиенте и при повторной загрузке происходит передача порядка 250-300Кб).
    Сокращаем исходный текст страницы в 2 раза за счет дивовой верстки и получаем 70/2 = 35 кб. При этом количество графики и контента осталось прежней. И клиент, зайдя страницу портала в первый раз не заметит особой разницы (да, на модемном соединении 35 Кб — это порядка 5 секунд, но я не думаю, что «модемники» — основные посетители сайтов :) ). Все равно соотношения контент/код будет всегда с большиииим отрывом в сторону контента. Поэтому, да, код сокращается, но клиентам это абсолютно фиолетово.
    Теперь давайте разберемся с «нагрузкой на сервер». Воспользуемся открытой статистикой и посмотрим на посещаемость сайта: за прошедшую полную неделю у нас было 375 429 просмотров. За один просмотр мы уменьшили передаваемых данных на 35 Кб. Значит, за неделю у нас сократился трафик 13 мегабайт с копейками. Значит, за день мы имее выигрыш чуть меньше 2 Мб. Мне кажется, эта цифра абсолютна несерьезная по нынешним меркам. Особенно, если учесть, что общий ежедневный исходящий трафик нашего сайта около 7 ГБ в сутки! Выигрыш составит 0.03%.
    А теперь давайте о негативных сторонах. Первая и самая страшная — отсутствие кроссбраузерности. Все эти шаманские трюки во-первых, затрудняют разработку, а во-вторых, делают ее более дорогой — и специалист по див-верстке дороже стоит, и времени на одну и ту же страницу будет уходить больше. В итоге мы получаем чистый убыток :) Я уже не говорю о том, что переделать с таблиц на дивы — это тоже время, которое деньги.
    Вобщем, увы и ах. На данный момент применять данную технологию в промышленных масштабах нерентабельно. Но это не значит, что надо забыть о ней и отказаться. Нет, развивать это направление нужно. Но не нужно слепо бросаться делать именно так :)
    С наилучшими пожеланиями :)

  6. 6
    @

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

    P.S. И, кстати, многие так называемые «недостатки» div’ной верстки это просто следствие эмуляции «табличных стереотипов» на которые нас подсадили, все эти «колонки одинаковой высоты», «футер внизу страницы», да еще часть из них появилась как глюки браузеров под которые потом адаптировали стандарт.

    P.P.S. Насчет «порядков» когда некоторые умники мне заявляют, что я выразился неправильно сказав, что 10 больше 5 на порядок, я отвечаю, что я не говорил на какой порядок и предпочитаю считать в двоичной системе счисления :) А там порядок — это в два раза, а три порядка это 8 раз — вполне можно сократить код кода сверстанного вложенными талицами дивами в 8-10 раз при везении :)

  7. 7
    Ikarushka

    VolCh — отличный ответ! Особенно про порядки понравилось :). А про лень тоже прямо в точку. В этом случае лень не выступает в качестве двигателя прогресса, скорее наоборот.

  8. 8
    wz
    @

    хаки как раз в помощь. недавно перешел на безтабл верстку. Поначалу долго матерился ;) css штука мощная — но почему каждый бровзер ее понимает по своему? И тогда какой бровзер наиболее близок к стандарту?

  9. 9

    css штука мощная — но почему каждый бровзер ее понимает по своему?

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

    И тогда какой бровзер наиболее близок к стандарту?

    Safari/Google Chrome, Opera 9.5, FireFox 3.

  10. 10
    wz
    @

    Не конструктивно, но: «А дизайнеры потом разгребают все несостыки. Кто как может.»

  11. 11
    вован
    @

    вобщем правильная статья.

    1. насчет уменьшения кода. да, пусть оно по современным меркам мизерное. но блин, самому ж приятнее! приятнее и сам факт осознавать, и смотерть на код, и раздуплять его. я свои «табличные» хтмлы, сравнительно небольшие, написанные когда-то давно, с трудом раздупляю. а если надо чёто понять в чужом коде, то там черт ногу сломит. посмотрите на сайты, которые предлагает ucoz.ru. их верстать — одно удовольствие:

    <html>
    <head>
    <title>$TITLE$</title>
    </head>
    <body>
    <div id="contanier"> 
     <div id="wrap">
     <div id="topPick">
     <div id="dataBar">
     <div id="rssBlock">$RSS_LINK$</div>
    </div>
     <div id="sidebar">
     <div class="menuTable">$SITE_MENU$</div>
     </div>
     <div id="content">
     <div id="logo">$SITE_LOGO$</div>
     <div id="textBlock">$BODY$ </div>
     </div>
     <div id="footer">$POWERED_BY$</div>
     </div>
     </div>
    </div>
    </body>
    </html>
    

    вот тебе и вся страница.

    2. Михаил, насчет css молчал бы. как будто css не используется при табличной вёрстке, ага. не верю!

    3. а ну-ка, противники divовой верстки сделайте мне таблицами вот это:

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

  12. 12

    вован, спасибо за поддержку ;) Я уже вообще отказал от табличной верстки, верстаю теперь принципиально только на дивах.

  13. 13
    вован
    @

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

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

    зы: жалко картинки не вставляются в каменты, там по ссылочке хороший примерчик ;)

  14. 14
    Никитин Максим

    вован, а что ты хочешь увидеть? Первый пример решается точно так же, только вместо дивов используем классы у таблиц. Да, кода больше, но решаемо так же легко. Второй пример решается тоже очень легко, объем кода — такой же, как и с дивами.
    Я считаю, что это крайности — использовать ТОЛЬКО таблицы или ТОЛЬКО дивы. Нужно совмещать.

  15. 15
    вован
    @

    Никитин Максим, первый пример. ессно можно. ессно точно также через стили в css. но тут-то как раз спор идёт между дивы+css и таблицы без css. улавливаешь?
    насчет второго — полностью согласен. «золотые слова, венедикт абрамович!» я ни в коем случае не призываю полностью отказываться от таблиц. кесарю — кесарево. нужно умело орудовать всем что есть в html. и при этом не недооценивать тег div

  16. 16

    естественно нелегко слазить на другую технику/принцип

    Я бы так не сказал. Я очень быстро освоился в блочной верстке. Сложностей никаких нет, все упирается в знание технологии CSS. До этого я несколько лет верстал таблицами, и привычка мне нисколько не помешала. Тут, ИМХО, зависит от стремления оптимизировать код и верстать по последним стандартам.

    Никитин Максим, таблицы придуманы для того, чтобы выводить на странице табличные данные, а не для разметки страницы, поэтому должно быть «ТОЛЬКО дивы» и никаких крайностей =)

  17. 17
    вован
    @

    Dimox,

    Я очень быстро освоился в блочной верстке.

    ну, судя по каментам, тут далеко не всем по зубам такой «подвиг» :D

  18. 18

    Грамадное спасибо за правила, которые определяют только тот или иной браузер. Это круто.. Раньше не знал об этом!
    **Пошел шаблоны переделывать, которые давно не получались..**

  19. 19

    WebMast, лучше эту статью посмотрите, там более свежая информация по хакам.

  20. 20
    nephros

    Dimox, вечный прей за http://blog.html.it/layoutgala/ ^^