Макет из двух колонок

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

Двухколонная модульная сетка достаточно часто применяется на сайтах, при этом, как правило, в одной колонке располагается основной материал (текст статьи, например), а во второй — ссылки на разделы сайта и другая информация. Для создания подобного макета таблицы достаточно удобны — каждая ячейка выступает в качестве отдельной колонки, что позволяет легко регулировать различные параметры отображения документа.

Ширина колонок

Для начала рассмотрим самый простой вариант, когда ширина левой колонки жестко задана в пикселах, а ширина правой колонки варьируется в зависимости от размеров окна браузера. Для этого требуется задать общую ширину всей таблицы в процентах через атрибут width тега <table> и для первой ячейки установить её ширину в пикселах или процентах также с помощью атрибута width, но уже для тега <td> (пример 2.16).

Пример 2.16. Ширина колонки в пикселах

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Две колонки</title>
 </head>
 <body>
  <table width="100%" cellspacing="0" cellpadding="5">
   <tr> 
    <td width="200" valign="top">Левая колонка</td>
    <td valign="top">Правая колонка</td>
   </tr>
  </table>
 </body>
</html>

В данном примере граница у таблицы не отображается, а вертикальное выравнивание содержимого ячеек по верхнему краю определяется атрибутом valign со значением top. Это требуется для того, чтобы при разном объеме содержимого ячеек, они не сдвигались бы относительно друг друга, а начинались одинаково от верхнего края.

Переведём все используемые атрибуты таблицы в стилевые свойства. Тогда данный код будет иметь следующий вид (пример 2.17).

Пример 2.17. Использование стилей

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">
   .layout {
    width: 100%; /* Ширина всей таблицы в процентах */
   }
   .layout TD {
    vertical-align: top; /* Вертикальное выравнивание в ячейках */
   }
   TD.leftcol {
    width: 200px; /* Ширина левой колонки в пикселах */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0" cellpadding="0" class="layout">
   <tr> 
    <td class="leftcol">Левая колонка</td>
    <td>Правая колонка</td>
   </tr>
  </table>
 </body>
</html>

Цвет фона колонок

Чтобы визуально отделить одну колонку от другой используют разные приемы, самым распространенным из них, пожалуй, является использование фонового цвета. Для этого создаём новый стилевой класс, устанавливаем для него свойство background и применяем его к требуемой ячейке (пример 2.18).

Пример 2.18. Цвет фона

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">
   .layout {
    width: 100%; /* Ширина всей таблицы */
   }
   TD {
    vertical-align: top; /* Вертикальное выравнивание в ячейках */
    padding: 5px; /* Поля вокруг ячеек */
   }
   TD.leftcol {
    width: 200px; /* Ширина левой колонки */
    background: #ccc; /* Цвет фона левой колонки */
   }
   TD.rightcol {
    background: #fc3; /* Цвет фона правой колонки */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0" class="layout">
   <tr> 
    <td class="leftcol">Левая колонка</td>
    <td class="rightcol">Правая колонка</td>
   </tr>
  </table>
 </body>
</html>

В данном примере разный цвет фона добавляется для правой и левой колонки (рис. 2.21).

Колонки разного цвета

Рис. 2.21. Колонки разного цвета

Разделитель колонок

Использование полей не всегда подходит для установки нужного расстояния между колонок. Например, в случае, когда поля вокруг текста нельзя включать в силу разных соображений. Тогда поможет добавление еще одной ячейки, которая выступает в качестве разделителя между колонками (пример 2.19).

Пример 2.19. Использование трех ячеек

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">
   .layout {
    width: 100%; /* Ширина всей таблицы */
   }
   TD {
    vertical-align: top; /* Вертикальное выравнивание в ячейках */
    padding: 5px; /* Поля вокруг ячеек */
   }
   TD.leftcol {
    width: 200px; /* Ширина левой колонки */
    background: #ccc; /* Цвет фона левой колонки */
    border: 1px solid #000; /* Параметры рамки */
   }
   TD.rightcol {
    background: #fc3; /* Цвет фона правой колонки */
    border: 1px solid #000; /* Параметры рамки */
   }
   .spacer {
    width: 10px; /* Расстояние между колонками */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0" class="layout">
   <tr> 
    <td class="leftcol">Левая колонка</td>
    <td class="spacer"></td>
    <td class="rightcol">Правая колонка</td>
   </tr>
  </table>
 </body>
</html>

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

На рис. 2.22 показан результат примера. Для наглядности и «красоты» вокруг колонок добавлена граница.

Расстояние между колонками

Рис. 2.22. Расстояние между колонками

Линия между колонками

Разделять колонки можно не только с помощью цвета фона и пустого пространства, но и добавлением линии между колонок. Для создания линии необходимо установить свойство border-left для правой колонки или border-right для левой (пример 2.20).

Пример 2.20. Добавление линии

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">
   .layout {
    width: 100%; /* Ширина всей таблицы */
   }
   TD {
    vertical-align: top; /* Вертикальное выравнивание в ячейках */
    padding: 5px; /* Поля вокруг ячеек */
   }
   TD.leftcol {
    width: 100px; /* Ширина левой колонки */
    background: #ccc; /* Цвет фона левой колонки */
    border-right: 1px dashed #000; /* Параметры линии */
   }
   TD.rightcol {
    background: #fc3; /* Цвет фона правой колонки */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0" class="layout">
   <tr> 
    <td class="leftcol">Левая колонка</td>
    <td class="rightcol">Правая колонка</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан ниже (рис. 2.23).

Линия между колонок

Рис. 2.23. Линия между колонок

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

таблицы макет

HTML по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.