УРОК «Как выровнять таблицу и её содержимое по центру/левому/правому краям»
Дорогие друзья!
Очень часто для выполнения замысла представления информации на странице и в таблице, нужно выравнивать саму таблицу или её содержимое по центру страницы или по правому/левому краям. Вообще, по умолчанию, выравнивание настроено по левому краю и если нужно изменить положение содержимого страницы, это нужно задавать явно, с помощью специальных атрибутов тегов.
Чтобы выровнять саму таблицу по центру веб-страницы или внутри блока, в котором она находится, используется атрибут тега table - align="значение" со значением center. Соответственно, если нужно выровнять таблицу по правому краю, то используется значение right, а если по левому - left. Всё просто, посмотрим на примере:
Код
<table align="center" background="http://www.lenagold.ru/fon/ori/nebo/obl/oblako32.jpg" border="2" width="400">
<caption>Заголовок таблицы</caption>
<tr>
<td>Строка 1 Ячейка 1</td>
<td>Строка 1 Ячейка 2</td>
</tr>
<tr>
<td>Строка 2 Ячейка 1</td>
<td>Строка 2 Ячейка 2</td>
</tr>
</table>
Заголовок таблицы
Строка 1 Ячейка 1 |
Строка 1 Ячейка 2 |
Строка 2 Ячейка 1 |
Строка 2 Ячейка 2 |
Теперь посмотрим, как выровнять содержимое ячеек таблицы по горизонтали и вертикали. Для того, чтобы выровнять содержимое строк по горизонтали, используется тот же атрибут align с нужным значением для тега tr, а для ячеек он применяется для тега td, как здесь:
Код
<table align="center" cellpadding="10" cellspacing="0" background="http://www.lenagold.ru/fon/ori/nebo/obl/oblako32.jpg" border="2" width="400">
<caption>Заголовок таблицы</caption>
<tr align="right">
<td>Строка 1 Ячейка 1</td>
<td>Строка 1 Ячейка 2</td>
</tr>
<tr>
<td>Строка 2 Ячейка 1</td>
<td align="center">Строка 2 Ячейка 2</td>
</tr>
</table>
Результат (обратите внимание, что в верхней строке текст выровнен по правому краю, а в нижней правой ячейке - по центру:
Заголовок таблицы
Строка 1 Ячейка 1 |
Строка 1 Ячейка 2 |
Строка 2 Ячейка 1 |
Строка 2 Ячейка 2 |
Чтобы выровнять текст по вертикали, используется атрибут тегов tr и td - valign="значение" со значениями top (по верхнему краю строки), middle (по середине), bottom (по нижнему краю) или baseline (по базовой линии). По умолчанию установлено значение этого атрибута middle. Посмотрим на примере:
Код
<table height="150" align="center" cellpadding="10" cellspacing="0" background="http://www.lenagold.ru/fon/ori/nebo/obl/oblako32.jpg" border="2" width="500">
<caption>Заголовок таблицы</caption>
<tr valign="bottom">
<td>Строка 1 Ячейка 1</td>
<td>Строка 1 Ячейка 2</td>
<td>Строка 1 Ячейка 3</td>
</tr>
<tr>
<td valign="top">Строка 2 Ячейка 1</td>
<td valign="middle">Строка 2 Ячейка 2</td>
<td valign="bottom">Строка 2 Ячейка 3</td>
</tr>
</table>
Результат (для наглядности я увеличила высоту таблицы):
Заголовок таблицы
Строка 1 Ячейка 1 |
Строка 1 Ячейка 2 |
Строка 1 Ячейка 3 |
Строка 2 Ячейка 1 |
Строка 2 Ячейка 2 |
Строка 2 Ячейка 3 |
На этом всё. До встречи в следующем уроке!
Воскресенье 24.11.2024, 00:24:01 
