Выравнивание элементов
За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по горизонтали и вертикали, расширяются возможности по управлению положением элементов относительно друг друга. Таблицы позволяют задавать выравнивание рисунков, контента, полей формы и других элементов относительно друг друга и web-страницы в целом. Вообще, выравнивание в основном необходимо для установки зрительной связи между разными элементами, а также их группирования.
Центрирование по вертикали
Одним из способов показать посетителю направленность и название с нашего сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею с нашего сайта. Изображение также является и ссылкой на остальные разделы с нашего сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно применить таблицей с шириной и высотой равной 100% (пример 1).
Пример 1. Центрирование рисунка
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Выравнивание</title>
<style type="text/CSS (ЦСС)">
TABLE {
width: 100%; /* Ширина таблицы */
height: 100%; /* Высота таблицы */
}
</style>
</head>
<body>
<table>
<tr>
<td align="center">
<img src="title.gif" width="414" height="100" alt="FAQ ШТМЛ">
</td>
</tr>
</table>
</html>
</body>
В данном примере выравнивание по горизонтали устанавливается с помощью параметра align="center" тега <TD>, а по вертикали содержимое ячейки можно не центрировать, поскольку это положение задано по умолчанию.
Замечание
Чтобы высота таблицы устанавливалась как 100%, необходимо убрать !DOCTYPE, код при этом перестает быть валидным.
Использование ширины и высоты на всю доступную область web-страницы гарантирует, что содержимое таблицы будет выравниваться строго по центру окна браузера, независимо от его размеров.
Выравнивание по горизонтали
За счет сочетания параметров align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега <TD>, допустимо устанавливать несколько видов положений элементов относительно друг друга. На рис. 1 показаны способы выравнивания элементов по горизонтали.
Рис. 1. Выравнивание элементов по горизонтали
просмотрим некоторые примеры выравнивания контента согласно приведенному рисунку.
Выравнивание по верхнему краю
Для указания выравнивания содержимого ячеек по верхнему краю, для тега <TD> требуется установить параметр valign со значением top (пример 2).
Пример 2. Использование параметра valign
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Выравнивание</title>
</head>
<body>
<table width="100%" cellpadding="5">
<tr>
<td valign="top" width="75%" bgcolor="#f0f0f0">Колонка 1</td>
<td valign="top" width="25%" bgcolor="#ffcc00">Колонка 2</td>
</tr>
</table>
</body>
</html>
В данном примере характеристики ячеек управляются с помощью параметров тега <TD>, но тоже удобнее изменять через стили. В частности, выравнивание в ячейках указывается атрибутами vertical-align и text-align (пример 3).
Пример 3. Применение стилей для выравнивания
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Выравнивание</title>
<style type="text/CSS (ЦСС)">
TABLE {
width: 100%; /* Ширина таблицы */
}
#col1 {
width: 75%; /* Ширина первой колонки */
background: #f0f0f0; /* Цвет фона первой колонки */
}
#col2 {
width: 25%; /* Ширина второй колонки */
background: #fc5; /* Цвет фона второй колонки */
text-align: right; /* Выравнивание по правой стороне */
}
#col1, #col2 {
vertical-align: top; /* Выравнивание по верхнему краю */
padding: 5px; /* Поля вокруг содержимого ячеек */
}
</style>
</head>
<body>
<table>
<tr>
<td id="col1">Колонка 1</td>
<td id="col2">Колонка 2</td>
</tr>
</table>
</body>
</html>
Для сокращения тегов в данном примере используется группирование селекторов, поскольку параметры vertical-align и padding применяются одновременно к двум ячейкам.
Выравнивание по нижнему краю делается аналогично, только вместо аргумента top используется значение bottom.
Выравнивание по центру
По умолчанию содержимое ячейки выравнивается по центру их вертикали, поэтому в случае разной высоты колонок требуется задавать выравнивание по верхнему краю. Иногда все-таки нужно оставить исходный способ выравнивания, например, при размещении формул, как показано на рис. 2.
Рис. 2. Добавление формулы в файл
В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правой стороне. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правой стороне (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.
Пример 4. Выравнивание формулы
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Выравнивание</title>
</head>
<body>
<table width="100%">
<tr>
<td width="100"></td>
<td align="center"><img src="formula.gif" width="289" height="158" alt="Формула 18.6"></td>
<td width="100" align="right">(18.6)</td>
</tr>
</table>
</body>
</html>
В данном примере первая ячейка таблицы оставлена пустой, она служит лишь для разработки отступа, который, кстати, может быть установлен и с помощью стилей.
Выравнивание элементов формы
С помощью таблиц удобно определять положение полей формы, особенно, когда они перемежаются с контентом. Один из наборов оформления формы, которая предназначена для ввода комментария, показан на рис. 3.
Рис 3. Расположение полей формы и контента
Чтобы контент возле полей формы был выровнен по правой стороне, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно контент, а в правой контентовые поля (пример 5).
Пример 5. Выравнивание полей формы
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Выравнивание</title>
</head>
<body>
<form method="post" action="handler.cgi" name="comment">
<table width="100%" cellspacing="0" cellpadding="4">
<tr>
<td align="right" width="100">Имя</td>
<td><input type="text" name="nickname" maxlength="50" size="20"></td>
</tr>
<tr>
<td align="right">E-mail</td>
<td><input type="text" name="email" maxlength="50" size="20"></td>
</tr>
<tr>
<td align="right" valign="top">Комментарий</td>
<td><textarea name="text" cols="35" rows="10"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="добавляем комментарий"></td>
</tr>
</table>
</form>
</body>
</html>
В данном примере, для тех ячеек, где требуется задать выравнивание по правой стороне, добавлен параметр align="right". Чтобы надпись «Комментарий» располагалась по верхней границе многострочного контента, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью аргумента valign.
| Статья опубликована: 22.12.2009 | Последнее обновление: 30.04.2009 |