Наверное каждый, кто так или иначе начинает сталкиваться с версткой ( или как ее теперь стали называть HTML - кодингом ), слышал хотя бы раз о верстке "блоками". К сожалению, большинство из того, что они слышат, довольно часто не соответствует реальности. В этой статье я попробую обьяснить принципиальные различия между версткой таблицами и версткой без их использования.
Начну, пожалуй, с определения, что означает "табличная" и "бестабличная" верстка. Итак:
- табличной будем называть верстку, в результате которой все элементы на странице так или иначе находяться во внутренних элементах таблицы, таких, как например <tr> и <td>.
- бестабличной будем называть верстку, в результате которой в исходном коде нет ни одного тега <table>. Наверняка Вы спросите меня: "А чем верстальщикам не угодили таблицы и какая в конце концов разница - таблицами или не таблицами, ведь важен результат?". Если заглянуть в начала развития HTML, как языка разметки, то можно понять, что таблицы предназначались совсем не для "разметки страниц", а для структурированного вывода информации ( например наименований товаров и их цен ). Но время шло, веб-сайты становились все сложнее и наполненние по контенту, что и привело к тому, что верстальщики стали использовать таблицы, так, как других способов расположить несколько элементов на странице на одной линии и с нужным выравниваем, как использовать таблицы - просто не было. А тем временем веб-сайты стали становится еще сложнее, перерастать в порталы - графическое оформление веб-сайтов становилось все сложнее, в результате чего работа верстальщика становилась все сложнее и запутаннее - куча таблиц, таблица в таблице, а в ней еще и еще:Порой глубина вложенности таблиц достигала десятка, а то и больше. Представьте себе этот код и не дай бог Вам прийдется его дописывать через год, а то и два. Это будет сущий ад, среди кучи таблиц найти нужный фрагмент кода, который нужно поправить. Эх, если бы это был единственный недостаток таблиц:Но к сожалению их (недостатков) слишком много - таблицы загружаются и отображаются в браузере только тогда, когда загрузится весь внутренний контент таблиц, что не совсем удобно, ведь пользователю с медленным подключением к интернету не сильно приятно смотреть на пустой экран в течении нескольких секунд, скорее всего он просто перейдет на сайт, который быстрее загрузится; сложности работы поисковиков с табличными сайтами и прочие. Тот, кто думает, что таблицы хорошо поддерживаются всеми браузерами - очень ошибаются. Приведу простой пример:
Допустим есть макет и нам нужно сделать резиновую верстку, тоесть чтобы сайт тянулся по вертикали и по горизонтали и смотрелся максимально одинаково при любых разрешениях экрана пользователя. Соответственно напишем код:
<?xml encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Example</title>
<meta http-equiv="Content-Language" content="ru" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
</head>
<body>
<table cellpadding="0" cellspacing="0" border="1" style="height: 100%" width="100%>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
По логике вещей мы должны были бы получить таблицу, с границей в 1 пиксель, растянутую по вертикали и горизонтали на 100 процентов контентной области браузера. Открыв этот код в Internet Explorer - мы действительно увидим что так и есть, но открыв страницу в Mozille и Opera увидим, что все не так, как мы ожидали - таблица мало того, что не растянулась на 100 процентов по высоте - она занимает всего один ряд по высоте!
Произошло это потому, что в данном случае контейнером для таблицы служит не окно браузера, а BODY, что правильно исходя из доктайпа, но ИЕ имеет баг и не соответствует стандарту и потому отображает "правильно". Чтобы привести все в порядок, нужно в ccs файле написать:
BODY, HTML {
height: 100%;
}
И только в этом случае - таблица будет одинаково смотрется и в Opera, Mozilla и в Internet Explorer.
Именно по этим причинам ( а также по многим другим ) появились "блоки", они же DIV'ы. Для примера, предлагаю читателям этой статьи сравнить такие два кода:
Первый:
<table>
<tr>
<td>какой-либо текст</td>
</tr>
</table>
Второй:
<div>какой-либо текст</div>
Согласитесь, что набрать второй и быстрее и выглядит он логичнее. Для примера предлагаю рассмотреть еще два примера кода, которые показывают, как блоки помогают сокращать и делать логичнее код в работе верстальщика:
Табличная верстка:
<table>
<tr>
<td valign="top">левая колонка для навигации</td>
<td valign="top">правая колонка для контента</td>
</tr>
</table>
Блоковая верстка:
<div style="float:left">тут навигация</div><div style="float:left">тут контент</div>
Второй код можно еще упростить, вынеся то, что записано в style в каскадные таблицы стилей ( они же css ). Но даже в случае без выноса в css-файл оформления ( чем безусловно является float ) второй фрагмент смотрится и редактируется намного лучше.
Следующий пример будет демонстрировать скорость загрузки браузером страницы с таблицами и страницы без таблиц:
timer.js:
function timestart()
{
var myDate = new Date();
var mili = myDate.getMilliseconds();
document.getElementById('new').value=mili;
}
function timeend()
{
var myDate = new Date();
var mili=myDate.getMilliseconds();
alert((mili-document.getElementById('new').value)/1000);
}
1)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title id="new">Example with tables</title>
<meta http-equiv="Content-Language" content="ru" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type="text/javascript" src="timer.js">timestart()</script>
<script type="text/javascript">timestart()</script>
</head>
<body onload="timeend()">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td valign="top">text</td>
<td valign="top">text</td>
</tr>
</table>
<input type="text" id="text" value=""/>
</body>
</html>
2)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title id="new">Example with div's</title>
<meta http-equiv="Content-Language" content="ru" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type="text/javascript" src="timer.js"></script>
<script type="text/javascript">timestart()</script>
</head>
<body onload="timeend()">
<div style="float:left;width: 50%">text</div><div style="float:left;width: 50%">text</div><br />
<input type="text" id="text" value=""/>
</body>
</html>
Результаты:
Браузер/Тип Табличная Бестабличная
Internet Explorer 6.0 0.0752 0.0601
Mozilla SeaMonkey 1.0b 0.045 0.02
Примечание: Данные приведены в миллисекундах - среднее значение в 10 замерах.
Как видно из опыта - даже на таких простых кусках кода - уже есть выгода во времени загрузки. А представьте себе, если бы уровень вложенности таблиц был порядка 5 ( что бывает довольно часто ) ? Разница была бы уже не в миллисекундах, а близкая к секундам. А если мы создаем развлекательный портал, который предполагается быть очень посещаемым? Время загрузки тогда очень важно!
К сожалению и у блоков есть свои недостатки - и в первую очередь - недостаточный уровень их поддержки браузерами. Камнем преткновения стает Internet Explorer, который не поддерживает и на сей день даже половины возможностей блоковой и стилевой верстки ( стилевая верстка - верстка с применением какскадных таблиц стилей ), а если и поддерживает, то с большим количеством багов, что очень огорчает.
Примером приведу такой вот код:
<?xml encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Example2</title>
<meta http-equiv="Content-Language" content="ru" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
</head>
<body>
<div style="width:100%">
<div style="width:50%;background-color: red;float:left;height: 100px;"> </div>
<div style="width:50%;background-color: black;float:left; height: 100px;"> </div>
</div>
</body>
</html>
Сохранив этот код в файл и открыв его в Internet Explorer Вы сможете увидеть, что если сужать или растягивать окно браузера, то блоки "падают" друг под друга, тоесть черный блок оказывается под красным. Но если открыть этот же файл в другом браузере, не на движке Internet Explorer, то такого эффекта не будет наблюдаться. Причина в том, что у Internet Explorer не доделанная блоковая модель.
Также из недостатков можно назвать сложность верстки некоторых типов макетов, например, когда в результате верстки должно быть две колонки и заранее не известно, сколько контента будет в одной и во второй, но при этом высота колонок в результате должна получится одинаковая. В таких случая приходится использовать "хаки" и другие изощрения, что не очень приятно и на это уходит много времени, если сразу не знаешь этого пути. К чести таблиц будет сказано, что с ними такой ситуации не может быть. Зато могут быть другие.
Исходя из всего вышесказанного можно сделать вывод, что и у метода верстки таблицами есть свои "плюсы" и "минусы", и у метода верстки без таблиц.
Отметим самые критичные минусы.
Табличная верстка:
Перенасыщенность кода, трудно поддается редактированию и не является логичной
Загружается только после загрузки внутреннего контента
Бестабличная верстка:
Недостаточная поддержка со стороны производителей браузеров
Не все макеты можно сверстать без дополнительных методов, "хаков" и прочих "костылей"
Отметим самые приятные плюсы.
Табличная верстка:
Дает возможность сверстать практически любой макет
Довольно неплохая поддержка производителями браузеров, таблицы более-менее одинаково смотрятся в разных браузерах, малое количество багов
Бестабличная верстка:
Логичность кода, легкое редактирование
Загружается по мере загрузки блоков, чем экономит "терпение" посетителя
Не буду советовать Вам, дорогие читатели, какой способ выбрать для себя, это дело сугубо личное, но верстать блоками намного сложнее - это требует определенных знаний различий браузеров и технической подготовки - чем таблицами. Если спросите меня, как верстаю я - то я Вам отвечу - в зависимости от макета и от требований заказчика, в основном "каркас" делаю таблицей, а внутри уже выкладываю все блоками. Таким образом надеюсь, что убиваю двух зайцев - можно верстать любой макет, код не сильно теряет своей логичности, смотрится одинаково в браузерах - взято самое лучшее из двух методов верстки.
Выводы
Табличная верстка - хороша, верстальщики ее знают и умеют применять, они уже при одном взгляде на макет мыслят таблицами, знают, где какие подводные камни могут встретиться. Однако ввиду динамичного развития Интернета, с каждым годом веб-сайты стают сложнее, растут как в профессиональном плане, так и в плане кода и уже совсем не так легко верстать и тем более дописывать верстку. В связи с этим верстать таблицами с каждым годом все сложнее и сложнее - сайты стают перегруженными, "удельный вес" страниц все растет и нужна альтернатива.
Как альтернатива появился метод верстки без таблиц, благодаря которому код стает логичнее, его легче воспринимать по прошествии некоторого времени, быстрее страница загружается в браузер посетителя. Но к сожалению, еще не достаточна поддержка со стороны производителей браузеров - слишком много "багов" и различий в отображении браузерами тегов и стилей к ним ( имеется ввиду CSS-2, CSS-3 ), что заставляет применять "хаки", "распорки" и прочие "прекрасности" из жизни рядового верстальщика.
