FreeArtists.ruFreeartists информация  о  web-технологиях

DIV vs. TABLE

В этой статье я хочу рассказать о преимуществе блочной HTML или XHTML верстки над версткой таблицами и привести конкретные примеры блочной верстки самых распространенных моделей web-страниц.

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

У табличной верстки есть много недостатков. Рассмотрим их по порядку:

  1. Web-стандарты. Используя табличную верстку невозможно сверстать более или менее серьезный макет, который бы не содержал синтаксических ошибок в коде.
  2. Семантика. Таблицы были введены в HTML исключительно для облегчения представления табличной информации (прайс лист и т. д.), но поскольку в спецификации HTML 3.2 не было каких-либо других способов позиционирования элементов на странице, тогдашние web-мастера использовали таблицы для разметки страницы на блоки (меню, шапка, подвал и т. д.).
  3. Нелогичность поведения таблиц. Если вы верстали или верстаете таблицами, то наверняка сталкивались с нелогичностью поведения таблиц в сложных макетах и разных браузерах. Это связано с тем, что таблицы не предназначены для верстки и с тем, что большинство браузеров отрисовывают страницы с табличной версткой в кварк режиме, а этот режим у всех браузеров разный.
  4. Читабельность кода и редизайн. Вы когда-нибудь пробовали разобраться в коде чужого сайта, сверстанного таблицами — наверное это было нелегко. А внести какие-либо серьезные изменения в дизайн иногда вообще невозможно, легче сверстать все заново.
  5. Размер кода. В подавляющем большинстве случаев верстка таблицами значительно увеличивает код страницы по сравнению с блочной версткой.

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

Кроссбраузерность блочной верстки

У блочной верстки есть один единственный недостаток — отсутствие полноценной поддержки CSS 2.0 в некоторых браузерах. Но так ли все плохо? По глобальной статистике «Hotlog» на момент написания этой статьи (15.08.2005) ситуация следующая:

статистика использования браузеров на 15.08.2005

Теперь выясним, какие из приведенных в таблице браузеров не поддерживают CSS 2.0. Это: MSIE 4.0 (0,59%); Netscape 3.0 (0,16%); Netscape 4.7 (0,15%). Итого: 0,9%. Немного, не правда ли? Стоит ли думать о 0,9% пользователей старых браузеров, которых с каждым днем становится все меньше, и создавать проблемы себе и нормальным пользователям? Надо также отметить, что не все из оставшихся 99,1% браузеров имеют 100% поддержку CSS 2.0, но с их недостатками можно весьма успешно бороться.

Преимущества блочной верстки

  1. Соответствие стандартам. Правильная блочная верстка полностью соответствует стандартам HTML и CSS. Это обеспечивает легкое понимание вашего кода теми, кто знаком со стандартами и гарантируемую поддержку в новых версиях браузеров.
  2. Отделение содержания от представления. Это обеспечивает легко читабельный код и смену дизайна всего сайта простым изменением файла стилей.
  3. Правильное отображение страниц разными устройствами. Возможность создания разных файлов стилей для разных устройств (КПК, принтер и т. д.) без изменения HTML кода.
  4. Легкость и логичность верстки. Вы просто берете нужный блок и, используя стили, определяете его размеры, вид и место на странице.

Примеры резиновых блочных версток

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

Сразу отмечу, что для соответствия стандартам и избежания проблем с браузерами семейства Internet Explorer, обязательно использовать правильный DOCTYPE (тег, объявляющий версию и тип языка разметки). Вот несколько примеров:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> — HTML версии 4.01 переходный.
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> — HTML версии 4.01 строгий.
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> — XHTML версии 1.0 строгий.

Вы можете использовать тот стандарт, который вам подходит. Это не повлияет на качество верстки, а я в своих примерах буду использовать XHTML 1.0.

Буква «Г»

Одна из стандартных схем расположения элементов на странице и самая простая в верстке.

схема расположения элементов на странице

Сразу договоримся, как должны вести себя блоки в этой верстке:

  1. Header (шапка). Тянется по горизонтали, но не менее 600 px, высота 150 px.
  2. Menu (меню). Тянется по вертикали и всегда такой же высоты, как блок info, ширина 250 px.
  3. Info (информация). Тянется по вертикали и горизонтали, но не уже 350 px.

Подготовим XHTML код нашей страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Пример</title>
</head>
<body>
<div id="header">HEADER (шапка)</div>
<div id="menu">MENU (меню)</div>
<div id="info">INFO (информация)</div>
</body>
</html>

Смотрим, что получилось.

Теперь напишем стили для блоков:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Пример</title>
<style type="text/css">
  html,body{
  	margin:0;
	padding:0
	}
  /* убираем отступ у тега body */
  
  #header{
  	height:150px;
	min-width:600px;
	background:#FFEF97
	} 
  /* высота 150 px, минимальная ширина 600 px, цвет фона */
  
  #menu{
  	width:250px;
	float:left;
	background:#FFC597
	}
  /* ширина 250 px, этот блок обтекает с левой стороны
    следующий блок, цвет фона */
  
  #info{
  	min-width:350px;
	margin-left:250px
	}
   /* минимальная ширина 350 px, отступ слева 250 px */
</style>
</head>
<body>
<div id="header">HEADER (шапка)</div>
<div id="menu">MENU (меню)</div>
<div id="info">INFO (информация)</div>
</body>
</html>

Смотрим, что получилось.

Вот в принципе и все. Но мы столкнулись с несколькими проблемами. Будем решать их последовательно:

  1. Браузеры семейства Internet Explorer 6 не понимают свойство CSS min-width, которое задает минимальный размер блочного элемента. Решается это следующим CSS хаком — следует создать еще один контейнер, в который поместить все содержимое тега body, и написать для него следующие стили —  {width: expression(((document.documentElement.clientWidth || document.body.clientWidth) < 600)? "600px" : "100%")}.
  2. Блок MENU не тянется по вертикали, занимая все оставшееся пространство, а растягивается контентом. Решить в лоб эту проблему нельзя, но можно создать видимость решения. Для этого следует создать изображение такого же цвета, что и цвет фона меню, и такого же размера по горизонтали. Задать его в качестве фона тега body и заставить размножаться фоновое изображение только по вертикали — html,body{margin:0; padding:0; background:url(bg-menu.gif); background-repeat:repeat-y}.

Смотрим, что получилось.

Описание глюков

Для избежания появления нежелательных отступов между блоками MENU и INFO в браузерах семейства Internet Explorer не задавайте вертикальные размеры этим блокам.

О прелестях CSS

Изменив свойства float:left блока MENU на float:right и margin-left:250px блока INFO на margin-right:250px и добавив свойство background-position:right тегу body, получим вместо левого меню правое.

Смотрим, что получилось.

Кроссбраузерность

IE 5+; Opera 6+; Mozilla 1.3+; FF 1+.

Буква «С»

Такая же верстка, как и в предыдущем примере, только с footer (подвал).

схема расположения элементов на странице

Описание поведения блоков

  1. Header (шапка). Тянется по горизонтали, но не менее 600 px, высота 150 px.
  2. Menu (меню). Тянется по вертикали и всегда такой же высоты, как блок info, ширина 250 px.
  3. Info (информация). Тянется по вертикали и горизонтали, но не уже 350 px.
  4. Footer (подвал). Всегда находится под блоками info и menu, тянется по горизонтали, но не менее 600 px.

Возьмем код предыдущего примера и добавим в него блок footer:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Пример</title>
<style type="text/css">
  html,body{
  	margin:0;
	padding:0;
	background:url(bg-menu.gif);
	background-repeat:repeat-y
	} 
  /* убираем отступ у тега body, 
  задаем фоновое изображение, размножающееся по вертикали */
  
  #header{
  	height:150px;
	min-width:600px;
	background:#FFEF97
	}
  /* высота 150 px, минимальная ширина 600 px, цвет фона */
  
  #menu{
  	width:250px;
	float:left;
	background:#FFC597
	}
  /* ширина 250 px, этот блок обтекает с левой стороны
  следующий блок, цвет фона */
  
  #info{
	min-width:350px;
	margin-left:250px
	}
  /* минимальная ширина 350 px, отступ слева 250 px */
  
  #body{
  	width: expression(((document.documentElement.clientWidth 
  	|| document.body.clientWidth) < 600)? 
  	"600px" : "100%")
	}
</style>
</head>
<body>
<div id="body">
<div id="header">HEADER (шапка)</div>
<div id="menu">MENU (меню)</div>
<div id="info">INFO (информация)</div>
<div id="footer">FOOTER (подвал)</div>
</div>
</body>
</html>

Опишем стили для блока footer — #footer{height:20px;min-width:600px;background:#B9CC8A;clear:both}. Где clear:both — прекращение обтекания. Перенесем свойства background:url(bg-menu.gif);background-repeat:repeat-y тега body блоку body.

Смотрим, что получилось.

Кроссбраузерность

IE 5+; Opera 6+; Mozilla 1.3+; FF 1+.

Буква «О»

Такая же верстка, как и в предыдущем примере, только с двумя меню (правым и левым).

схема расположения элементов на странице

Описание поведения блоков

  1. Header (шапка). Тянется по горизонтали, но не менее 800 px, высота 150 px.
  2. Menu (меню) правое и левое. Тянется по вертикали и всегда такой же высоты, как блок info, ширина 250 px.
  3. Info (информация). Тянется по вертикали и горизонтали, но не уже 350 px.
  4. Footer (подвал). Всегда находится под блоками info и menu, тянется по горизонтали, но не менее 800 px.

