Довольно часто слышу споры по поводу вёрстки: что лучше 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>‘ах.