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

Макет из трех колонок

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

Использование трех колонок на страницах с нашего сайта обусловлено широтой информации, которую требуется показать посетителю. Обычно одна колонка, самая широкая, отдается под контент основного материала, Уроки, например, а остальные колонки применяются для ссылок, рекламы, анонсов и т.д.

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

Ширина колонок в пикселах

Ширина разных колонок зависит от используемого макета — фиксированного или «резинового». При макете фиксированной ширины общая ширина таблицы задается в пикселах и остается постоянной независимо от разрешения монитора и размера окна браузера. При этом ширину отдельных колонок также имеет смысл установить в пикселах. В примере 1 ширина макета задана как 750 пикселов, а колонки соответственно 150, 400 и 200 пикселов.

Пример 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>
<style type="text/CSS (ЦСС)">
TD {
 vertical-align: top; /* Выравнивание по верхнему краю ячейки */
}
</style>
</head>
<body>

<table width="750" cellpadding="5" cellspacing="0">
<tr>
<td width="150">Колонка 1</td>
<td width="400">Колонка 2</td>
<td width="200">Колонка 3</td>
</tr>
</table>

</body>
</html>

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

Ширину всех ячеек в подобном случае задавать не обязательно. Так, если не указать ширину одной ячейки, то она будет вычислена автоматически исходя из общей ширины таблицы и ширины остальных ячеек. В других случаях, например, когда не установлена ширина двух ячеек, их размер определяется по содержимому. Поскольку содержимое ячеек варьируется от страницы к странице, то ширина также будет «плавать». Это, по-английски говоря, not good (для тех, кто не понял, нехорошо), поскольку вид файлов должен оставаться единым. Так что ширину колонок лучше все-таки задавать.

Ширина колонок в процентах

При «резиновом» макете ширина таблицы устанавливается в процентах от ширины окна браузера и, таким образом, напрямую зависит от нее. Здесь возможны два варианта:

  1. ширина всех ячеек задана в процентах;
  2. сочетание процентов и пикселов, когда ширина одних ячеек устанавливается в процентах, а других — в пикселах.

В первом случае вначале устанавливается ширина всей таблицы в процентах, а затем ширина отдельных ячеек (пример 2). Причем в сумме ширина ячеек должна получиться 100%, несмотря на то, что размер таблицы может быть иным. Дело в том, что ширина таблицы вычисляется относительно доступного пространства web-страницы, а размер ячеек устанавливается относительно всей таблицы в целом.

Пример 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 (ЦСС)">
TD {
vertical-align: top; /* Выравнивание по верхнему краю ячейки */
}

#col1 {
 width: 20%; /* Ширина первой колонки */
 background: #fc0; /* Цвет фона первой колонки */
}

#col2 {
 width: 40%; /* Ширина второй колонки */
 background: #f0f0f0; /* Цвет фона второй колонки */
}

#col3 {
 width: 40%; /* Ширина третьей колонки */
 background: #fc0; /* Цвет фона третьей колонки */
}
</style>
</head>
<body>

<table width="90%" cellpadding="5" cellspacing="0">
<tr>
<td id="col1">Колонка 1</td>
<td id="col2">Колонка 2</td>
<td id="col3">Колонка 3</td>
</tr>
</table>

</body>
</html>

Для удобства изменения вида колонок параметры в данном примере перенесены в стили.

Процентная запись для таблиц имеет ряд преимуществ — используется все свободное пространство web-страницы, а сам макет подстраивается под ширину окна браузера. Вместе с тем каждая таблица имеет некоторый минимальный размер, при достижении которого таблица уже не уменьшается и начинает отображаться горизонтальная полоска прокрутки. Такой минимальный размер зависит от содержимого таблицы. Если, например, в каждую из трех ячеек поместить по рисунку шириной 200 пикселов, то общая ширина таблицы не может быть меньше 600 пикселов плюс значения полей вокруг рисунков.

Сочетание процентов и пикселов

просмотрим два основных варианта, когда для задания ширины колонок одновременно применяются проценты и пикселы. Первый вариант состоит в том, что размер крайних колонок устанавливается в пикселах, а ширина средней колонки вычисляется автоматически, исходя из заданной ширины таблицы (рис. 1).

Рис. 1. Ширина средней колонки определяется браузером

Рис. 1. Ширина средней колонки определяется браузером

Для разработки подобного макета понадобится таблица с тремя ячейками. Ширину первой и третьей ячейки устанавливаем в пикселах, а ширину средней ячейки намеренно не задаем (пример 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 (ЦСС)">
TABLE {
 width: 100%; /* Ширина таблицы */
}

TD {
 vertical-align: top; /* Выравнивание по верхнему краю ячейки */
}

#col1 {
 width: 150px; /* Ширина первой колонки */
 background: #fc0; /* Цвет фона первой колонки */
}

#col2 {
 background: #afccdb; /* Цвет фона второй колонки */
}

#col3 {
 width: 200px; /* Ширина третьей колонки */
 background: #fc0; /* Цвет фона третьей колонки */
}
</style>
</head>
<body>

<table cellpadding="5" cellspacing="0">
<tr>
<td id="col1">Колонка 1</td>
<td id="col2">Колонка 2</td>
<td id="col3">Колонка 3</td>
</tr>
</table>

</body>
</html>

Во втором варианте ширина двух колонок устанавливается в процентах, а третьей — в пикселах. В подобном случае обойтись одной таблицей не удастся. Сами посудите, если ширина всей таблицы равна 100%, первой колонки — 200 пикселов, а оставшихся колонок по 20%, то простое вычисление показывает, что размер первой колонки получается равным 60%. Поэтому заданное значение в пикселах браузером будет проигнорировано, а размер установлен в процентах.

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

Рис. 2. Применение вложенных таблиц

Рис. 2. Применение вложенных таблиц

Вначале создаем таблицу заданного размера и с двумя ячейками. Левая ячейка будет выступать в роли первой колонки, и для нее устанавливаем требуемую ширину в пикселах. Ширину для правой ячейки не определяем, поэтому она будет занимать оставшееся пространство, а также служить каркасом для других колонок. Внутрь этой ячейки добавляем вторую таблицу, тоже состоящую из двух ячеек. И уже для них определяем ширину в процентах (пример 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 (ЦСС)">
TABLE {
 width: 100%; /* Ширина таблиц */
}

TD {
 vertical-align: top; /* Выравнивание по верхнему краю ячейки */
}

#col1 {
 width: 150px; /* Ширина первой колонки */
 background: #fc0; /* Цвет фона первой колонки */
}

#col2 {
 width: 60%;
 background: #afccdb; /* Цвет фона второй колонки */
}

#col3 {
 width: 40%; /* Ширина третьей колонки */
 background: #fc0; /* Цвет фона третьей колонки */
}

#col1, #col2, #col3 {
 padding: 5px; /* Поля вокруг контента */
}
</style>
</head>
<body>

<table cellpadding="0" cellspacing="0">
<tr>
<td id="col1">Колонка 1</td>
<td>
 <table cellpadding="0" cellspacing="0">
  <tr>
   <td id="col2">Колонка 2</td>
   <td id="col3">Колонка 3</td>
  </tr>
 </table>
</td>
</tr>
</table>

</body>
</html>

При создании подобного макета следует принимать во внимание следующие моменты.

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

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

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

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

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

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

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

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

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

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