Выравнивание текста в таблицах

Внутри таблиц действуют все теги форматирования текста и шрифтов. В качестве примера возьмем таблицу из прошлого урока и добавим в нее теги форматирования текста.

  <table border="3" width="400" height="200">
<tr bgcolor="#CCCCFF" align="center">
<td> 1х1 </td>
<td> 1х2 </td>
<td> 1х3 </td>
</tr>
<tr>
<td bgcolor="#CCFFCC"> <div align="Center"> 2х1 </div> </td>
<td> <p align="Center"> 2х2 </p> </td>
<td bgcolor="#FFCCFF"> <div align="Center"> 2х3 </div> </td>
</tr>
<tr>
<td bgcolor="#FFCCFF"> <center> 3х1 </center> </td>
<td> <center> 3х2 </center> </td>
<td bgcolor="#CCFFCC"> <center> 3х3 </center> </td>
</tr>
<tr bgcolor="#00FFFF">
<td align="center"> 4х1 </td>
<td align="center"> 4х2 </td>
<td align="center"> 4х3 </td>
</tr>
</table>

В окне браузера таблица будет выглядеть так:

1х1 1х2 1х3
2х1

2х2
2х3
3х1
3х2
3х3
4х1 4х2 4х3

Как видите кроме тега <center> также можно прописать атрибут align для ячеек <td> или для целого ряда ячеек <tr> таблицы .
Атрибут align может принимать еще значения right и left. То есть содержимое ячейки будет выровнено по правому краю или по левому соответственно.
Значение justify при употреблении с тэгами <td>, <tr>, <table>, атрибут align принимать не может.
Также для форматирования содержимого внутри ячеек можно при помощи тегов <p> и <div>
Все это видно из выше изложенного примера, я задал центрирование текста внутри таблицы разными способами, а результат получился одинаковый для всех строк и столбцов данной таблицы.
По умолчанию таблица целиком выравнивается по левому краю, для изменения положения таблицы в окне браузера для тега <table> прописывается атрибут align которому можно присвоить значения: center, right и left.

  <table border="3" width="400" height="200" align="center">
<tr bgcolor="#CCCCFF" align="center">
<td> 1х1 </td>
<td> 1х2 </td>
<td> 1х3 </td>
</tr>
<tr>
<td bgcolor="#CCFFCC"> <div align="Center"> 2х1 </div> </td>
<td> <p align="Center"> 2х2 </p> </td>
<td bgcolor="#FFCCFF"> <div align="Center"> 2х3 </div> </td>
</tr>
<tr>
<td bgcolor="#FFCCFF"> <center> 3х1 </center> </td>
<td> <center> 3х2 </center> </td>
<td bgcolor="#CCFFCC"> <center> 3х3 </center> </td>
</tr>
<tr bgcolor="#00FFFF">
<td align="center"> 4х1 </td>
<td align="center"> 4х2 </td>
<td align="center"> 4х3 </td>
</tr>
</table>

В итоге таблица будет выровнена по центру.

1х1 1х2 1х3
2х1

2х2

2х3
3х1
3х2
3х3
4х1 4х2 4х3

Выровнять содержимое внутри таблицы можно не только по горизонтали, но и по вертикали при помощи атрибута valign может принимать значения:

  • middle - содержимое будет находится в середине.
  • top - содержимое будет находится вверху ячейки.
  • bottom - содержимое будет находится внизу ячейки.

Атрибут valign может прописываться для тегов <td> - для одной ячейки, <tr> - для ряда ячеек и <table> - для таблицы в целом.

  <table border="3" width="400" height="200" align="center">
<tr bgcolor="#CCCCFF" align="center">
<td valign="bottom"> 1х1 </td>
<td valign="top"> 1х2 </td>
<td valign="bottom"> 1х3 </td>
</tr>
<tr>
<td bgcolor="#CCFFCC" valign="top"> <div align="Center"> 2х1 </div> </td>
<td> <p align="Center"> 2х2 </p> </td>
<td bgcolor="#FFCCFF" valign="top"> <div align="Center"> 2х3 </div> </td>
</tr>
<tr>
<td bgcolor="#FFCCFF" valign="bottom"> <center> 3х1 </center> </td>
<td> <center> 3х2 </center> </td>
<td bgcolor="#CCFFCC" valign="bottom"> <center> 3х3 </center> </td>
</tr>
<tr bgcolor="#00FFFF" valign="bottom">
<td align="center"> 4х1 </td>
<td align="center"> 4х2 </td>
<td align="center"> 4х3 </td>
</tr>
</table>

В окне браузера таблица или вернее сказать содержимое таблицы будет выглядеть так:

1х1 1х2 1х3
2х1

2х2

2х3
3х1
3х2
3х3
4х1 4х2 4х3


Вернуться назад Перейти к следующей странице
2009 - 2021г. andron09_73@mail.ru
  жми ремонт комнаты