Главная CSS-верстка

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

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

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

  1. Огромный сенкс за обзор. Нашел очень много для себя полезного на ссылках, предоставленных в данном обзоре.

  2. Пожалуйста.
    Рад, что помог информативно.

  3. Спасибо за замечательный обзор. Советую вам в числе сслыок добавить сайт htmlbook.ru. Все о верстке таблицами и дивами нашел там!

  4. Убил пол дня пок не нашел как сделать так чтобы при сужении браузера, информация не съезжала в кучу для ie 6.0
    спасибо вообщем за width: expression ((documentElement.clientWidth||document.body.clientWidth)

  5. alexey, пожалуйста. Ссылку добавил.

    Строитель, пожалуйста.

  6. Вот человек пишет «Существенное уменьшение размера страницы, как правило на 2−3 порядка» Интересно уважаемый автор, Вы хоть представляете себе что такое «порядок»? Что, блин, в 100 раз уменьшаяется ?! Сомневаюсь!!!
    Как можно писать статьи и бросаться словами, смысл которых как оказалось не совсем Вам понятен, причем это уже в самом начале изложения.
    О красоте тут тоже можно поспорить. Что может красивого в огромном списке дивов? Как правило с совершенно не говорящими именами классов и id?! Они не дают никакого представления о структуре документа, придется открывать ещё и таблицу стилей, а их может быть штук 10 и втыкть сидеть.
    Когда перед тобой табличная хорошо отформатированная верстка + dom inspector то тут вообще никаких вопросов не возникает! ВСе наглядно и понятно. А прирост кода не такой уж и большой… Ну пусть хтмл вырастет с 15 kb до 25 это полная фигня. И почему-то все говорят про рост хтмл файла, но css тоже растет при этом, не нужно забывать.

    Мое личное мнение, что разговоры про div верстку это ещё один из путей к выманиванию денег из людей, но никак не больше… Да возьмите любой высокочастотный запрос и введите в яндексе например. ЧТо полезут все сайты с div версткой? Ха! Смешно даже!

    А автору я могу сказать, да сделали подборку материалов, здорово, но рефераты учат писать ещё в школе. Может те 3 потраченных Вами года на верстку стоило потрать с большей пользой? Например в ВУЗ к-нить поступить или начать там учиться, а не верстать. не ленитесь думать головой!

  7. Вот человек пишет «Существенное уменьшение размера страницы, как правило на 2−3 порядка» Интересно уважаемый автор, Вы хоть представляете себе что такое «порядок»? Что, блин, в 100 раз уменьшаяется ?! Сомневаюсь!!!

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

    Что может красивого в огромном списке дивов?

    А что красивого во множестве вложенных таблиц?

    Как правило с совершенно не говорящими именами классов и id?!

    id="header", id="menu", id="footer" и тому подобные идентификаторы Вам ни о чем не говорят?

    Они не дают никакого представления о структуре документа, придется открывать ещё и таблицу стилей, а их может быть штук 10 и втыкть сидеть.

    Естественно, если Вы напишите id="block1″ вместо id="header", то подобная структура ни о чем Вам и не скажет. Или Вы предпочитаете втыкать стили объемом в эти самые «штук 10» прямо в теги? И что, при этом они Вам говорят о структуре страницы?

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

    И почему-то все говорят про рост хтмл файла, но css тоже растет при этом, не нужно забывать.

    Вы не задумывались над тем, что раз «все говорят», то в этом, наверное, есть какой-то смысл, и это мнение не взято с потолка?

    Главное, что не нужно забывать — большой CSS-файл грузится всего один раз, после чего кэшируется на компьютере, а Ваши хтмл-страницы каждый раз буду большими за счет повторения в каждой из них одних и тех же стилей. В итоге вариант DIV+CSS все равно выигрывает по размеру.

    Да возьмите любой высокочастотный запрос и введите в яндексе например. ЧТо полезут все сайты с div версткой? Ха! Смешно даже!

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

    А автору я могу сказать, да сделали подборку материалов, здорово, но рефераты учат писать ещё в школе.

    И что в этом плохого? Раз уже Вы называете это рефератом, то скажу так. Я не любил писать рефераты в школе, зато теперь делаю это с большим удовольствием и пишу на наиболее интересные мне темы.

    Например в ВУЗ к-нить поступить или начать там учиться, а не верстать

    Какой-нибудь ВУЗ я уже закончил и мне его вполне хватило. И уж не Вам решать, чем мне заниматься, это точно!

    • Из своего опыта, имхо. Если рассматривать Div-ную верстку с точки зрения дизайна, согласен возможностей больше. С точки зрения удобства пользования чужим кодом, табличная лучше. Не знаю у кого как, CSS использую и в том и в другом варианте. С точки зрения Сео, смотря на кого работаете. Если нужен Гугл, то не принципиально какая верстка. Если Яндекс, то все мои опыты мне подсказывают, что при сравнительно равных условиях табличная верстка на шаг впереди. С точки зрения верстки в целом, верстаю их в совокупности и никогда не ставил себе задачи верстать чисто в дивах или чисто в таблицах. У каждого тега есть свои преимущества, смотря какие задачи вы ставите.

    • Dimox, Ваш оппонент хоть и конфликтно высказался, но совершенно прав указав на Ваш недочёт с «порядками». Я бы сказал комментирующему «спасибо», а огреху в статье исправил.

  8. Статья в целом полезная и приятная. :))

    И все же насчет «порядков» я не соглашусь с вами, Dimox.

    Не соглашусь вот в этом —

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

    Все-таки — порядок — это, если по простому — «еще один нолик в числе справа» :))

    то-есть:
    1, 2, 5, 9 — первый порядок
    10, 50, 70 — второй порядок
    100, 300, 800 — третий порядок
    и т. д. :))

    так что на самом деле речь идет о «в сто раз, в тысячу раз» а никак не «в два-три раза» :))

    Умейте ценить здоровую критику и замечания. :))

  9. Исправил ошибку.

    Я же не против замечаний и критики. И то, и другое для профилактики тоже нужно :).

  10. ну вот :)) видимо, пару лекций вы таки пропустили в институте :))

    и еще вот тут:

    width: expression((documentElement.clientWidth||document.body.clientWidth)<1000?'1000px':''); /* Internet Explorer <= 6.0 */

    правильнее будет, видимо:

    width: expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?'1000px':'100%');

    по крайней мере, у меня только в таком варианте заработало…

  11. И опять замечание :))

    писать НА 2−3 раза — неграмотно…
    можно писать «В 2−3 раза»… а если и «НА», то тогда уместнее применить проценты, например — «НА 50−66%»

    зы. да, я бываю занудой…

  12. ну вот :)) видимо, пару лекций вы таки пропустили в институте :))

    То, чем я занимаюсь сейчас, не имеет к институту абсолютно никакого отношения. Так что это замечание здесь совсем не уместно.

    Я всегда использовал указанный мной способ width: expression и у меня не возникало с этим проблем.

    можно писать «В 2−3 раза»

    Конечно же «в». Списываю на то, что ночью исправлял.

  13. Дело даже не в том, что при дивовской верстке уменьшается объем кода. Дело в том, что дивовская верстка соответствует концепции HTML, как языка РАЗМЕТКИ. Все оформление выносим из HTML — в HTML части только структура документа. В идеале должно получаться, что все заголовки действительно заголовки, все подзаголовки — действительно подзаголовки. Такой документ намного легче, чем табличный, встраивать в php-движок. Но браузеры, заразы, слегка поразному поддерживают CSS — приходится выкручиваться, писать хаки — это раздрожает. Пока браузеры не договоряться меж собой — табличная верстка будет существовать — это вполне естественно — она гарантирует кроссбраузерность. Как только договоряться — табличная верстка ИМХО отомрет.
    Статья хорошая. Приятная
    Есть еще одна книженция по CSS верстке
    МАСТЕРСКАЯ CSS Энди Бадд — толковая книжка, всем рекомендую

    • Браузеры никогда не договорятся. Обратите внимание, что стандарта вообще нет. Есть рекомендации. Которых можно придерживаться, а можно не придерживаться.

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

      Да и собственно, развитие возникает благодаря противоречиям.

  14. MoonElk, спасибо, что дополнили пунктом «HTML, как язык РАЗМЕТКИ», кажется об этом я не упоминал. Нужно как раз к этому и стремиться, используя дивовую верстку.

    За ссылку на книгу тоже спасибо.

  15. Нашел этот пост в колонке блога «популярные заметки», посему надеюсь его дата добавления не преграда сюда написать. Короче вопрос, каким инструментом пользуетесь при верстке? Я по сути не верстальщик, но с ХТМЛ+КСС приходится сталкивался все время, и когда получаю макет на таблицах, то в Макромедиа МХ все чудно так отображается, я вижу параллельно код и внешний вид страницы — юзабилити, все дела. Но когда там открываю ДИВ-верстку это жуть: все слои один на одном, разобрать что-то нереально. Возможно, просто нужно смерить инструмент для работы с ХТМЛ+КСС? Тогда на какой именно?
    Заранее спасибо за совет, если таковой последует:)

  16. …посему надеюсь его дата добавления не преграда сюда написать

    Верно.

    каким инструментом пользуетесь при верстке?

    Мой инструмент для версткий — текстовый редактор PSPad. А результат сразу проверяю в браузерах. Возможно, что Ваш Макромедиа МХ использует движок IE, который известен своей неполноценной поддержкой CSS, оттого и может все разъезжаться. Кроме того, в дивовой верстке есть много заковырок, которые нужно учитывать, чтобы получить кроссбраузерный код.

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

  17. Ок, спасибо. Буду разбираться.
    Может кто-то еще чем-то интересным при верстке пользуется — рассказывайте:)

  18. Спасибо за советы по подстройке под браузеры.

  19. Один из скриптов своего интернет-магазина решил перевести с TABLE верстки на DIV.

    С удивлением просматривая HTML код страниц смотрел на таблицы 5−6 вложенности, и с еще большим удивлением смотрел на то, как в 3−5 раз сокращался код и «прозрачность» кода HTML при переверстки на DIV!

    Одно смущает — нужно привыкнуть к тому, что с DIV нужно уметь более гибко мысль, чем с TABLE где все само собой берет и выравнимается или объединяется по строкам или столбцам.

  20. С удивлением просматривая HTML код страниц смотрел на таблицы 5−6 вложенности, и с еще большим удивлением смотрел на то, как в 3−5 раз сокращался код и «прозрачность» кода HTML при переверстки на DIV!

    Вот-вот! Меня данные обстоятельства каждый раз радуют, когда переверстываю с таблиц :).

    Одно смущает — нужно привыкнуть к тому, что с DIV нужно уметь более гибко мысль, чем с TABLE

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