Подпишись на RSS архива статей

Friday, April 20, 2018

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

Posted by Admin on 15.03.2007

Наверное каждый, кто так или иначе начинает сталкиваться с версткой ( или как ее теперь стали называть 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 ), что заставляет применять "хаки", "распорки" и прочие "прекрасности" из жизни рядового верстальщика.

Автор/источник: Малкин Станислав Анатольевич (ArtLab)

Leave a comment, and if you'd like your own picture to show up next to your comments, go get a gravatar!

home | top