Таблицы в HTML. Табличная верстка страниц.

Ну что ж, я вижу вы настроены решительно, раз добрались до этой статьи. Это замечательно, потому что теперь можно поговорить о табличной верстке - ради нее и нужны все полученные вами знания по таблицам в HTML. Для начала откроем словарик:

Верстка — процесс предварительной компоновки информации, заключающийся в изготовлении страниц определенного формата с помощью текста, пробелов, элементов оформления.

Первоначально слово использовалось в полиграфии и подразумевало предпечатную подготовку газеты или журнала. Но с появлением Интернета, и, как следствие, сайтов, в обиход вошло такое понятие как "верстка сайта". Сайты выступили аналогом печатных изданий, а под версткой сайта стали подразумевать предварительную оформительскую подготовку страниц ресурса, происходящую до его наполнения. Если короче, то верстка сайта (в дальнейшем просто "верстка") — это разметка страниц вашего ресурса. Вообще, cуществует два типа верстки. Один из них — табличная верстка. Другой — блочная. О блочной верстке я пока помолчу, и расскажу о табличной, т.к. сам создавал сайт с ее помощью.

Табличная верстка — процесс разметки страницы с помощью таблиц.

Вобщем, используя только таблицы, и даже не притрагиваясь к блокам, можно сверстать хорошую, презентабельную страницу. Каким образом? Очень просто: с помощью таблиц строится своего рода сетка из клеточек. В каждой из этих клеточек затем размещаются элементы оформления сайта и его контент. Сама сетка может быть довольно сложной, совсем непохожей на шахматную доску или тетрадный лист. Из всех этапов табличной верстки самый важный и необходимый — создание каркаса страницы.

Каркас страницы — внешняя таблица, занимающая всю площадь (как правило, но не обязательно) страницы, в ячейках которой размещаются все остальные элементы на сайте, включая вложенные таблицы.

На рисунке первом показан простейший каркас сайта:

Как видите, он представляет собой таблицу стопроцентной ширины и не менее стопроцентной высоты. Таблица же эта разбита на несколько ячеек, каждая из которых имеет вполне конкретное назначение. В частности, в ячейке «Top» расположена так называемая шапка сайта, а иными словами его верхушка. Посетите свои любимые сайты, и оцените многообразие их шапок. Ячейка «Left» предназначена для размещения в ней меню сайта, ссылок на внешние или внутренние ресурсы, рекламы и.т.д. Ячейка «Right» выполняет аналогичные функции. В ячейке «Content» располагается основное содержимое. И, наконец, в ячейке «Bottom» помещают подвал, или как его еще называют "футер", где обычно пишется информация о сайте, его владельце, авторских правах и прочее. Большинство каркасов сайтов строится по схожим принципам, и поэтому они не сильно отличаются друг от друга по своей структуре. Назовем такие каркасы типовыми. Все ячейки типового каркаса можно разбить на три группы:

• Верхние
• Нижние
• Промежуточные

Классификация очень простая, но в то же время достаточно точная. Промежуточные ячейки обычно самые высокие, ну и находятся, как правило, не более чем в одной строке таблицы-кракаса. Соответственно, все ячейки, расположенные над промежуточными — верхние; а те, что под ними — нижние.

В каркасе, показанном на рис. 1 деление на группы вот какое:

• Верхняя ячейка — «Top»
• Нижняя — «Bottom»
• Промежуточные — «Left», «Content» и «Right»

Сейчас мы с вами воссоздадим этот каркас. Но сначала нарисуйте его на бумаге и проставьте все необходимые размеры. После этого вам будет легче воплотить задуманное на html-странице.

Разберемся теперь, чем обусловлены именно такие размеры.

Таблица: ширина:100%; высота:100%.

Такие размеры нужны, чтобы при любых размерах окна браузера таблица занимала ровно всю площадь страницы — не больше и не меньше.

Ячейка «Top»: ширина:100%; высота:45px.

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

Ячейки «Left» и «Right»: ширина:18%; высота:100%.

Ширина задана в процентах от общей ширины таблицы. Это сделано с расчетом на то, чтобы ширина ячейки «Content», которая будет равна 64% (100%-18%-18%), соответствовала размерам окна браузера, или экрана пользователя. Чем больше монитор — тем больше будет и ширина области основного содержимого. Это будет происходить в том случае, когда окно браузера развернуто на весь экран. Если же это не так, то ячейки «Left», «Content» и «Right будут подстраивать свою ширину под размер окна браузера.

