На протяжении последних двух лет я только и слышу от заказчика (ов), что он желает сверстать имеющийся у него макет дизайна сайта с использованием блоков. Т.е. ему нужна блочная верстка построенная на DIV и CSS. Но так ли хорош такой код? Об этом я задумываюсь уже на протяжении длительного времени. Мне приходилось создавать разные сайты, многие из которых были сверстаны с применением таблиц, блоков или третьего варианта блоков и таблиц.

На мой взгляд преимущества блочной верстки над табличной очевидны, это:

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

Но наряду с этими, вроде бы как преимуществами, возникает целый ряд проблем и недостатков, связанных уже с самим процессом блочной верстки и с отображением ее в разных браузерах (Особенно проблемы возникают с Internet Explorer 6).

Основные недостатки , на которые так же следует обратить внимания:

• Для написания правильно работающего кода во всех браузерах, и корректного отображения страницы в последствии, требуется гораздо больше времени чем при использовании табличной верстки
• Порой написанный код получается гораздо больше чем ожидалось изначально, это происходит в следствии разных подгонок, корректировок, хаков или дополнительно написанных стилей для отдельных браузеров
• За частую приходиться прибегать к применению JavaScript или библиотек типа jQuery, что так же сказывается не лучшим образом для сайта в целом. Возможно не правильно отображение страницы если у пользователя браузер не поддерживает выполнение JS или это функция отключена.
• Опять же что касается такого проблемного браузера как IE6. В блочной верстке часто используется параметр позиционирования float (влево или вправо), часто блоки начинают прыгать и заползать друг под друга, при изменении размеров страницы (окна браузера). Так же замечалось, что когда в IE Tester (6) все работает нормально, в самом же IE6 были сплошные недочеты.
• Не редко приходиться для закрашивания или подгонки фона, использовать дополнительные картинки. Например когда блок навигации не удается растянуть по всей высоте страницы до футера, применяется метод для отрисовки ложных колонок — Faux columns
• Так же часто стоимость по таким работам выходит больше нежели стоимость табличной верстки.

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

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

Эта статья будет полезна начинающим вебразработчикам, которые только становятся на тернистый путь "сайтостроителей" и хотят самостоятельно делать сайты . Вебразработчики со стажем тоже смогут что-то почерпнуть для себя, в частности в статье сравниваются достоинства и недостатки табличной и блочной верстки .
Пожалуй, нужно начать с того, что такое верстка сайта? Верстальщик получает от дизайнера макет будущего сайта, как правило, макеты предоставляются в формате photoshop. Макет это по сути рисунок, только более детализированный, в нем отдельные элементы (меню, шапка сайты...) разнесены по слоям, это получается естественным путем когда дизайнер рисует макет, кроме того это очень удобно, можно легко скопировать рисунок с нужно слоя, посмотреть параметры шрифта и т.д. Так вот суть верстки в трансформации макета в html документ и составления набора CSS правил.

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

Виды верстки

Как заявлено в названии верстка бывает блочная или табличная . В блочной верстке элементы сайта структурируются с помощью блоков (div ), в табличной верстке обходятся таблицами (table ).

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

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

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

шапка
контент	сайдбар
футер

таблице следует задавать конкретную фиксированную ширину, если макет имеет фиксированную ширину или 100%, если макет резиновый, в этом случае таблица будет растягиваться по ширине экрана в зависимости от разрешения монитора.

Достоинства и недостатки табличной верстки:

• Проста в понимании, не требует более глубоких знаний HTML и CSS (+ )
• Интуитивно понятна при построении, минимум CSS правил (+ )
• Трудно разбираться в HTML коде при более сложной структуре сайта (- )
• Пока вся таблица не загрузиться она не будет показана на экране (- )
• Сложный дизайн с перекрытием элементов не реализуем (- )
• Много лишнего кода (- )

Остановимся поподробнее на 4-ом пункте. Дело в том, что HTML таблицы устроены таким образом, что браузер не может знать заранее как рисовать таблицу с ее содержимым, пока оно незагружено, до тех пор, пока последний рисунок, находящийся в таблице не будет загружен, таблица не будет показана на экране браузера, что может стать причиной ухода пользователей с сайта не дождавшись отображения страницы, поскольку посетитель не видит ничего на экране некоторое время. Создается впечатление будто сайт тормозит, на самом деле браузер ждет пока все элементы таблицы будут загружены.

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

Блочная верстка базируется на том, что блочные элементы HTML, как правило, располагаются по вертикали, сверху вниз друг за другом в том порядке, в котором они встречаются в HTML коде. Кроме этого блокам можно задавать свойство плавучести (float:left | right | none | inherit ). Если блоку указать свойство float:left , то он будет выровнен по левому краю, а все остальные блоки будут игнорировать его, как будто этого блока нет, за исключение текста, остальные блоки, которым задано это же свойство будут обтекать его справа, на сколько это позволяет ширина экрана или элемента внутри которого они находятся. Следует заметить, что любой элемент можно сделать блочным, заданием ему свойства display:block , изначально только элементы div по умолчанию считаются блочными элементами, для не блочных элементов (span, p ) свойство float игнорируется и такие элементы располагаются как обычно последовательно сверху вниз. Чтобы свойство float не игнорировалось необходимо задать элементы свойство display:block .

