Как разбить текст на колонки в html и css

 

Как разбить текст на колонки в html и сss

 

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

 

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

 

<table border="0″ cellpadding="0″ cellspacing="10″><tr> <td valign="top">Текст первой колонки</td><td valign="top"><div style="background-color: snow; border-left: 2px solid #ff0000; height: 150px; padding-left: 10px; width: 400px;">Текст второй колонки</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 style="float: left; width: 49%;">Текст в левом столбце</div><div style="float: right; width: 49%;">Текст в правом столбце</div>

 

разделить текст на две колонки

 

 

 

 

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

 

<div style="float: left; width: 35%;">Текст левой колонки</div><div style="float: right; width: 35%;">Текст правой колонки</div><div style="margin-left: 35%; margin-right: 35%;">Текст средней колонки</div><div class="clear"></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>

 

Текст 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 class="tr">
<div id="title1">HTML</div>
<div id="title2">CSS</div></center>
</div>
<div class="tr">
<div id="col1">Текст</div>
<div id="col2">Текст</div>
</div>

 

как разбить текст на 2 колонки
Разбиваем текст на 2 колонки

 

Добавим во всех вхождениях кода #title3 #col3 и разобьем текст на три колонки

 

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

 

<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 class="tr">
<div id="title1">
Текст</div>
<div id="title2">
Текст</div>
<div id="title3">
Текст</div>
</div>
<div class="tr">
<div id="col1">
Текст</div>
<div id="col2">
Teкcт</div>
<div id="col3">
Teкст</div>

 

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

 

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

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

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

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

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

Яндекс.Метрика