www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Табличная верстка > Макет из двух колонок

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

контентовая версия  

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

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

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

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

Валидный HTML
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<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. Это требуется для того, чтобы при разном объеме содержимого ячеек, они не сдвигались бы относительно друг друга, а начинались одинаково от верхнего края.

Параметры width и valign можно заменить стилевыми атрибутами width и vertical-align с теми же значениями. Тогда данный код будет иметь следующий вид (пример 2).

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

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Две колонки</title>
<style type="text/CSS (ЦСС)">
#maket {
 width: 100%; /* Ширина всей таблицы в процентах */
}

#maket TD {
 vertical-align: top; /* Вертикальное выравнивание в ячейках */
}

TD#leftcol {
 width: 200px; /* Ширина левой колонки в пикселах */
}
</style>
</head>
<body>

<table cellspacing="0" cellpadding="0" id="maket">
<tr>
<td id="leftcol">Левая колонка</td>
<td>Правая колонка</td>
</tr>
</table>

</body>
</html>

Поля внутри колонок

Расстояние между колонками регулируется параметром cellpadding тега <TABLE>. Поскольку cellpadding определяет расстояние от границы ячейки до края ее содержимого, то пространство между содержимым разных колонок будет равно удвоенному значению этого параметра. Используя стили, в частности, атрибут padding, можно легко регулировать значение отступа для каждой колонки (пример 3).

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

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Две колонки</title>
<style type="text/CSS (ЦСС)">
#leftcol {
 padding-right: 10px; /* Поле справа от контента */
 vertical-align: top; /* Выравнивание по верхнему краю ячеек */
 width: 200px; /* Ширина колонки */
}
</style>
</head>
<body>

<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td id="leftcol">Левая колонка</td>
<td>Правая колонка</td>
</tr>
</table>

</body>
</html>

В данном примере значения параметров cellspacing и cellpadding равны нулю, а расстояние между содержимым колонок определяется аргументом padding-right, который добавляется к левой ячейке через идентификатор с именем leftcol.

Аналогично отступы можно регулировать не только справа, но и с других сторон каждой ячейки. В примере 4 показано, как устанавливать поля для всех ячеек через стили.

Пример 4. Поля в ячейках

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Две колонки</title>
<style type="text/CSS (ЦСС)">
#maket TD {
 padding: 5px; /* Поля вокруг содержимого ячеек */
 vertical-align: top; /* Выравнивание по верхнему краю ячеек */
 width: 200px; /* Ширина колонки */
}
</style>
</head>
<body>

<table width="100%" cellspacing="0" id="maket">
<tr>
<td id="leftcol">Левая колонка</td>
<td valign="top">Правая колонка</td>
</tr>
</table>

</body>
</html>

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

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

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

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Две колонки</title>
<style type="text/CSS (ЦСС)">
#maket {
 width: 100%; /* Ширина всей таблицы */
}

TD {
 vertical-align: top; /* Вертикальное выравнивание в ячейках */
 padding: 5px; /* Поля вокруг ячеек */
}

TD#leftcol {
 width: 200px; /* Ширина левой колонки */
 background: #ccc; /* Цвет фона левой колонки */
}

TD#rightcol {
 background: #fc3; /* Цвет фона правой колонки */
}
</style>
</head>
<body>

<table cellspacing="0" id="maket">
<tr>
<td id="leftcol">Левая колонка</td>
<td id="rightcol">Правая колонка</td>
</tr>
</table>

</body>
</html>

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

Рис. 1. Разный цвет колонок

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

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

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

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

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Две колонки</title>
<style type="text/CSS (ЦСС)">
#maket {
 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" id="maket">
<tr>
<td id="leftcol">Левая колонка</td>
<td id="spacer"></td>
<td id="rightcol">Правая колонка</td>
</tr>
</table>

</body>
</html>

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

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

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

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

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

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

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

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Две колонки</title>
<style type="text/CSS (ЦСС)">
#maket {
 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" id="maket">
<tr>
<td id="leftcol">Левая колонка</td>
<td id="rightcol">Правая колонка</td>
</tr>
</table>

</body>
</html>

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

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

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

Резюме

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

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

Статья опубликована: 07.12.2009 Последнее обновление: 29.04.2009
Поиск по сайту
Табличная верстка
Разделы
Теги по теме

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

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

CSS (ЦСС) по теме

background
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.

border
Параметр позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

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

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

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

vertical-align
Выравнивает элемент по вертикали относительно своего родителя или окружающего контента.

width
Устанавливает ширину блочных или заменяемых элементов. Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект