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

Табличная верстка сильно повлияла на способы верстки веб-страниц. Сейчас все более распространяется и даже становится модной методика верстать страницу при помощи слоев, и все старые стереотипы проявляются вновь и вновь. Поэтому перед рассказом о верстке слоями нужно сперва вспомнить о верстке табличным способом и о наследии, который он нам оставил.

Табличная верстка сильно повлияла на способы верстки веб-страниц. Сейчас все более распространяется и даже становится модной методика верстать страницу при помощи слоев, и все старые стереотипы проявляются вновь и вновь. Поэтому перед рассказом о верстке слоями нужно сперва вспомнить о верстке табличным способом и о наследии, который он нам оставил.

Как известно, подавляющее количество сайтов интернета создано, используя именно способ таблиц, когда опорой для строения документа является именно таблица. Но все больше веб-мастеров начинают использовать способ верстки слоями, так как это доступно и интересно. При этом за образец берутся именно сайты табличные, как более известные. Их и пытаются адаптировать под новый способ верстки.

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

Попробуем рассмотреть в качестве примера распространенную и несложную модульную сетку страницы

werstka-tablicy

Наверху расположена «шапка», где указан заголовок. Ниже идут две равной высоты колонки, обозначаемые для сравнения разными цветами. Внизу находится «подвал» с размещенной контактной информацией и другими данными. Высота такого макета занимает полностью окно браузера так, что подвал расположен в самом низу веб-страницы, если, конечно, текста, расположенного в колонках не очень много. В противном случае у веб-страницы появляется полоса прокрутки.

Не взирая на оговоренные условия, код, который формируется с помощью таблиц, весьма компактен

<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Сайт</title>
</head>
<body>
<table height=«100%« cellpadding=»5″ cellspacing=»0″>
<tr>
<td height=»60« colspan=»2″ bgcolor=«#669ACC«><h1>Шапка сайта</h1></td>
</tr>
<tr>
<td width=«25%» bgcolor=«#CDFFCC« valign=»top»>Меню</td>
<td bgcolor=«#FEFF99« valign=»top»>Основной контент</td>
</tr>
<tr>
<td height=«30« colspan=»2″ bgcolor#CCCCCC«>Подвал страницы</td>
</tr>
</table>
</body>
</html>

Высоту таблицу определяет атрибут тега <table> height. Хотя в спецификациях HTML данного атрибута нет, но браузеры его понимают, если отсутствует <!DOCTYPE>, и это приводит к необходимому результату. При значении 100% подразумевается, что таблица должна занять всю возможную высоту страницы.

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

  1. В этом случае за основу берут верстку таблицами, а реализуется она приближенно к оригиналу с помощью слоев.
  2. Используют особенности, характерные для слоев, и верстка сайта их учитывает.

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

Понравилась статья? Поделиться с друзьями:

Отправить ответ

Оставьте первый комментарий!

Уведомить
avatar
wpDiscuz