Выравнивание текста в таблицах
Внутри таблиц действуют все теги форматирования текста и шрифтов. В качестве примера
возьмем таблицу из прошлого урока и добавим в нее теги форматирования текста.
|
<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 |
|