float:right выровнит блок по правому краю, а все остальные блоки будут игнорировать его, либо обтекать, если им задано это же свойство и если в коде идут подряд два или несколько блоков с указанным свойством, то первым вправо встанет тот блок, который идет первым в коде, остальные обтекают его слева.

Свойство float:none отменяет эффект плавучести для блока, но это не значит что блок будет располагаться как обычно сверху вниз, если выше расположен блок с эффектом плавучести, то нижний блок будет игнорировать верхний и встанет под него, чтобы этого не было нужно задать этому блоку свойство clear:both . Ух, сложно да? Это только, кажется, на первый взгляд, на самом деле все логично и просто, надо только потренироваться.

float:inherit - задает свойство плавучести, такое же, как у родительского блока (блока в который вложен данный дочерний блок).

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

теперь нужно добавить в этот блок еще пару блоков, зеленый и серый с высотой и шириной 100 пикс, у серого блока высота 120 пикс.

Видно, что блоки располагаются в общем потоке снизу вверх, в том порядке, в котором они встречаются в коде, сначала зеленый затем серый в конце голубой. Давайте зеленому блоку зададим свойство float:left , чтобы серый и голубой блоки игнорировали его.

как видно серый блок проигнорировал зеленый блок и встал под него, зеленый блок, как бы сам по себе, голубой блок выстроился за серым. Зададим обтекание всем блокам.

Видно, что блоки выстроились один за другим в том порядке, в котором они идут в коде. Давайте попробуем расположить два блока друг за другом, а третий как обычно ниже. Для этого нужно убрать у третьего блока свойство float:left , но этого недостаточно, так как он залезет под первые два блока, в чем мы убедились раньше. Чтобы этого не произошло нужно задать третьему блоку свойство clear:both ;

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

Достоинства и недостатки блочной верстки:

• Меньший вес страницы за счет меньшего кода (+ )
• Реализация сложного дизайна с перекрывающимися блоками (+ )
• Трудно освоить, табличная верстка проще (- )
• Чаще приходится решать вопросы кроссбраузерности. блоки могут перекрываться при изменении разрешения экрана, масштабировании (- )

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

На этом все дорогие читатели, заходите по-чаще.

Среди верстальщиков довольно часто возникают споры по поводу выбора способа вёрстки . Одни отдают предпочтение блочной вёрстке , другие веб – мастера склоняются к табличному способу . Данный вопрос довольно спорный, и те и другие мастера по - своему правы. Существуют некоторые ситуации, в которых стоит применить блочную вёрстку , так же бывают моменты, в которых лучшим вариантом станет использование табличной вёрстки . Но в любом случае при выборе способа, необходимо отталкиваться от некоторых особенностей присущих как табличной, так и блочной вёрстке . Главной особенностью данных способов, являются преимущества и недостатки, о чём и пойдёт речь ниже.

Преимущества вёрстки таблицами:

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

Недостатки табличной вёрстки:

• Большое количество кода;
• Не все дизайны можно верстать таблицами.

Достоинства блочной вёрстки:

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

Недостатки вёрстки блоками:

• С уменьшением разрешения, блоки спадают или наезжают друг на друга;
• Проблематичность с кроссбраузерностью;
• Верстать тяжелее, чем таблицами.

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

Сейчас мы расскажем о том, в чем разница между табличной и блочной версткой сайтов . После того, как сайт был придуман дизайнером, его необходимо сверстать и адаптировать для конкретных нужд. Под версткой понимают использование html+css или html. Наиболее распространенным является первый вариант. Существуют и другие варианты верстки, более сложные, однако их поддерживают не все браузеры. Верстка HTML бывает табличной (table) и блочной(div). И у каждого из вариантов есть свои преимущества и недостатки.

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

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

Блочная верстка

Сайты, выполненные блочной версткой, отличаются использованием более компактного кода, а следовательно и меньшим весом. Блочная верстка очень удобна в использовании, слои или блоки могут друг друга перекрывать. Оптимизаторы пользуются тем, что нижнюю часть HTML-кода можно расположить вверху. Отрицательной стороной блочной верстки выступает некоторая сложность ее использования. Нужно разбираться в CSS 1 и версии 2, а готовится ещё и третья, в которой будет ещё больше функций. Существует определенная сложность в создании сайтов с «резиновой» версткой, но во всемирной сети можно найти достаточно инструкций о том, как легко сделать это блоками. Так как нужно знать немало тонкостей при блочной верстке, то ею пользуются более опытные и знающие верстальщики и web-дизайнеры. Поэтому и услуги в web-студиях, которые выполняют сайты с версткой блоками, стоят дороже, тем более что ещё есть люди, использующие старые версии.