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

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

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

    Если использовать хаки в єтом процессе есть один минус, в следующих версиях браузеров эти хаки могут быть исправлены, тогда при каждом выходе новой версии браузера прийдется переделывать CSS сайта, а если сайт не один а 100, вот тогда это будет сполшной гемор.

  2. 2
    agita
    @

    С момента публикации прошло 2 года, а главная проблема, о которой почему-то никак не упомянается, осталась актуальной и по сей день. Основа дивной верстки — CSS, всё верно. Только вот CSS до сих пор не имеет нормальной и одинаковой интерпритации в разных браузерах. Да что там говорить — некоторые браузеры CSS 2 до сих пор с горем пополам понимают, а W3C уже на CSS3 замахнулись.
    Я не видел ни одного «дивного» сайта (в отличии от табличных), который абсолютно одинаково выглядел бы во всех браузерах: То есть сайт может красиво смотреться во всех браузерах, но не одинаково. Конечно, можно пичкать CSS всё новыми и новыми хаками, дополнительными параметрами и исправлениями. В итоге мы имеем настолько запутанный CSS файл, что без бутылки не разберешься…

  3. 3
    Quixotic

    «agita»
    Согласен!

  4. 4
    Алексей

    Те, кто кричали, что «порядок — это еще один нолик в числе», правы. А те, что кричали «на два порядка это в 100 раз» — мудаки, пытающиеся вые%нуться. Не стоит забывать, что существует и 2ичная система счисления, для которой «на 2 порядка» означает в 4 раза, что в общем-то и наблюдается. Не следует приковыриваться к словам, если САМИ НЕ ЗНАЕТЕ О ЧЕМ ГОВОРИТЕ!

    Автору респект!

  5. 5
    @

    Спасибо, давно думал перейти на ДИВ…

    После этой статейки, это сделаю :)

  6. 6

    Как сделать верстку вида

    a b
    c d

    так чтобы получился сдвиг второй строчки:

    18.10 FireFox для iPhone появится в ближайшие
    пару недель?

  7. 9
    @

    Спасибо, отличная статья.

    Теперь только DIV использую.

  8. 10
    Gnom
    @

    Спасибо, отличная статья.
    Но у меня не появляется горизонтальная прокрутка при сжатии броузера
    В чем может быть проблема

  9. 11
    den

    2–3 порядка — это 2-3 раза, но уж никак не 100 раз. Возможно, что я неправильно понимаю “порядок”.

    «На порядок больше» — означает больше в 10 раз.
    «На два порядка» — в 100 раз.

    Какбэ синоним слова «разряд»… кхм….

  10. 12
    Дима

    Например, так:
    1218.10 FireFox для iPhone появится в ближайшие
    пару недель?

    Эта величина — 40px — вычисляется опытным путем?

  11. 13
    Proway

    был вопрос о том как сделать СДВИГ слева, и был приведен ПРИМЕР того как это можно сделать, хотя и вопрос и ответ оставляют желать лучшего

    ставьте хоть 400 пикселей, хоть 40000 пикселей, «вычисляется» это лишь теми инструментами, которые вы используете в верстке (в моем случае — блокнот, firebug и pixelperfect) и дизайном, по которому предстоит верстать сайт.

    • 14

      был вопрос о том как сделать СДВИГ слева, и был приведен ПРИМЕР того как это можно сделать, хотя и вопрос и ответ оставляют желать лучшего

      Каков вопрос, таков и ответ =)

  12. 15
    Proway

    ну так именно это я и сказал : )

  13. 16
    Павел
    @

    Что не говори, а таблицы удобны при быстрой верстке в визуальном редакторе. Повставлял таблиц и сразу все видно, а с дивами так не покатит :)

    p.s. я не сторонник ни таблиц и ни дивов, я вообще программер :)

  14. 17
    Ewing

    Господа, вы забыли упомянуть одну из важнейших (на мой взгляд) особенностей табличной верстки: чтобы отобразить таблицу с содержимым, браузеру надо сначала загрузить ВСЁ её содержимое. Поэтому типичное поведение насыщенного графикой и наворотами табличного сайта для пользователя с dial-up’ом (да-да, таких в России весьма немало на сегодняшний день!) — это показ в течении 1-2-3 минут абсолютно пустой страницы. Значительная часть их просто не дожидается и уходит. А блоки можно расположить сверху вниз по значимости и посетитель сразу увидит основной контент, попозже загрузится меню, и в последнюю очередь — всякие украшательства…

    • 18

      Спасибо за дополнение. Действительно, забыл про это.

    • 19
      Ewing

      P.S. раз уж коммент оказался полезным…

      Доводилось видеть такое: старается человек, делает совершенно грамотную вёрстку, а в последний момент вставляет всё в «одну-единственную» простую таблицу из двух строк («чтобы подвал к низу прижать…»). И всё. Этим напрочь убиваются все преимущества от правильной вёрстки.

    • 21
      Проша

      Полный бред! ВСЕ повторяю для Апачи(индейцев) ВСЕ браузеры умеют рисовать таблицы по мере загрузки. Добро пожаловать в будущее господа СТАРпёры.
      DIV — это не плохо, но только полнейший ЛАМО может сказать «Онли DIV фаревор».
      Таблицы проектировать ПРОЩЕ чем рассчитывать ДИВы! Сдишь с линейкой и вымеряешь миллиметры..
      Да и про вертикальное выравнивание забыли написать? а? в IE супергеморойно через дивы делается вертикальное выравнивание. В некоторых случаях DIV отображается непредсказуемо, в разных браузерах по разному! Таблицы на этом фоне более крассбраузерны, более талерантны!

      • 22
        Den
        @

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

        • 23
          dan

          div блоками делают лишь некоторые части сайта. полностью верстать сайт блоками долго, а нормальные люди экономят время.

          + таблица красивее и лучше смотрится на сайте…

  15. 24
    Дмитрий
    @

    Некоторые возможности таблиц, например увязывать размеры одних элементов с размерами др. элементов, достаточно востребованны для верстки. Имеет ли смысл эмулировать данные уникальные свойства с помощью блочной верстки?
    На мой взгляд , нет.
    Страдает визуальная прозрачность кода, которая указывалась, как преимущество блочной верстки. Естественно и времени на создание страницы требуется больше.
    Приведу пример.
    Я знаю, что Вы ,Dimox, работали над проблемой эмуляции одинаковой высоты колонок. Было представлено довольно интересное и нетривиальное решение. Я не сразу понял, что вы использовали большие отступы и границы, в качестве подложки для сайдбаров. Не сомневаюсь , что решение станет еще более интересным, если колонок будет больше.
    Сверстать таблицей намного проще, быстрее и доступнее для понимания.
    Из всего вышеизложенного не следует, что я являюсь противником блочной верстки, просто, по-моему не стоит так рьяно открещиваться от верстки с помощью таблиц.

  16. 25
    peter

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

    Кстати если убрать или добавить у меня в html закрывающий или открывающий див, то сайт весь развалиться в прямой смысле.

  17. 26
    Buh

    Спасибо за генератор! Не знал что такие есть, оказалось это то что мне нужно!

  18. 27
    Макс
    @

    С точки зрения веб-бизнеса коммерческих сайтов с CMS — вёрстка div ами убыток чистой воды, нужно иметь верстальщика ну очень выского уровня чтобы не было столько косяков сколько их при вёрстки div ами. В нашей компании запрещено верстатть исключительно div ами. Нужно верстать и div ами и таблицами — всё должно быть оптимально. Все косяки какие были связаны с вёрсткой сайтов за 5 лет, связаны именно с вёрсткой div. Причем если ошибка в табличной верстки — то визуально она небольшая, а если ошибка в div то — весь сайт съезжает. Для коммерческих сайтов, где работать могут несколько человек — верстка div ами — это убыток.

    • 28
      Vydr
      @

      Совершенно согласен Максом. Самый оптимальный вариант с точки зрения бизнеса — общая табличная верстка с применением div’ов для задач сео (вынос контента вверх кода) и «извратов» дизайна, когда дизайнер рисует «красотищу» и его не ипет, как это потом верстать. Когда в работе параллельно штук 5 сайтов + штук 40-50 на поддержке — извращаться в дивами ради непонятной «красоты кода»…


      <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>

      Да, кода мало. Но представьте, что верстал это один дизайнер, а сегодня он занят и я даю сделать что-то другому. Да он не меньше часа потратит на то, чтобы разобраться что куда и как. А если сайт не такой простой по дизайну, как предложенный вариант?

      Мне самому нравятся дивы за то, что гораздо проще позволяют сделать некоторые дизайнерские задумки, скриптовые меню и другие красоты современного инета. Но весь сайт на дивах? И потом ждать с ужасом в какой момент тебе позвонит заказчик и скажет, что у его папы дома на ие4 или 5 сайт весь расколбасило. И заказчику не скажешь, как делают многие «крутые» сайтостроители: «Сайт для просмотра в (список последних браузеров), всем поклонникам ie4,5,6 (иногда умудряются в список добавлять даже нетскейп) идти лесом». Или нанимать отдельного человека, чтобы он сидел и тупо тестировал сайты на всех доступных браузерах…

      Но как можно рекламировать то, для чего требуется держать в голове кучу особенностей и знать хаки для всех браузеров. ИМХО, всегда нудно стремиться к золотой середине. И стремление верстать только дивами так же попахивает в данной ситуации безумством, как и вертска таблицами без css (я таких идиотов еще не видел, чтобы не использовали стили).

  19. 29
    Андрей
    @

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

    • 30
      Nikius

      Вот-вот. У меня в последнее время именно такие «умные» клиенты и попадаются. Причем считают верстку дивами «прогрессивной технологией» :). Особенно мне «нравится», когда просят такую верстку, да чтоб работала на самых старых браузерах. Плюс учесть возможность того, что у юзверя могут быть отключены яваскрипты.

  20. 31
    Унылокакто

    ну и где статья?
    вы прям как К.О. рассказали самое очевидное и накидали непрямых ссылок(нетематических)
    странно что вашу страницу выдало в гугле одной из первых =(