Выравнивание содержимого ячеек в таблице.

Уроки HTML для начинающих.
Таблица HTML (урокN4)

И так в этом уроке (N4) мы с Вами разберём ещё 2 атрибута таблицы ALİGN и VALİGN

выравнивание	ALİGN	Выравнивает содержимое ячеек в таблице, принимает значения: left, center, или right.
выравнивание	VALİGN	Устанавливает вертикальное выравнивание содержимого ячеек таблицы, принимает значения : top, middle, или bottom.

И так,начнём с вертикального выравнивания содержимого таблицы, т.е. как можно сделать так, чтобы содержимое ячейки не только располагалось ровно посередине ее (как по умолчанию), а еще вверху или внизу.
VALİGN="TOP" -содержимое ячейки выравнивается по верхнему краю
VALİGN="MİDDLE" -содержимое выравнивается по середине ячейки
VALİGN="BOTTOM" -содержимое ячейки выравнивается по нижнему краю

<table border="5">
<tr> 
<td height="35" width="70" valign="top"> ячейка 1</td> 
<td height="35" width="70" valign="middle"> ячейка 2</td> 
<td height="35" width="70" valign="bottom"> ячейка 3</td> 
</tr>
<tr> 
<td height="35" width="70" valign="bottom"> ячейка 4</td> 
<td height="35" width="70" valign="middle"> ячейка 5</td> 
<td height="35" width="70" valign="top"> ячейка 6</td> 
</tr>
</table>

Я добавила ширину и высоту,это Вы уже умеете мы проходили - Таблица HTML (урокN2) ЗДЕСЬ и вот что у нас получилось:

ячейка 1	ячейка 2	ячейка 3
ячейка 4	ячейка 5	ячейка 6

---

Теперь мы с Вами разберём атрибут ALİGN горизонтальное выравнивания содержимого таблицы, т.е. как можно сделать так, чтобы содержимое было выровнено ровно посередине, а так же по левому краю или по правому краю.
ALİGN="LEFT" -содержимое ячейки выравнивается по левому краю
ALİGN="CENTER" -содержимое ячейки выравнивается по центру
ALİGN="RİGHT" -содержимое ячейки выравнивается по правому краю

<table border="5">
<tr> 
<td height="35" width="150" align="left"> ячейка 1</td> 
<td height="35" width="150" align="center"> ячейка 2</td> 
<td height="35" width="150" align="right"> ячейка 3</td> 
</tr>
<tr> 
<td height="35" width="150" align="right"> ячейка 4</td> 
<td height="35" width="150" align="center"> ячейка 5</td> 
<td height="35" width="150" align="left"> ячейка 6</td> 
</tr>
</table>

И в этом примере я добавила ширину и высоту,что бы Вам было понятнее))И вот что у нас получилось:

ячейка 1	ячейка 2	ячейка 3
ячейка 4	ячейка 5	ячейка 6

---

На этом урок заканчивается))Что не понятно пишите,будем разбираться вместе.

• Атрибуты таблицы. ЗДЕСЬ.
• Все цвета интернета ЗДЕСЬ
• Подобрать HTML код в ручную ЗДЕСЬ




Понравился пост - добавь в закладки, чтобы не потерять:

Похожие по тематике посты - еще почитать:

.