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

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

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

О том и поговорим.

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

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

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

То, что расположено в таблице:

<table>
	<tr>
		<td>текст</td>
	</tr>
</table>

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

<div>текст</div>

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

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

Как говорится, все приходит с опытом, поэтому, видимо, несколько месяца назад, когда я решил попробовать DIV’ы, такой тип верстки вызвал у меня неподдельный интерес и с тех пор является для меня фаворитом.

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

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

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

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

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

Теперь непосредственно к практике.

Озадачившись необходимостью изучить побольше информации про блочную верстку, в Интернете я не нашел пособия или руководства, которое бы от и до рассказало о технологии данного способа верстки (как я понял, на тему дивовой верстки вообще гораздо меньше практикума, чем по табличной верстке). Тем не менее, нашлись веб-ресурсы, на которых есть нужная информация. Изучив ее, можно получить представление о блочной верстке и попробовать применить знания на практике.

Итак, вот какие источники я посоветую. Полезно будет изучить тем, кто хочет перейти на DIV’ы и развить свои навыки в CSS.

  • Webmascon — Наверное, самый популярный сайт по теме. Жаль только, что он больше не обновляется. Кроме всего прочего, на сайте размещены несколько глав из книг Михаила Дубакова «Создание Web-страниц. Искусство верстки» и «Веб-мастеринг средствами CSS», которых я, к сожеланию, нигде найти не мог (хочется почитать). Очень рекомендую этот сайт!
  • Библиотека Сайтостроительства — Достаточно много как теоретической, так и практической информации, изложенной простым языком. Рекомендую!
  • Заметки HTML кодера — есть много интересных примеров применения CSS.
  • Tigir.com о web-технологиях — тоже есть интересные примеры.
  • CSSing — Блог про CSS и все что с этим связано. Новые приемы и технологии и т. д.
  • htmlbook.ru — Учебники по HTML, CSS, дизайну, графике и созданию сайтов.
  • Дэйв Ши, Молли Хольцшлаг. «Философия CSS-дизайна» — В этой книге на примере широко известного сайта CSS Zen Garden рассматривается применение каскадных таблиц стилей. Здесь нашли отражение такие вопросы, как подготовка HTML-разметки для последующего применения стилей, синтаксис языка CSS, принципы верстки, методы работы с графикой, особенности использования цвета, типографские эффекты и многое другое. Не осталась без внимания проблема неодинакового уровня поддержки CSS разными браузерами; авторы рассказывают о приемах, с помощью которых можно добиться межбраузерной совместимости.

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

    «Философию CSS-дизайна» можно скачать в Интернете в формате PDF (23 Mb). Однако качество сканирования на удовлетворительном уровнем, поэтому изучать ее в таком форме совсем неудобно. Именно по этой причине я купил реальную книгу в Интернете, чего и Вам советую, если проявите интерес.

  • Layout Gala — примеры вариантов верстки дивами. Есть множество решений, как для страниц с фиксированной шириной блоков, так и для процентной.
  • Генератор HTML+CSS шаблонов — Web 2.0 сервис, одним из создателей которого является автор этого блога. Данный инструмент в соответствии с выбранными параметрами генерирует 2 файла: CSS и HTML, которые представляют базовую основу (каркас) для будущего сайта. Большинство выдаваемых сервисом вариантов основано на структуре макетов вышеуказанного сайта Layout Gala, но они лишены одного бага, который присутствует в макетах Layout Gala.
  • Учебник по CSS-верстке — систематизированный список популярных статей для быстрого освоения принципов CSS-верстки. Рассчитано на специалистов, имеющих опыт веб-разработки.

Вот еще несколько книг, которые мне рекомендовали к прочтению в одном из дискуссионных листов Subscribe.Ru:

  • Джеффри Зельдман. «Web-дизайн по стандартам.» (общие вопросы проблематики современной верстки, исторический экскурс)
  • Дэн Седерхольм. «Пуленепробиваемый web-дизайн.» (сугубо практика и трюки)
  • Эрик Мейер. «CSS-каскадные таблицы стилей. Подробное руководство.» (говорят, что это просто библия!)

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

