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

   Для того, чтобы сделать свою запись более компактной, можно разбить ее на 2 столбца, или колонки. Достичь этого можно несколькими способами.
Способ первый при помощи тега <div>:
подставляем текст правой и левой колонок в следующую формулу:
<div style="float: left; width: 49%;">Текст левой колонки</div><div style="float: right; width: 49%;">Текст правой колонки</div><div class="clear">
В результате получим:

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

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

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

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

Вот, что у нас получилось:
Как разбить текст на 2 и 3 колонки
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" width="3" size="50"></td><td valign=top>текст правой колонки</td></tr>
</table>

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

1 колонка 2 колонка 3 колонка

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

<table cellspacing="10" cellpadding="0" width="100%" border="0"><tbody>

    <tr>

      <td valign="top" width="30%">1 колонка</td>
      <td valign="top" width="30%">2 колонка</td>
      <td valign="top" width="30%">3 колонка</td>

    </tr>

  </tbody></table>

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

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

Код:

<div style="float: left; width: 100%">

<div style="float: left; width: 33%">Текст 1</div>

<div style="float: left; width: 33%">Текст 2</div>

<div style="float: left; width: 33%">Текст 3 </div>

</div>

<div style="clear: both"></div>

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

текст 1 колонки
текст 1 колонки
текст 1 колонки
текст 1 колонки
текст 1 колонки
текст 2 колонки
текст 2 колонки
текст 2 колонки
текст 2 колонки
текст 2 колонки
текст 3 колонки
текст 3 колонки
текст 3 колонки
текст 3 колонки
текст 3 колонки
текст 4 колонки
текст 4 колонки
текст 4 колонки
текст 4 колонки
текст 4 колонки



Код:

<div style="float: left; width: 100%">

  <div style="float: left; width: 25%">Текст 1</div>
  <div style="float: left; width: 25%">Текст 2</div>
  <div style="float: left; width: 25%">Текст 3 </div>
<div style="float: left; width: 25%">Текст 4 </div>

</div>
<div style="clear: both"></div>

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

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

  1. хорошая тема…….еще скрипты прикрути сюда на сайт, особенно аяксы всякие, в сети я видел где-то сайт на англ….. сайт на аякс- это будущее инета

  2. Спасибо за коды. Открыла учебник, там только горизонтальный разделитель. Хвала интернету и добрым людям, которые делятся знаниями

  3. а где таг, что статья от нуба нубу )))
    все что тут предложено — АЗБУКА позиционирования элементов. Таким образом можно все что угодно.
    А вот где материал про текст по колонкам ?????? его та тут и нет (((((( пойду дальше гуглить. Вообщето на это есть то-ли таг, то ли ЦСС свойство спецовое, без ЭТИХ выкрутасов.

  4. Без вертикальной черты:
    <table cellspacing="10" cellpadding="0" border="0"><tbody>
    <tr>
    <td valign="top">1 колонка</td>

    <td valign="top">2 колонка</td>
    </tr>
    </tbody></table>

  5. Благодарю автора за своевременное предоставление информации, как создать 3 колонки на сайте с адаптивным дизайном.

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

  7. коды рабочие, проверено на prkwood.ru!
    Один вопрос — при разбитии на колонки текста появляется фон у колонок — это в стилях править или можно как то в этом же коде (html) указать? через div все ок!

  8. Можно добавить стили выше вашего кода вида:

    <style>здесь код css для таблиц</style>
    и прописать стили таблиц внутри.

  9. Очень здорово!) Спасибо Наталья!! если у Вас будет время могли бы Вы поделиться как поделить содержимое страницы табличным способом?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *