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

Для того, чтобы сделать свою запись более компактной, можно разбить ее на 2 столбца, или колонки. Достичь этого можно несколькими способами.

Подставляем текст правой и левой колонок в следующую формулу:

<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>

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

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

 

 

<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 колонки:

Код:

 

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