В отдельной статье, которая периодически обновляется, я собрал хаки для разных современных интернет-браузеров: Персональные CSS-хаки для Internet Explorer, Opera, FireFox, Safari, Google Chrome.

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

Также хочу обратить внимание на следующее свойство, которое требуется для задания минимальной ширины страницы при блочной верстке, чтобы при сужении браузера, информация не съезжала в кучу (если ширина страницы «резиновая»):

#wrapper {
	width: expression((documentElement.clientWidth||document.body.clientWidth)<1000?'1000px':''); /* Internet Explorer <= 6.0 */
	min-width: 1000px; /* Opera & FireFox & Safari & Google Chrome & Internet Explorer 7+ */
}

На этом пока все.

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

  1. Невский Александр Рашидович
    13 лет 4 месяца назад

    Все проще верстать таблицами, а дивами интереснее, интересно что нам приготовит HTML5

  2. тем кто любит таблицы скажу: «div'овая вёрстка превосходит таблицы по многим параметрам, если у Вас, что-то расползается, не нужно грешить всё на div’ы. В первую очередь нужно иметь достаточно знаний и «прямые» руки. Кстати, div’ы применяются на сайте Консорциума Всемирной Паутины и на перечне других авторитетных сайтов!

    • В точку, согласен с вами, коллега.

    • Штука такая, что на приобретение знаний уходит время (невосполнимый ресурс), и, зачастую, средства. Книжку купить, интернет оплатить. А руки распрямляются от длительной работе на определённом поприще.

      Я тоже программист, и надо понимать, что моё время и средства уходят на реализацию себя этом поприще.

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

  3. Господа, всем реальное спасибо за мнения! Комменты меня очень просветили и порадовали. Я давно не занимался версткой, но назрел вопрос новой домашней странички, который хотел решить только новомодными технологиями, а именно — исключительно на дивах.
    Прочитав весь тред, я передумал. Попытаюсь делать комбайн с моими любимыми таблицами.
    Таблицы — проще некуда, любое выравнивание, позиционирование; а в дивы втыкаю третий день (4 способа раскладки) и все равно еще не до конца въехал :)
    Интересно, а сайт на одних таблицах (с цсс, конечно) — это совсем вчерашний день? Домашка из 10−20 страничек.

    • Вот пример моего сайта про сноубординг, сверстанного исключительно таблицами, кроме разве некоторых скриптовых слайдеров и прочих извратов. Посещаемость — 2000, по тематическим запросам — процентов 80 на первой странице в гугле и яндексе. А что нам еще для счастья надо.

  4. Такая вёрстка сайта, на мой взгляд, больше нравится ПС. Спасибо.

  5. Да, на div код и кажется проше, но когда я в своем случае строел таблицы — насмучался. Проблема постояно с переносами на новые строки — то они сами сдвигаются то надо подгонять

  6. Мы на бизнес сайтах используем только табличную верстку для нарезки дизайна. Дивы это всегда бессмысленный геморрой. Поисковики прекрасно работают с любой версткой, это 21 век. Вы не сделаете элементарное задание на дивах которое я сверстаю на таблице за 5 минут.

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

    <div id="xxx"></div>

    и таблиц

    <td class="xxx"></td>

    Кто сомневается, попробуйте сверстать две строчки с пятью столбцами общей шириной в 800 пикселей с выравниванием в браузере по центру. И в каждую ячейку вставить по картинке, выдержав отступы между ячейками и внутри них в 5 пикселей и отцентрировать картинки в них по вертикали.
    html код в студию (ксс не стОит, ибо div заведомо в проигрыше)
    А ваши баллады с быстротой загрузки страниц — смех да и только.
    Много ли людей, у которых сейчас dial-up?

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