Здравствуйте дорогие читатели и гости Я блоггер. В предыдущей статье мы научились создавать таблицу 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>
Еще один оригинальный способ разбить текст на колонки.
<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>
Добавим во всех вхождениях кода #title3 #col3 и разобьем текст на три колонки
<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>
Будь вместе с Я Блоггер