Возьмем код предыдущего примера и добавим в него три новых блока. Первый — для задания фона правому меню, и еще два — внутрь блока info. Первый внутренний блок будет правым меню, а второй будет заменять блок info.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Пример</title>
<style type="text/css">
  html,body{
  	margin:0;
	padding:0
	}
  /* убираем отступ у тега body */
  
  #header{
  	height:150px;
	min-width:800px;
	background:#FFEF97
	}
  /* высота 150 px, минимальная ширина 800 px, цвет фона */
  
  #menu{
  	width:250px;
	float:left;
	background:#FFC597
	}
  /* ширина 250 px, этот блок обтекает с левой стороны
  следующий блок, цвет фона */
  
  #info{
  	min-width:550px;
	margin-left:250px
	}
   /* минимальная ширина 550 px, отступ слева 250 px */
  
  #body{
  	background:url(bg-menu.gif);
	background-repeat:repeat-y;
    width: expression(((document.documentElement.clientWidth || 
    document.body.clientWidth) < 800)? "800px" : "100%")}
  /* задаем фоновое изображение, размножающееся по вертикали, 
      css хак для Internet Explorer, имитация свойства min-width */
  
  #footer{
  	height:20px;
	min-width:800px;
	background:#B9CC8A;
	clear:both
	}
  /* высота 20 px, минимальная ширина 800 px, 
  цвет фона, прекращение обтекания */
</style>
</head>
<body>
<div id="body">
<div id="body_2">
<div id="header">HEADER (шапка)</div>
<div id="menu">MENU (меню)</div>
<div id="info">
<div id="right_menu">MENU (меню)</div>
<div id="info_int">INFO (информация)</div>
</div>
<div id="footer">FOOTER (подвал)</div>
</div>
</div>
</body>
</html> 

Смотрим, что получилось.

Теперь опишем стили для новых блоков и подкорректируем для старых. Блоку body_2 добавим фон и определим позицию фона справа, определим минимальную ширину — background:url(bg-menu.gif); background-repeat:repeat-y; background-position:right; min-width:800px. Блок right_menu должен обтекать блок info_int справа — float:right;width:250px;background:#FFC597. Поставим блоку info_int отступ справа, чтобы при переполнении он не налезал на блок right_menu — margin-right:250px.

Смотрим, что получилось.

Кроссбраузерность

IE 5+; Opera 6+; Mozilla 1.3+; FF 1+.

Выравнивание блоков по центру

Переходя на блочную верстку, верстальщики сталкиваются с проблемой выравнивания блоков по центру. Тут все очень просто. Единственное условие: верстальщик должен точно знать размер блока в любых предусмотренных CSS единицах измерения. Для того, чтобы выровнять блок по центру экрана, надо определить для него следующие стили — position:absolute;left:50%;margin-left:−половина ширины выравниваемого блока.

Пример

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Пример</title>
<style type="text/css">
  #center{
  	width:200px;
	height:200px;
	background:#f00;
  	position:absolute;
	left:50%;
	top:50%;
	margin-left:-100px;
	margin-top:-100px
	}
  /* 
  ширина 200 px, высота 200 px, фон,
  абсолютное позиционирование,
  подвинуть блок вправо на 50 %, 
  подвинуть блок вниз на 50 %, 
  отступ слева -100 px, отступ сверху -100 px  
  */
</style>
</head>
<body>
<div id="center">CENTER</div>
</body>
</html>

Смотрим, что получилось.

Для того, чтобы отцентрировать блок внутри контейнера, следует заменить CSS свойство position:absolute на position:relative.

Второй вариант горизонтального выравнивания по центру внутри контейнера это использование margin:auto.

Кроссбраузерность

IE 5+; Opera 6+; Mozilla 1.3+; FF 1+.

68 комментариев

  1. DMH

    Хотя наверное правильней будет задать min-width для хедера, инфо и футера под экран 1024х768, а дальше уже пускай автоматически расширяется.

    Див не привязан одновременно и к контенту и к монитору как таблица с width=100%, поэтому тут видимо только display:table либо javascript.

    На этом сайте горизонтальная прокрутка шириной с четверть страницы на мониторе 1024×768. И создалась она благодаря той проблеме, которую мы обсуждаем — текст вылез за границы дива.

    1 января 2010, 6:41
  2. Endi

    Благодаря этой статье я узнал о работе с DIV, это мне очень помогло как для начала, спасибо автору

    4 марта 2010, 18:27
  3. Антон

    Здравствуйте! =)

    Всё это прекрасно и верно.

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

    11 августа 2010, 20:31
  4. Sq.Piglet

    Копайте в сторону повторяющегося по вертикали фона.

    11 августа 2010, 20:48
  5. alexlumpov

    А теперь представим что контент содержит широкую таблицу и воткнем в div#info

    asdlkafsdj;fhsdajfhasdjgasdgha…

    смотрим что получилось

    1 ноября 2010, 22:43
  6. IvanX

    я обычно делаю контейнер для резиновых сайтов так:
    body {min-width:900px}

    -хорошая тянучесть боди и содержимого, а для ie6 и ниже табличный хак

    КОНТЕНТ

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

    по крайней мере данный хак в разы лучше чем предложенный javascript hack:

    {width: expression(((document.documentElement.clientWidth || document.body.clientWidth) < 600)? "600px" : "100%")}

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

    9 декабря 2010, 22:15
  7. IvanX

    шайтан система, стерла html’ную часть записи
    еще разок:

    контент

    body{min-width:900px;max-width:1200px}

    9 декабря 2010, 22:17
  8. IvanX

    в общем вот так… пришлось все < заменить на (, а все > на )

    (!—[if lt IE 7])
    (table cellspacing=»0″ style=»width:100%;»)(tr)(td)(table cellspacing=»0″ style=»margin:0px auto»)<td width="1200")
    (![ENDIF]—)

    контент

    (!—[if lt IE 7])
    (img src="i/p.gif" height="1" width="900")
    (/td)(/tr)(/table)
    (/td)(/tr)(/table)
    (![ENDIF]—)

    body{min-width:900px;max-width:1200px}

    9 декабря 2010, 22:19
  9. Элис

    Блин, автор, круто!
    Так доступно, что нереально.
    Спасибо.

    11 декабря 2010, 21:59
  10. MAGNet

    И дивы и таблицы — хорошо, когда к месту.
    Недавно столкнулся с таким приколом: прикручиваю блоговый движок к Джумле.
    Джумла чуть меньше чем полностью сделана на дивах, а движок на таблицах.
    Такая задница получается при попытке подверстать и поправить стили.. Просто ужос!
    Да, кстати, очень глупо выглядят подряд несколько таблиц в которых по одной строке и одной колонке =)))

    8 марта 2011, 8:52
  11. Влад

    Да, время течет — статья актуализируется. Здорово. Спасибо, тов. автор! И меня статья порадовала. Столько лет себя пытался заставить въехать в «блоки». :)

    2 апреля 2011, 17:38
  12. dimoc

    спасибо за статью.

    27 апреля 2011, 23:11
  13. Korvin

    Спасибо Большое!!!))

    1 августа 2011, 16:43
  14. Владислав

    При такой верстке всё хорошо до тех пор, пока не вставишь в INFO какой-нибудь блок с clear: both; вот там то и съезжает все.

    Действительно правильные макеты тут: blog.html.it/layoutgala/

    12 сентября 2011, 23:18
  15. devitos

    >Nik
    Даже смешно читать некоторые комменты.
    На дворе 2012, а оказывается люди верстали и в 2009.
    ;-)

    5 апреля 2012, 7:59
  16. IvanX

    =) лучше бы и не натыкался никогда на эту страничку, блочная верстка по такой модели довольно удобна и красива, и код красивый, пока, как Владислав и сказал — не вставишь clear:both куда-нибудь, но тут еще ладно, дальше больше, если от этого можно отказаться, одновременно отказавшись от float’элементов в контентной части, то от багов в связи с различным контентом уже никак не отвязаться, сверстал огромный проект на такой верстке, а потом понеслось, один из блоков контента имел отрицательные маргины — результат — контент уполз под левую колонку, другой блок имел абсолютный блок выезжающий на пару пикселей на разделитель — результат, центральные блок съехал под левую колонку, далее контент по ширине выехал за свои границы — результат — контент съехал под левую колонку) и все это получалось последовательно, раз за разом, т.е. изначально все круто, проект закрыт, через месяц идет жалоба, пофиксил, через неделю еще одна… жуть в общем

    11 апреля 2012, 16:36
  17. Lacmus

    2->IvanX

    Ну, Все, что Вы описали, в большинстве связанно с вашими ручками, вправляйте…

    8 мая 2012, 22:56
  18. Алекс

    Пока CSS было подпоркой для HTML было терпимо.
    Но как CSS стало основным орудием пролетариата, настал полный пупец!
    Изначально его разрабатывали люди не имеющие представление о верстке, а еще мне кажется что они подрабатывали врагами народа!
    Задача предельно простая координаты и размеры блоков и их сопряжение (растягивание и связка). Половина не сделано, а то, что сделано, работает хрен знает как, полное отсутствие логики и совместимости.
    Вместо 3 (трех!) строк кода приходится писать три страницы и не какой гарантии, что через год это вообще будет загружаться!
    Табличная верста это конечно не подарок, но CSS это полная жопа!
    Не столько версткой занимаешься, сколько хаками!

    15 октября 2013, 10:21

RSS комментариев

Комментировать