Разница между таблицами и слоями

02.07.2011

Влад Мержевич

Адепты табличной вёрстки любят сделать сложный макет и бросить верстальщикам вызов: «ну-ка, повторите такое на слоях!». Сразу заявляем, это провокация, на которую не следует попадаться и надо попросту игнорировать. Смысл в том, что таблицы и слои это совершенно разные объекты и их вообще некорректно сравнивать между собой. В итоге это напоминает детский спор «кто сильнее — кит или слон?». Дети продолжают отстаивать свою позицию и яростно доказывать, что их фаворит сильнее, взрослые люди лишь понимающе улыбаются, услышав этот вопрос.

Для объективности, тем не менее, приведем ряд характерных элементов, свойственных разным методам вёрстки (табл. 2.1).

Табл. 2.1. Сравнение характеристик
	Таблица	Слои
Колонки	Колонки формируются ячейками таблицы, их высота одинакова и взаимосвязана.	Колонки создаются разными слоями, их высота разная и зависит от содержания.
Ширина	Если ширина таблицы явно не указана, она вычисляется на основе содержимого таблицы.	По умолчанию слой занимает всю доступную ему ширину.
Расположение	Строки таблицы отображаются в том порядке, как они представлены в коде. Ячейки идут слева направо и сверху вниз.	Порядок слоёв в коде может не соответствовать их положению в браузере.
Загрузка	Как правило, пока таблица не загрузится полностью, содержимое её не будет показываться. Если на веб-странице размещена большая таблица, загрузка страницы существенно замедляется.	Слои отображаются последовательно, по мере загрузки документа.
HTML-код	Код для создания таблиц может быть громоздок, особенно если требуется объединить множество ячеек или сделать несколько вложенных таблиц.	Код, как правило, компактный.
Выравнивание по высоте	Содержимое внутри ячейки легко выравнивать по её верхнему, нижнему краю или середине.	Выравнивание нетривиально.

Как видно из таблицы, разница между таблицами и слоями существенная, особенно это касается колонок. В таблице колонки, создаваемые ячейками, имеют одинаковую высоту, при вёрстке слоями приходится использовать искусственные методы, чтобы добиться подобного результата. Всё дело в том, что идеология слоёв не предполагает их искусственное растягивание, и методы построения колонок одинаковой высоты построены, как правило, на визуальном обмане. Если взять в качестве основы пример 2.2 и вместо таблицы использовать <div>, то получится следующее решение (пример 2.11).

Пример 2.11. Колонки одинаковой высоты

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Высота слоёв</title>
  <style type="text/css">
   .content, .menu { padding: 10px;}
   .container {
    background: #9c3022; /* Цвет фона правой колонки */
   }
   .content {
    margin-right: 120px;
    background: #f0f0f0; /* Цвет фона левой колонки */
   } 
   .menu {
    width: 100px; /* Ширина правой колонки*/
    color: #fff; /* Цвет текста */
    float: right; /* Колонка справа */
   }
  </style>
 </head>
 <body>
  <div class="container">
   <div class="menu">Борщ</div>
   <div class="content">
    Мясо отварить до готовности. Промыть свеклу, очистить, 
    нарезать соломкой и тушить с помидорами до полуготовности.
   </div>
  </div>
 </body>
</html>

В данном примере колонки имеют разную высоту, а то, что в браузере они кажутся одинаковыми, получается за счет хитрого применения фоновой заливки. Тем не менее, пример не лишён недостатков и хорошо работает только в том случае, когда содержимое правой колонки по высоте меньше содержимого левой колонки. Если точно неизвестно, какая колонка будет больше, то существует несколько решений, как этого добиться. В частности, один из известных методов предполагает добавление большого значения padding-bottom к слоям, что поднимает их вверх, с одновременным опусканием их вниз за счёт отрицательного значения margin-bottom с тем же значением. Стиль в таком случае будет следующий.

.content, .menu { 
 padding: 10px; 
 padding-bottom: 10000px; /* Поле снизу */
 margin-bottom: -10000px; /* Опускаем вниз */
}
.container {
 overflow: hidden; /* Обрезаем всё за пределами области */
}
.content {
 margin-right: 120px;
 background: #f0f0f0;
} 
.menu {
 background: #9c3022;
 width: 100px;
 color: #fff;
 float: right;
}

Однако подчеркну ещё раз свою мысль.

Высота слоёв формируется на основе их содержания и попытка искусственного приведения слоёв к одинаковой высоте противоречит идеологии слоёв и является извращением их сути. Если вам нужны колонки одинаковой высоты — используйте таблицы.

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