Высота составляет 100%. Вот здесь существует два очень тонких момента. Во-первых, 100% высоты ячейки в данном случае не означают, что она растянется на весь экран. Это произошло бы только в том случае, когда сверху и снизу промежуточных ячеек («Left», «Content» и «Right) отсутствовали бы другие ячейки. В нашей же ситуации над и под этими ячейками зарезервировано по 45px страничного пространства. Вот эти-то 45px и мешают промежуточным ячейкам прижаться к верхней и нижней границам браузера. Так, что здесь правильнее говорить не «100% от высоты таблицы», а «100% от высоты, которая осталась свободной от других ячеек». И во-вторых, для промежуточных ячеек типового каркаса высота всегда задается равной 100%. Это необходимо для того, чтобы футер сайта всегда находился внизу страницы. Есть сайты, где положение футера зависит от заполненности страницы информацией. Но такие сайты делаются уже не по типовым каркасам, и к ним "правило промежуточных ста процентов", если его можно так назвать, не применимо. На страницах моего сайта существует два футера, один из которых всегда прижат к низу. Это значит, что все каркасы моих страниц можно назвать типовыми.

Ячейка «Content»: ширина:64%; высота:100%.

Этой ячейке выше было уделено достаточно внимания, хватит с нее на этом — она здесь не одна.

Ячейка «Bottom»: ширина:100%; высота:45px.

Эта ячейка, где обычно располагается футер, является симметричной копией ячейки «Top». Поэтому и здесь опустим излишние комментарии.

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

<table border="1" rules="all" cellspacing="0">
  <tr>
    <td colspan="3">Top</td>
  </tr>

  <tr>
    <td>Left</td>
    <td>Content</td>
    <td>Right</td>
  </tr>

  <tr>
    <td colspan="3">Bottom</td>
  </tr>
</table>

Заполнять ячейки лучше сразу же (хотя бы одним словом, или даже символом), иначе они просто не будут отображаться браузером. Ну а теперь пора зафиксировать нужные нам размеры:

<table border="1" rules="all" cellspacing="0" width="100%" height="100%">
  <tr>
    <td colspan="3" width="100%" height="45px">Top</td>
  </tr>

  <tr>
    <td width="18%" height="100%">Left</td>
    <td width="64%" height="100%">Content</td>
    <td width="18%" height="100%">Right</td>
  </tr>

  <tr>
    <td colspan="3" width="100%" height="45px">Bottom</td>
  </tr>
</table>

Этот код можно (и нужно) упростить. Дело в том, что ширину области «Top» браузер может вычислить и самостоятельно (100%-18%-18%=64%). Поэтому ширину этой ячейки можно не задавать. Также нет необходимости указывать высоту всех трех промежуточных ячеек. Достаточно задать высоту для одной из них, например — для «Left». С учетом этих упрощений переписываем код:

<table border="1" rules="all" cellspacing="0" width="100%" height="100%">
  <tr>
    <td colspan="3" width="100%" height="45px">Top</td>
  </tr>

  <tr>
    <td width="18%" height="100%">Left</td>
    <td>Content</td>
    <td width="18%">Right</td>
  </tr>

  <tr>
    <td colspan="3" width="100%" height="45px">Bottom</td>
  </tr>
</table>

Загрузив этот код в браузер, Вы получите картинку, очень близкую к той, что изображена на рис. 1. Для того, чтобы выровнять текст в ячейках, используйте соответствующие параметры. Чтобы слова писались прописными буквами, измените буквы в коде. А вот чтобы убрать поля вокруг таблицы, примените небольшую хитрость: измените в коде страницы тег <body>, чтобы он выглядел так:

Не спрашивайте пока, что это за запись и с чем ее едят. Просто напишите так, и все тут. Потому что для обстоятельного разговора о параметре style требуется написание отдельной статьи. Пока же продолжим изучение каркасов.

На рисунке ниже показан каркас сайта Neocoder.ru.

Поделим все его ячейки на три основные группы. Промежуточными являются ячейки: [Left, Content и Right], т.к. они самые высокие. Верхние ячейки — [Top, Navygation и Space-1]. А нижняя ячейка здесь одна — [Space-2]. Сейчас мы создадим с нуля и этот каркас.

Рисуем на бумаге каркас с необходимыми размерами.

Создаем в HTML таблицу нужной структуры.

<table border="1" rules="all" cellspacing="0">
  <tr>
    <td colspan="3">Top</td>
  </tr>

  <tr>
    <td colspan="3">Navygation</td>
  </tr>

  <tr>
    <td colspan="3">Space-1</td>
  </tr>

  <tr>
    <td>Left</td>
    <td>Content</td>
    <td>Right</td>
  </tr>

  <tr>
    <td colspan="3">Space-2</td>
  </tr>
