Html разметка страницы. Отличия блочной вёрстки от табличной. Позиционируемые плавающие блоки. Сравнение табличной и блочной верстки Блочная гибкая разметка с помощью CSS

.
Общая схема блока такая: контент, ширину и высоту которого можно задать свойствами «width» и «height», внутренний отступ (между содержимым и рамкой) — свойство «padding», рамка — свойство «border» и внешний отступ — «margin». Из таких блоков создать сайт очень просто. Блоки могут быть вложены друг в друга, каждому из них можно присвоить class и id.
Было придумано уже много «фишек», которые компенсируют недостатки блоков, например, выровнять блок по вертикали можно так:
height:200px;
display:inline-block;
vertical-align:center.
В крайнем случае можно указать блоку, чтобы вел себя как таблица (тег table) с помощью свойства display:table, ряд (тег tr) — display:table-row или ячейка (тег td) — display:table-cell.

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

Недостатки:
— Сайт может неправильно отображаться на очень маленьких экранах.

Что выбрать?
Увы, но создание сайта на табличной верстке устарело. Тег

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отличия блочной вёрстки от табличной

Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега

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

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

Суть блочной вёрстки

В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны.

Каждая часть страницы помещается в свой блок