Разбить текст на колонки на html: Как разделить текст на 2 и 3 колонки – Многоколоночный текст | htmlbook.ru

Как разделить текст на 2 и 3 колонки

Здравствуйте дорогие читатели и гости Я блоггер. В предыдущей  статье мы научились создавать таблицу html. В этой публикации опишу как разделить текст на 2 и 3 колонки.

Начнем с тега <table>. Принцип тот же что и при создании таблицы. Открываем редактор сообщения в режиме html и вставляем код:

<table border=»0″ cellpadding=»0″ cellspacing=»10″><tr> <td valign=»top»>Текст первой колонки</td><td valign=»top»><div>Текст второй колонки</div></td></tr></table>

height: 150px —  высота вертикальной линии
Цвет и шрифт — настраиваем как в сообщении.

А теперь уберем черту между текстом и поместим колонки по центру:

<center><table border=»0″ cellpadding=»0″ cellspacing=»10″><tr> <td valign=»top»>Текст в первой колонке</td><td valign=top>Текст во второй колонке</td></tr>
</table></center>

Текст можно разбить с помощью тега div.

<div>Текст в левом столбце</div><div>Текст в правом столбце</div>

А теперь разобьем текст на три колонки чуточку изменив код:

<div>Текст левой колонки</div><div>Текст правой колонки</div><div>Текст средней колонки</div><div></div>

Текст левой колонки

Текст правой колонки

Текст средней колонки

<div>
<div>Текст 1</div>
<div>Текст 2</div>
<div>Текст 3 </div>
</div>
<div></div>

Текст 1

Текст 2

Текст 3

Еще один оригинальный способ разбить текст на колонки.

<style type=»text/css»>
#title1, #title2, #col1, #col2{ /* 1 */
font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */
font-weight: bold; /* Жирное начертание текста заголовка */
font-size: 80%; /* Размер шрифта */
color: white; /* Цвет текста заголовка */
width: 200px; /* Ширина колонок */
padding: 5px; /* Поля вокруг текста */
border: 1px solid black; /* Рамка вокруг слоя */
margin-left: 5px; /* Отступ слева */
margin-top: 2px; /* Отступ сверху */
float: left; /* Состыковка колонок по горизонтали */
}
#col1, #col2{ /* 2 */

font-family: «Times New Roman», Times, serif; /* Шрифт с засечками */
font-size: 100%; /* Размер шрифта */
font-weight: normal; /* Нормальное начертание */
color: black; /* Цвет текста */
}
/* Цвет фона каждого слоя */
#title1 { background:#72B626; }
#title2 { background: #72B626; }
#col1 { background: #FFFFFF; }
#col2 { background:#FFFFFF; }

.tr { /* 3 */
clear: both; /* Отменяет действие float */
}
</style>
<center><div>
<div>HTML</div>
<div>CSS</div></center>
</div>
<div>
<div>Текст</div>
<div>Текст</div>
</div>

Добавим во всех вхождениях кода

<style type=»text/css»>
#title1, #title2, #title3, #col1, #col2, #col3 { /* 1 */
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
font-size: 80%;
color: white;
width: 150px;
padding: 5px;
border: 1px solid black;
margin-left: 5px;
margin-top: 2px;
float: left;
}
#col1, #col2, #col3 { /* 2 */
font-family: «Times New Roman», Times, serif;
font-size: 100%;
font-weight: normal;
color: black;
}
#title1 { background: #72B626; }
#title2 { background: #72B626; }
#title3 { background: #72B626; }
#col1 { background: #FFFFFF; }
#col2 { background: #FFFFFF; }
#col3 { background: #FFFFFF; } .tr { /* 3 */

clear: both;
}
</style>
<div>
<div>
Текст</div>
<div>
Текст</div>
<div>
Текст</div>
</div>
<div>
<div>
Текст</div>
<div>
Teкcт</div>
<div>
Teкст</div>

Читайте также:

Будь вместе с Я Блоггер

Будь в тренде!

Получай материалы прямиком в свою почту

*

ПОДПИШИСЬ!

Поделиться в соцсетях

Многоколоночный текст | htmlbook.ru

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

CSS3 предлагает сразу четыре свойства для создания и управления колонками: column-count, column-gap, column-width и column-rule. Для наглядности значения некоторых свойств показаны на рис. 1.

Рис. 1. Стилевые свойства для колонок

• column-count — устанавливает оптимальное число колонок.
• column-gap — расстояние между колонками.
• column-width — оптимальная ширина колонок.
• column-rule — разделительная линия между колонками.

Следует пояснить, что такое «оптимальное число» и «оптимальная ширина». Свойство column-count задаёт не точное количество колонок, а скорее желаемое. Браузер постарается разбить текст именно на столько колонок, но при уменьшении размеров окна будет сокращать число колонок, чтобы сохранить комфортность чтения. Аналогично обстоит и с шириной. Свойство column-width указывает минимальную ширину колонки, при этом браузер это значение может проигнорировать, если размер окна недостаточен для обеспечения заданной ширины колонок.

Браузер Chrome и Safari понимают эти свойства только с префиксом -webkit, а Firefox только с префиксом -moz. Комбинируем свойства для разных браузеров и получаем код, который создаёт трёхколоночный текст (пример 1).

Пример 1. Три колонки

HTML5CSS 3IE 9IE 10CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Колонки</title>
  <style>
   .column {
    -webkit-column-width: 200px;
    -moz-column-width: 200px;
    column-width: 200px;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    -webkit-column-rule: 1px solid #ccc;
    -moz-column-rule: 1px solid #ccc;
    column-rule: 1px solid #ccc;
   }
  </style>
 </head>
 <body>
  <div>
   <p>Дистинкция дискредитирует непредвиденный интеллект, учитывая опасность,
   которую представляли собой писания Дюринга для не окрепшего еще немецкого
   рабочего движения. Аподейктика порождена временем. Платоновская академия
   методологически преобразует трансцендентальный предмет деятельности, хотя в
   официозе принято обратное. Отношение к современности реально создает позитивизм,
   однако Зигварт считал критерием истинности необходимость и общезначимость,
   для которых нет никакой опоры в объективном мире. Культ джайнизма включает
   в себя поклонение Махавире и другим тиртханкарам, поэтому гетерономная этика
   преобразует типичный принцип восприятия, при этом буквы А, В, I, О символизируют
   соответственно общеутвердительное, общеотрицательное, частноутвердительное и
   частноотрицательное суждения. Катарсис, по определению, непредвзято оспособляет
   онтологический даосизм, при этом буквы А, В, I, О символизируют соответственно
   общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное
   суждения.</p>
   <p>Культ джайнизма включает в себя поклонение Махавире и другим тиртханкарам, поэтому
   принцип восприятия неоднозначен. Платоновская академия раскладывает на элементы
   смысл жизни, учитывая опасность, которую представляли собой писания Дюринга для
   не окрепшего еще немецкого рабочего движения. Ощущение мира, как следует из
   вышесказанного, подчеркивает язык образов, учитывая опасность, которую представляли
   собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Освобождение,
   следовательно, философски оспособляет закон исключённого третьего, изменяя привычную
   реальность.</p>
  </div>
 </body>
</html>
  
 

Результат данного примера в браузере Chrome показан на рис. 2. Вместо трёх колонок мы наблюдаем две из-за малой ширины окна браузера. При увеличении размеров окна число колонок вырастет до заданного, при дальнейшем уменьшении ширины окна, наоборот, количество колонок сократится до одной.

Рис. 2. Многоколоночный текст

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

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

.column {
  -webkit-columns: 200px 3;
  -moz-columns: 200px 3;
  columns: 200px 3;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;
  -webkit-column-rule: 1px solid #ccc;
  -moz-column-rule: 1px solid #ccc;
  column-rule: 1px solid #ccc;
} 

Опять же, для работы некоторых браузеров требуется добавить свои префиксы. Расстояние между колонок и параметры разделительной линии, если это требуется, приходится задавать дополнительными свойствами. Если column-gap и column-rule не указаны, линия между колонок не отображается, но некоторое минимальное расстояние между колонок в любом случае сохраняется.

Как разбить текст на 2 и 3 колонки

текст левой колонки
текст левой колонки
текст левой колонки
текст левой колонки
текст левой колонки

текст правой колонки
текст правой колонки
текст правой колонки
текст правой колонки
текст правой колонки

Второй способ — табличный. С его помощью можно разбить текст на 2 столбца с вертикальной чертой между ними. Заполняем следующий код своим текстом:/*

<table border=0 cellpadding=0 cellspacing=10><tr>
<td valign=top>1 колонка</td><td width=1 bgcolor=#000000><img src=1×1.gif width=1 height=1></td><td valign=top>2 колонка</td></tr>
</table>

Вот, что у нас получилось:

P.S. на blogspote лучше обойтись без ветикальной черты, она отображается не корректно.
3 способ похож на предыдущий. Единственным отличием является способ задания разделительной черты. так как в некоторых блогосервисах не все коды отражаются адекватно, то предложу вам и этот вариант. Вот как он выглядит:

Код:

  <table border=0 cellpadding=0 cellspacing=10><tr>
<td valign=top>текст левой колонки</td><td width=1 bgcolor=#000000><hr noshade align=»center» size=»50″></td><td valign=top>текст правой колонки</td></tr>
</table>

Разбиваем текст на 3 колонки:

Разбиваем текст на 3 колонки html

<table cellspacing=»10″ cellpadding=»0″ border=»0″><tbody>

    <tr>

      <td valign=»top»>1 колонка</td>
      <td valign=»top»>2 колонка</td>
      <td valign=»top»>3 колонка</td>

    </tr>

  </tbody></table>

Разбить на 3 колонки с помощью div

текст 1 колонки текст 1 колонки текст 1 колонки текст 1 колонки текст 1 колонки

текст 2 колонки текст 2 колонки текст 2 колонки текст 2 колонки текст 2 колонки

текст 3 колонки текст 3 колонки текст 3 колонки текст 3 колонки текст 3 колонки

Код:

<div>

<div>Текст 1</div>

<div>Текст 2</div>

<div>Текст 3 </div>

</div>

<div></div>

Текст на 4 колонки:

текст 1 колонки
текст 1 колонки
текст 1 колонки
текст 1 колонки
текст 1 колонки

текст 2 колонки
текст 2 колонки
текст 2 колонки
текст 2 колонки
текст 2 колонки

текст 3 колонки
текст 3 колонки
текст 3 колонки
текст 3 колонки
текст 3 колонки

текст 4 колонки
текст 4 колонки
текст 4 колонки
текст 4 колонки
текст 4 колонки

Код:

<div>

  <div>Текст 1</div>
  <div>Текст 2</div>
  <div>Текст 3 </div>
<div>Текст 4 </div>

</div>
<div></div>

Таким образом, чтобы разделить текст на колонки в html, нужно указать ширину каждой колонки в процентах (width: N%). Для этого делим 100% на количество колонок или задаем свои начения и прописываем столько строчек <div>Текст 3 </div>, на сколько колонок разбит наш текст

Как разбить текст на 2 колонки HTML

текст левой колонки
текст левой колонки
текст левой колонки
текст левой колонки
текст левой колонки

текст правой колонки
текст правой колонки
текст правой колонки
текст правой колонки
текст правой колонки

Адаптивный текст в несколько колонок на CSS — Блог веб-разработчиков

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

Кроссбраузерность

На данный момент описываемый далее метод поддерживается во всех популярнейших браузерах (включая IE 10+).

Подробнее

Демонстрацию данного способа можно встретить в тексте этой статьи.
(Если ваш браузер не поддерживает многоколоночный текст, то пожалуйста, обновите его в конце концов 🙂 И выглядеть это будет примерно так, как на картинке ниже).

Реализация

.three {
       column-count: 2;
       column-gap: 20px;
       column-rule: 1px dotted #ccc;
       -moz-column-count: 2;
       -moz-column-gap: 20px;
       -moz-column-rule: 1px dotted #ccc;  
       -webkit-column-count: 2;
       -webkit-column-gap: 20px;
       -webkit-column-rule: 1px dotted #ccc;
       text-align:justify;
}

.three { column-count: 2; column-gap: 20px; column-rule: 1px dotted #ccc; -moz-column-count: 2; -moz-column-gap: 20px; -moz-column-rule: 1px dotted #ccc; -webkit-column-count: 2; -webkit-column-gap: 20px; -webkit-column-rule: 1px dotted #ccc; text-align:justify; }

Как вы уже догадались, свойство column-count определяет количество столбцов, а column-gap — расстояние между столбцами. Также существуют дополнительные свойства: column-width, позволяющее строго задавать ширину столбцов, и column-rule, определяющее разделитель между столбцами (например, 1px dotted #ccc, чтобы разделить столбцы точечной линией). Кроме того, можно использовать префиксы -webkit- и -moz- для поддержки более старых версий браузеров. Таким образом, можно управлять столбцами, просто изменяя числовые значения свойств.

Адаптивный многоколоночный текст

А что делать, если у нашего сайта «резиновая» верстка и его ширина может варьироваться, например от 320px до 1200px? В данном случае нам на помощь приходит такая фишка CSS, как media queries (позволяющие изменять css-свойства различных объектов в зависимости от ширины экрана пользователя).

Добавим после представленного выше класса следующий фрагмент:

@media screen and (min-width: 1024px) {
.three {
       column-count: 3;
       -moz-column-count: 3;
       -webkit-column-count: 3;
}

@media screen and (min-width: 1024px) { .three { column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; }

Этот фрагмент работает следующим образом: если ширина экрана больше или равна 1024px, то применить свойства, содержащиеся в данном блоке. В нашем случае мы перезаписываем некоторые свойства класса .three число колонок с двух увеличится до трёх. Хорошо, большие мониторы мы учли, осталось позаботиться о мобильных девайсах — там вообще не нужны колонки, поэтому пойдем еще дальше и добавим такой кусок кода:

@media screen and (max-width: 480px) {
.three {
       column-count: 1;
       -moz-column-count: 1;
       -webkit-column-count: 1;
}

@media screen and (max-width: 480px) { .three { column-count: 1; -moz-column-count: 1; -webkit-column-count: 1; }

Этот кусок кода сработает при ширине экрана 480px и менее и отобразит весь текст в одну колонку.

Таким образом, мы имеем следующую схему:

• Ширина экрана <= 480px — одна колонка текста.
• Ширина экрана от 480px до 1024px — две колонки
• Ширина экрана >= 1024px — три колонки.

Демонстрацию того, что мы только что сделали, можно посмотреть здесь. Или можете скачать исходники.

На этом всё. Подписывайтесь, чтобы не пропустить новые статьи, а свои вопросы задавайте в комментариях.

Многоколоночный текст на CSS3.

Вы здесь: Главная — CSS — CSS3 — Многоколоночный текст на CSS3.

В этой статье мы поговорим о том, как разбить текст на колонки с помощью CSS3.

Раньше, чтобы разбить текст на колонки, нам нужно было использовать float. Теперь же для этого есть отдельное свойство. Чтобы было понятнее, создадим небольшую html разметку.

Итак, у нас есть текст. Чтобы разбить его на 3 колонки, нужно воспользоваться свойством column-count

Также, мы можем указать ширину колонок, тогда их количество будет вычисляться автоматически.

При помощи свойства colump-gap можно изменять расстояние между колонками.

И, также, с помощью свойства column-rule мы можем ставить разделитель между колонками. Он задаётся так же, как и border.

Если мы зададим нашему блоку высоту, то у нас появится горизонтальный скрол. Что логично 🙂

Вот и всё, что можно рассказать про это свойство. В конце стоит лишь добавить, что поддерживается оно плохо: Internet Explorer начиная с 10 версии, а android вообще не поддерживает. Так что, применяйте его только там, где текст и в одну колонку будет отображаться нормально.

• Создано 16.04.2014 20:45:28
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Макет из двух колонок | htmlbook.ru

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Две колонки</title>
 </head>
 <body>
  <table cellspacing="0" cellpadding="5">
   <tr> 
    <td valign="top">Левая колонка</td><td valign="top">Правая колонка</td>
   </tr>
  </table>
 </body>
</html>

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

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

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

<!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=utf-8">
  <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">
   <tr> 
    <td>Левая колонка</td><td>Правая колонка</td>
   </tr>
  </table>
 </body>
</html>

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

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

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

<!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=utf-8">
  <title>Две колонки</title>
  <style type="text/css">
   #leftcol {
    padding-right: 10px; /* Поле справа от текста */
    vertical-align: top; /* Выравнивание по верхнему краю ячеек */
    width: 200px; /* Ширина колонки */ 
   }
  </style>
 </head>
 <body>
  <table cellspacing="0" cellpadding="0">
   <tr> 
    <td>Левая колонка</td><td>Правая колонка</td>
   </tr>
  </table>
 </body>
</html>

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

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

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

<!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=utf-8">
  <title>Две колонки</title>
  <style type="text/css">
   #maket TD {
    padding: 5px; /* Поля вокруг содержимого ячеек */
    vertical-align: top; /* Выравнивание по верхнему краю ячеек */
    width: 200px; /* Ширина колонки */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0">
   <tr> 
    <td>Левая колонка</td>
    <td valign="top">Правая колонка</td>
   </tr>
  </table>
 </body>
</html>

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

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

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

<!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=utf-8">
  <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">
   <tr> 
    <td>Левая колонка</td>
    <td>Правая колонка</td>
   </tr>
  </table>
 </body>
</html>

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

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

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

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

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

<!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=utf-8">
  <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">
   <tr> 
    <td>Левая колонка</td>
    <td></td>
    <td>Правая колонка</td>
   </tr>
  </table>
 </body>
</html>

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

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

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

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

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

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

<!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=utf-8">
  <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">
   <tr> 
    <td>Левая колонка</td><td>Правая колонка</td>
   </tr>
  </table>
 </body>
</html>

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

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

Резюме

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

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