</table>

Фиксируем размеры таблицы и ячеек.

<table border="1" rules="all" cellspacing="0" width="100%" height="100%">
  <tr>
    <td colspan="3" width="100%" height="40px">Top</td>
  </tr>

  <tr>
    <td colspan="3" width="100%" height="20px">Navygation</td>
  </tr>

  <tr>
    <td colspan="3" width="100%" height="40px">Space-1</td>
  </tr>

  <tr>
    <td width="14%" height="100%">Left</td>
    <td>Content</td>
    <td width="14%">Right</td>
  </tr>

  <tr>
    <td colspan="3" width="100%" height="40px">Space-2</td>
  </tr>
</table>

Это готовый и упрощенный код. Но его можно упростить еще больше. Подумайте как, и сделайте это самостоятельно.

И последний каркас, который мы создадим здесь с вами:

Это взятый из головы каркас гипотетического новостного ресурса. У него четыре промежуточные ячейки — [Left, Content Right и Reklama]. Верхняя ячейка — [Top]. Нижняя — [Bottom].

И снова рисуем каркас с размерами на бумаге.

И опять создаем табличку с нужной нам структурой.

<table border="1" rules="all" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="4">Top</td>
  </tr>

  <tr>
    <td colspan="3">Topnews</td>
    <td rowspan="2">Reklama</td>
  </tr>

  <tr>
    <td>Left</td>
    <td>Content</td>
    <td>Right</td>
  </tr>

  <tr>
    <td colspan="4">Bottom</td>
  </tr>
</table>

И вновь образмериваем таблицу с ячейками, а затем упрощаем код, чтобы впоследствии в нем не запутаться.

<table border="1" rules="all" cellspacing="0" cellpadding="0" width="100%" height="100%">
  <tr>
    <td colspan="4" width="100%" height="50px">Top</td>
  </tr>

  <tr>
    <td colspan="3" height="50px">Topnewslt;/td>
    <td rowspan="2" width="15%" height="100%">Reklama</td>
  </tr>

  <tr>
    <td width="20%" height="100%">Left</td>
    <td width="45%" height="100%">Content</td>
    <td width="20%" height="100%">Right</td>
  </tr>

  <tr>
    <td colspan="4" width="100%" height="50px">Bottom</td>
  </tr>
</table>

Ну вот, каркас новостного ресурса готов. А у меня закончились примеры. Но я надеюсь, что приведенных примеров вам будет достаточно для освоения принципа построения каркасов. В каждой из ячеек каркаса могут быть размещены разные элементы: текст, ссылки, изображения, таблицы, блоки, и.т.д. Эти элементы можно не только поместить в ячейку, но и отрегулировать их местоположение. Достигается это с помощью отступов в ячейке. К сожалению, в HTML можно изменять только все четыре отступа сразу. Зато, применяя параметр style, можно каждый из четырех отступов ячейки регулировать по отдельности. Т.к. основной разговор о параметре style еще впереди, то я напишу нужный фрагмент кода без комментариев. Итак, вот необходимый код ячейки:

<td style="padding-top:10px; padding-right:15px; padding-bottom:8px; padding-left:12px;>

Числами в пикселах здесь заданы отступы в ячейке (в порядке их появления):верхний, правый, нижний и левый соответственно. Как видите, все отступы разные. Регулируя их, можно краями этих отступов двигать тот или иной элемент в ячейке.

Как правило, для точного позиционирования всех элементов, размещаемых на странице, одного только каркаса недостаточно. В связи с этим в ячейках каркаса приходится создавать еще несколько вложенных таблиц. А в ячейках вложенных таблиц могут быть другие таблицы — это так называемая двойная вложенность. Теоретически, вложенность может быть хоть десятерной; но с другой стороны — чем она меньше, тем лучше. Конечная цель всех этих манипуляций — создать сетку для точного позиционирования каждого элемента на сайте. Иногда даже под один-единственный элемент создается своя ячейка. Это чем-то напоминает планировку дома при его строительстве. А, впрочем, создание сайта — это и есть строительство. О важнейшем из этапов которого, я вам только что рассказал. Для остальных этапов нужно владеть знаниями об элементах, располагаемых на страницах. О двух таких элементах вы уже знаете — это текст, и, собственно, таблицы. О двух оставшихся (изображения и ссылки) я расскажу в следующих статьях, которые вы без труда освоите, раз смогли освоить предыдущие.