Выравнивание текста

В работе на дому при создании сайта не редко возникает необходимость выравнивания документа html. В этом разделе мы разберём, как выровнять документ html внутри ячейки.
Существует горизонтальное и вертикальное выравнивание.
Вертикальное выравнивание задаётся атрибутом valign. Для атрибута valign можно задать следующие параметры:

valign=»top»содержимое ячейки будет прижато кверху;
valign=»middle»содержимое ячейки будет расположено по центру;
valign=»bottom»содержимое ячейки будет прижато книзу.

Пропишем эти атрибуты в нашей таблице:

<table border="2" bordercolor="#990066">
<tr>
<td height="50" width="200" valign="top">строчка1 столбец1</td>
<td width="150" valign="bottom">строчка1 столбец2</td>
</tr>
<tr>
<td height="100" width="200" 
valign="middle">строчка 2 столбец1</td>
<td width="150" valign="middle">строчка 2 столбец2</td>
</tr>
<tr>
<td height="50" width="200" 
valign="bottom">строчка 3 столбец1</td>
<td width="150" valign="top">строчка 3 столбец2</td> 
</tr>
</table>

посмотреть результат

Горизонтальное выравнивание задаётся атрибутом align. Для этого атрибута также есть свои параметры. Мы уже с ними знакомились в предыдущих разделах:

align=»left»содержимое ячейки будет прижато к левому краю
ячейки
;
align =»center»содержимое ячейки будет расположено по
центру
. Также можно использовать тэг <center></center>;
align=»right»содержимое ячейки будет прижато к правому краю ячейки.

Теперь вставим все эти атрибуты в нашу таблицу:

<table border="2" bordercolor="#990066">
<tr>
<td height="50" width="200" valign="top" 
align="center">строчка1 столбец1</td>
<td width="150" valign="bottom">
<center>строчка1 столбец2</center></td>
</tr>
<tr>
<td height="100" width="200" valign="middle" 
align="left">строчка 2 столбец1</td>
<td width="150"  valign="middle" 
align="left">строчка 2 столбец2</td>
</tr>
<tr>
<td height="50" width="200" valign="bottom" 
align="right">строчка 3 столбец1</td>
<td width="150" valign="top" 
align="right">строчка 3 столбец2</td> 
</tr>
</table>

посмотреть результат

В следующем разделе мы придадим нашей таблице цветность.

Поделиться в соц. сетях

Выравнивание текста
Выравнивание текста
Выравнивание текста
Выравнивание текста
Выравнивание текста
Выравнивание текста

Оставить комментарий

http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Goon Каталог сайтов Рейтинг@Mail.ru Яндекс.Метрика