дальше зададим высоту и ширину ячейкам нашей таблицы. Для этого предназначены атрибуты «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> |
При просмотре в браузере:
|
Если в ряду вы задаете для какой-либо ячейки высоту большую, чем для других то, не смотря на это, все ячейки вашего ряда станут по высоте равны наибольшей. То же самое с рядами, если вы зададите для какого-то ряда наибольшую длину, то все остальные ряды выровняются по этому, наибольшему ряду.
Вы можете задать высоту и ширину для всей таблицы, тогда все ячейки (столбцы) и ряды поделят данное им пространство поровну.
Теперь нам осталось лишь выровнять содержимое внутри таблицы:
| <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> |
При просмотре в браузере:
|
И так если мы посмотрим внимательно на наш код, мы увидим, что «align», задает горизонтальное выравнивание содержимого ячейки, а «valign» – вертикальное, тэг <center> </center> отвечает за центрирования содержимого ячейки.
valign=»top» – выравнивает содержимое ячейки по верхнему краю, по умолчанию в левом углу.
valign=»bottom» – выравнивает по нижнему краю.
align=»left» — выравнивает по левому краю.
align=»right» — выравнивает по правому краю.
<center> </center> — выравнивают все что в них заключено, по центру.
Если вы хотите выровнять содержимое ячейки по верхнему – правому краю, то нужно указать два атрибута:
<td bgcolor=»red» valign=»top» align=»right»>б-2</td>
