1. Главная страница » Уроки HTML » Задаем высоту и ширину таблице и ячейкам, выравниваем содержимое по краям

Задаем высоту и ширину таблице и ячейкам, выравниваем содержимое по краям

Автор: | 21.01.2013

дальше зададим высоту и ширину ячейкам нашей таблицы. Для этого предназначены атрибуты «height» и «width» — вы можете их задать для всей таблицы, для одного ряда или для ячейки. Высота и ширина могут задаваться как в пикселях, так и в процентах. Мы будем задавать ширину и высоту в пикселях.

<table>
<tr>
<td height=»50″ width=»100″ bgcolor=»red»>а-1</td>
<td width=»100″ bgcolor=»green»>а-2</td>
<td width=»100″ bgcolor=»red»>а-3</td>
</tr>
<tr>
<td height=»50″ width=»100″ bgcolor=»green»>б-1</td>
<td width=»100″ bgcolor=»red»>б-2</td>
<td width=»100″ bgcolor=»green»>б-3</td>
</tr>
</table>

При просмотре в браузере:

а-1 а-2 а-3
б-1 б-2 б-3

Если в ряду вы задаете для какой-либо ячейки высоту большую, чем для других то, не смотря на это, все ячейки вашего ряда станут по высоте равны наибольшей. То же самое с рядами, если вы зададите для какого-то ряда наибольшую длину, то все остальные ряды выровняются по этому, наибольшему ряду.

Вы можете задать высоту и ширину для всей таблицы, тогда все ячейки (столбцы) и ряды поделят данное им пространство поровну.

Теперь нам осталось лишь выровнять содержимое внутри таблицы:

<table>
<tr>
<td height=»50″ width=»100″bgcolor=»red»><center>а-1</center></td>
<td width=»100″ bgcolor=»green» align=»left»>а-2</td>
<td width=»100″ bgcolor=»red» valign=»bottom»>а-3</td>
</tr>
<tr>
<td height=»50″ width=»100″ bgcolor=»green» valign=»bottom»><center>б-1</center></td>
<td width=»100″ bgcolor=»red» align=»right»>б-2</td>
<td width=»100″ bgcolor=»green» valign=»top»><center>б-3</center></td>
</tr>
</table>

При просмотре в браузере:

а-1
а-2 а-3
б-1
б-2
б-3

И так если мы посмотрим внимательно на наш код, мы увидим, что «align», задает горизонтальное выравнивание содержимого ячейки, а «valign» – вертикальное, тэг <center> </center> отвечает за центрирования содержимого ячейки.

valign=»top» – выравнивает содержимое ячейки по верхнему краю, по умолчанию в левом углу.
valign=»bottom» – выравнивает по нижнему краю.
align=»left» — выравнивает по левому краю.
align=»right» — выравнивает по правому краю.
<center> </center> — выравнивают все что в них заключено, по центру.

Если вы хотите выровнять содержимое ячейки по верхнему – правому краю, то нужно указать два атрибута:

<td bgcolor=»red» valign=»top» align=»right»>б-2</td>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 

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

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

*

code