За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по горизонтали и вертикали, расширяются возможности по управлению положением элементов относительно друг друга. Таблицы позволяют задавать выравнивание рисунков, контента, полей формы и других элементов относительно друг друга и web-страницы в целом. Вообще, выравнивание в основном необходимо для установки зрительной связи между разными элементами, а также их группирования.
Одним из способов показать посетителю направленность и название с нашего сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею с нашего сайта. Изображение также является и ссылкой на остальные разделы с нашего сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно применить таблицей с шириной и высотой равной 100% (пример 1).
Пример 1. Центрирование рисунка
В данном примере выравнивание по горизонтали устанавливается с помощью параметра align="center" тега <TD>, а по вертикали содержимое ячейки можно не центрировать, поскольку это положение задано по умолчанию.
Замечание
Чтобы высота таблицы устанавливалась как 100%, необходимо убрать !DOCTYPE, код при этом перестает быть валидным.
Использование ширины и высоты на всю доступную область web-страницы гарантирует, что содержимое таблицы будет выравниваться строго по центру окна браузера, независимо от его размеров.
За счет сочетания параметров align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега <TD>, допустимо устанавливать несколько видов положений элементов относительно друг друга. На рис. 1 показаны способы выравнивания элементов по горизонтали.
Рис. 1. Выравнивание элементов по горизонтали
просмотрим некоторые примеры выравнивания контента согласно приведенному рисунку.
Для указания выравнивания содержимого ячеек по верхнему краю, для тега <TD> требуется установить параметр valign со значением top (пример 2).
Пример 2. Использование параметра valign
В данном примере характеристики ячеек управляются с помощью параметров тега <TD>, но тоже удобнее изменять через стили. В частности, выравнивание в ячейках указывается атрибутами vertical-align и text-align (пример 3).
Пример 3. Применение стилей для выравнивания
Для сокращения тегов в данном примере используется группирование селекторов, поскольку параметры vertical-align и padding применяются одновременно к двум ячейкам.
Выравнивание по нижнему краю делается аналогично, только вместо аргумента top используется значение bottom.
По умолчанию содержимое ячейки выравнивается по центру их вертикали, поэтому в случае разной высоты колонок требуется задавать выравнивание по верхнему краю. Иногда все-таки нужно оставить исходный способ выравнивания, например, при размещении формул, как показано на рис. 2.
Рис. 2. Добавление формулы в файл
В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правой стороне. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правой стороне (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.
Пример 4. Выравнивание формулы
В данном примере первая ячейка таблицы оставлена пустой, она служит лишь для разработки отступа, который, кстати, может быть установлен и с помощью стилей.
С помощью таблиц удобно определять положение полей формы, особенно, когда они перемежаются с контентом. Один из наборов оформления формы, которая предназначена для ввода комментария, показан на рис. 3.
Рис 3. Расположение полей формы и контента
Чтобы контент возле полей формы был выровнен по правой стороне, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно контент, а в правой контентовые поля (пример 5).
Пример 5. Выравнивание полей формы
В данном примере, для тех ячеек, где требуется задать выравнивание по правой стороне, добавлен параметр align="right". Чтобы надпись «Комментарий» располагалась по верхней границе многострочного контента, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью аргумента valign.
Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru
О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект