Как разбить текст на 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. на blogspot лучше обойтись без вертикальной черты, она отображается не корректно.
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 колонки с помощью table

1 колонка 2 колонка 3 колонка
<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>, на сколько колонок разбит наш текст

Оцените статью
Добавить комментарий

  1. Анонимный

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

    Ответить
  2. Анонимный

    просто красавчик! от души!!!!!!!!

    Ответить
  3. Аноним

    Тогда уж - красавица =)))

    Ответить
  4. Тем кому интересно.

    спаибки оч помог способ 1

    Ответить
  5. Анонимный

    Спасибо большое за коды! Очень пригодились!

    Ответить
  6. Lidiya Waite

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

    Ответить
  7. Денис

    »Тогда уж - красавица =)))

    Ну вообще офигеть теперь 🙂

    Первый способ решил проблему сразу же! Спасибо!

    Ответить
  8. Nick Barabanov

    первый способ очень красивый!
    А как сделать ТРИ колонки??

    Ответить
  9. Иванова Наталья

    Nick, ответила на ваш вопрос, дополнив запись

    Ответить
  10. Дмитрий Суричев

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

    Ответить
  11. Анонимный

    А как разделитель убрать, но колонки оставить?

    Ответить
  12. Иванова Наталья

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

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

    Ответить
  13. vasenchenko

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

    Ответить
  14. Анонимный

    Спасибо за информацию, помогла!

    Ответить
  15. Djannet

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

    Ответить
  16. Иванова Наталья

    Разбейте табличным способом, и не будет разницы сколько строк в колонках.

    Ответить
  17. Super Sanek

    Спасибо за статью, очень все просто и понятно , нужно пробовать теперь)

    Ответить
  18. Super Sanek

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

    Ответить
  19. Иванова Наталья

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

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

    Ответить
  20. Егоров Николай и его семья.

    Спасибо Вам огромное! Пригодилось. А главное без лишней воды

    Ответить
  21. Иванова Наталья

    Рада, что пригодилось)

    Ответить
  22. Unknown

    Здорово, конечно.
    Но в мобильной версии хорошо бы в одну колонку, чтоб это перестраивалось.

    Ответить
  23. galia

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

    Ответить
  24. Unknown

    СПАСИБО ОЧЕНЬ ПОМОГ, УДАЧИ И УСПЕХОВ ВО ВСЕМ!

    Ответить
  25. Unknown

    К сожалению они не адаптивные, не сьезжают вниз (

    Ответить
  26. imena

    Круть, спасибо!! Очень помогли!!

    Ответить
  27. Slava

    спс бро очень помог удачи во всем и везде и всегда

    Ответить