Что лучше DIV или TABLE?

Довольно часто слышу споры по поводу вёрстки: что лучше DIV или TABLE? Одни заказчики просят делать все на div’ах, другие на table‘ах а когда спросишь «почему?», многие не знают что ответить. Возможно, эта статья поможет, как и заказчикам, так и верстальщикам.

Я лично начинал заниматься версткой сайтов преимущественно таблицами, т.к. подобная верстка проще в плане позиционирования объектов и визуального представления страницы по ее коду. Уже после я наткнулся на горячие споры на тему «div vs table». Пытался перейти на дивы, но в том время мне это показалось сложно. Рассмотрим, что такое TABLE и что такое DIV, и попытаемся разобраться, когда и что использовать.

TABLE

Неоспоримым преимуществом вёрстки, основанной на таблицах, является её простота для верстальщика. Сайты, с которыми обычно сталкиваются начинающие, легко представить в виде подобной таблицы:

Шапка сайта

Левая колонка

Центральная колонка

Правая колонка

Подвал сайта

Таким образом, плюсом для table является простота представления. Однако взглянем на html-код страницы:

<table> 
	<tbody> 
		<tr> 
			<td width="398" valign="bottom" colspan="3"> <p align="center">Шапка сайта</p> 
			</td> 
		</tr> 
		<tr> 
			<td width="116" valign="bottom"> 
				<p> </p> 
				<p>Левая колонка</p> <p> </p> 
			</td> 
			
			<td width="159" valign="bottom"> 
				<p>Центральная колонка</p> <p> </p> 
			</td> 
			<td width="123" valign="bottom"> 
				<p>Правая колонка</p> <p> </p> 
			</td> 
		</tr> 
		<tr> 
			<td width="398" valign="bottom" colspan="3"> 
				<p align="center">Подвал сайта</p> 
			</td> 
		</tr> 
	</tbody> 
</table>

Объявление таблицы, объявление строки, объявление ячейки и только потом идет содержание(в данном случае это просто текст). И это самый простой пример. Я сам писал сайт, где внутри ячейки ещё таблица, в которой строки, в ячейках которых опять таблицы… В общем можно сказать, что на неоспоримый плюс налагается довольно большой минус – это громоздкость итогового html-кода и связанная с этим плохая читаемость кода. Стоит отметить и то, что при достаточно частом использовании тега table размер html-страницы в итоге становится достаточно большим.

DIV

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

<div>
	<div id="header_test"> <p align="center">Шапка сайта</p>  </div>
	
	<div id="container_test" >
		<div id="left-column_test"> Левая колонка </div>
		<div id="center-column_test"> Центральная колонка </div>
		<div id="right-column_test"> Правая колонка </div>
	</div>
	
	<div id="footer_test"> <p align="center">Подвал сайта</p> </div>
<div>

и плюс CSS

#left-column_test {
width: 116px;
}
#right-column_test {
width: 123px;
}

#center-column_test {
margin: 159px;
}

#right-column_test, #left-column_test, #center-column_test {
    position: relative;
	float: left;
}




#header_test {
width: 398px;
}

#container_test
{margin: 0 auto;
	width:398px;
	float: left; /* IE 5.01 */
    float/**/: none;
    position: relative;
}

#footer_test {
clear: both;
width: 398px;
}

Многие большой размер css-стилей выделяют в минусы. Ну и? CSS файл грузится 1 раз, как правило. При последующих обращениях к страницам сайта грузит из кэша браузера уже. К тому же, править css файл намного проще, если необходимо поменять формат страницы, нежели возиться с таблицами.

Чем DIV лучше TABLE?

  • Значительное сокращение кода страницы. Правда в итоге растет CSS файл, но следует учесть тот факт, что файл стилей загружается только один для всех страниц. Поэтому скорость загрузки страниц увеличивается.
  • Придание коду понятного, человеческого вида.
  • Страница загружается блоками, поэтому пользователь видит содержимое страницы по мере загрузки каждого блока. Суть в том, что объекты с табличной версткой отображаются некоторыми браузерами только после загрузки закрывающего тега </table>. Если вся страница заключена в тег таблицы, то пользователь будет видеть только фон страницы пока загружается все содержимое.
  • Страницы на div’ах проще прикрутить к системе управления сайтом или создать подобные страницы (для тех кто не использует CMS).
  • Если надо изменить формат страницы, то достаточно поработать с CSS файлом в div’ной вёрстке. При использовании таблиц приходится копошиться во всём коде…
  • Поисковым роботам проще найти в коде div’ной верстки информацию, нежели в дебрях табличной верстки.

Заключение: преимущества блочной верстки довольно очевидны, а табличную верстку надо использовать только для табличных объектов. Так что, если есть возможность, то верстайте лучше в <div>‘ах.

  Категории: css, html
  • http://erstd.net erste

    В дветысячеодинадцатом году верстать сайты таблицами — что-то непостижимое. Таблицы — для таблиц. Для верстки есть display: table.
    Хотя я сам на угтунете менюшку таблицей сделал, за что сам себя каждый день ненавижу и по ночам рыдаю в подушку.

    • http://suvitruf.ru Suvitruf

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

  • Сергей

    Совершенно согласен с автором. Дивы куда удобнее. Вот и я – влез в таблицы – уже и сам не рад.

  • zumm

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

    • http://suvitruf.ru Suvitruf

      Можно. Всё, что можно реализовать на div’ах, можно реализовать и таблицами. Впрочем, обратное утверждение тоже верно. Но, чтоб поменять стиль блока, достаточно только у блока и поменять. Для изменения стиля таблицы, надо менять стиль у table, tr, td и т.д.

  • http://inventy.bos.ru/ Евгений

    Действительно – бред… В табличке можно подключить стили не только к TABLE, но и к TR, TD. Так для чего же тогда менять все стили таблицы, если достаточно изменить стиль отдельного тега? Это я вот к этому: “Для изменения стиля таблицы, надо менять стиль у table, tr, td и т.д.”
    Пример:
    /*меняются границы и фон в таблице*//*меняются границы*/текст, фото, и т.д.
    Меняя классы – изменяется оформление выбранного тега.
    Простите меня, если я не прав…

    • http://inventy.bos.ru/ Евгений

      теги таблицы пропали(((

    • http://suvitruf.ru Suvitruf

      Можно. Но с дивами работать удобнее, по крайней мере мне)
      Таблицы использую чисто для отображения именно информации.