Таблицы.

Ступенька 19 - "Горизонтальное и вертикальное выравнивание текста в ячейках таблицы".

Если вам надо выравнять текст в ячейке горизонтально (поставить его по центру или справа, так как слева он становиться по умолчанию), то необходимо воспользоваться атрибутом align, который может принимать значения center и left. Так же можно воспользоваться тэгом <center> </center> для выравнивания текста по центру.

Если необходимо выравнять текст во всей строке, то атрибут align нужно прописать в тэге <tr></tr>. Это выглядит следующим оброзом: <tr align=значение> </tr>, а если нужно выравнять только в одной какой-то ячейке, то атрибут align нужно прописать в тэге<td></td>. Это выглядит так: <td align=значение> </td>.

Выравним по центру весь текст в нашем примере таблицы.

<table>
<tr align=center>
<td height="35" width="55" bgcolor=red> 1x1 </td>
<td width="55" bgcolor=black> 1x2 </td>
<td width="55" bgcolor=red> 1x3 </td>
</tr>
<tr align=center>
<td height="35" bgcolor=black> 2x1 </td>
<td bgcolor=red> 2x2 </td>
<td bgcolor=black> 2x3 </td>
</tr>
</table>

Вертикальное выравнивание задаётся атрибутом valign, который может принимать значения middle, top и bottom (соответственно выравнивать текст по середине, вверху и внизу ячейки).

Расположим текст в нашей таблице следующим образом: в первой ячейке ''1x1'' - вверху, во второй ''1x2'' - по центру, в третьей ''1x3'' - внизу, в четвертой ''2x1'' - внизу, в пятой ''2x2'' - по центру и в шестой ''2x3'' - верху .

<table>
<tr align=center>
<td valign=top height="35" width="55" bgcolor=red> 1x1 </td>
<td width="55" bgcolor=black> 1x2 </td>
<td valign=bottom width="55" bgcolor=red> 1x3 </td>
</tr>
<tr align=center>
<td valign="bottom" height="35" bgcolor=black> 2x1 </td>
<td bgcolor=red> 2x2 </td>
<td valign="top" bgcolor=black> 2x3 </td>
</tr>
</table>

[ Назад: Ступенька 18-ая ] [ Далее: Ступенька 20-ая ]