или свойства HTML таблицы и ячеек на примерах
Продолжаем изучать HTML таблицы . Текущий урок научит вас устанавливать размер таблицы , выравнивать по вертикали и по горизонтали ее содержимое, точнее содержимое ячеек. Также вы узнаете как определить заголовк HTML таблицы .
Навигация по странице
HTML высота ячеек и их ширина, размер определяется следующими атрибутами:
Были установлены размеры первой ячейки из первого ряда. В итоге вторая ячейка, этого же ряда унаследовала высоту первой, а первая ячейка, второгo ряда — ее ширину (ширину первой ячейки, первого ряда). Такова особенность взаимодействия элементов HTML таблицы .
HTML выравнивание внутри таблицы. Текст слева, справа, по центру ячеек таблицы :
Результат:
Результат:
Результат:
Теги
Горизонтальное расположение HTML таблицы внутри web-страницы:
|
В примере выше показаны три отдельные таблицы , каждая из которых состоит из одной ячейки. bgcolor - HTML атрибут - определяет цвет фона. В предыдущем уроке мы использовали его CSS аналог - background-color .
|
|
Внутри второй ячейки находится еще одна таблица со своими атрибутами, значениями и стилями.
Размеры и фон внутренней таблицы , в отличае от внешней, заданы с помошью CSS .
Влад Мержевич
За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по горизонтали и вертикали, расширяются возможности по управлению положением элементов относительно друг друга. Таблицы позволяют задавать выравнивание изображений, текста, полей формы и других элементов относительно друг друга и веб-страницы в целом. Вообще, выравнивание в основном необходимо для установки зрительной связи между разными элементами, а также их группирования.
Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).
Пример 1. Центрирование рисунка
|
В данном примере выравнивание по горизонтали устанавливается с помощью параметра align="center" тега
Чтобы высота таблицы устанавливалась как 100%, необходимо убрать , код при этом перестает быть валидным.
Использование ширины и высоты на всю доступную область веб-страницы гарантирует, что содержимое таблицы будет выравниваться строго по центру окна браузера, независимо от его размеров.
За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега
Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.
Для указания выравнивания содержимого ячеек по верхнему краю, для тега
Пример 2. Использование valign
| Колонка 1 | Колонка 2 |
В данном примере характеристики ячеек управляются с помощью параметров тега
Пример 3. Применение стилей для выравнивания
| Колонка 1 | Колонка 2 |
Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.
Выравнивание по нижнему краю делается аналогично, только вместо значения top используется bottom .
По умолчанию содержимое ячейки выравнивается по центру их вертикали, поэтому в случае разной высоты колонок требуется задавать выравнивание по верхнему краю. Иногда все-таки нужно оставить исходный способ выравнивания, например, при размещении формул, как показано на рис. 2.
В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.
Пример 4. Выравнивание формулы
 |
(18.6) |
В данном примере первая ячейка таблицы оставлена пустой, она служит лишь для создания отступа, который, кстати, может быть установлен и с помощью стилей.
С помощью таблиц удобно определять положение полей формы, особенно, когда они перемежаются с текстом. Один из вариантов оформления формы, которая предназначена для ввода комментария, показан на рис. 3.
Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).
Пример 5. Выравнивание полей формы
В данном примере, для тех ячеек, где требуется задать выравнивание по правому краю, добавлен атрибут align="right" . Чтобы надпись «Комментарий» располагалась по верхней границе многострочного текста, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью атрибута valign .
Таблицы часто применяются для разработки многоколонного макета. Каждая ячейка выступает в роли колонки, при этом высота всех колонок будет одинакова, поскольку ячейки взаимосвязаны. По умолчанию содержимое ячеек выравнивается по центру вертикали, что не всегда удобно, особенно если содержимое близлежащих ячеек различается по объему. При этом получится, что в одной колонке контент начинается от верхнего края, а в другой по середине. Исправить это положение можно с помощью параметра valign="top" тега
Пример 1. Использование параметра valign
| Углерод |
С помощью стилей удобнее управлять положением содержимого в ячейках. Для этого следует применить параметром vertical-align со значением top , добавляя его к селектору TD , как показано в примере 2.
Пример 2. Применение стилей
| Углерод | Встречается в природе в трех видах: угля, графита и алмаза. Образует большое число соединений. Углерод является непременным компонентом любого органического вещества. |
В данном примере все параметры таблицы и ячеек задаются через стили. Результат примера показан на рис. 1.
Рис. 1. Таблица с выравниванием содержимого ячеек по верхнему краю
Для задания выравнивания таблицы по центру web-страницы или по одному из ее краев предназначен параметр align тега
Содержимое таблицы |
Результат данного примера показан на рис. 1.
Рис. 1. Выравнивание таблицы по центру
На самом деле align
не только устанавливает выравнивание,
но и заставляет контент обтекать таблицу с других сторон аналогично поведению
тега
. Но поскольку
Содержимое таблицы |
Обтекающий таблицу контент...
Результат данного примера показан на рис. 2.
Рис. 2. Выравнивание таблицы по правой стороне
В текущем примере создается таблица с фоном серого цвета и выравниванием по правой стороне. Для разработки отступов от таблицы до контента используется параметр margin со значением 10 пикселов.
Чтобы запретить обтекание таблицы при ее выравнивании по одному из краев проще
всего добавляем после таблицы тег
с заданным
стилем clear: both
. Эта команда запрещает
обтекание, как с левого, так и с правого края (пример 3).
Пример 3. Отмена обтекания таблицы
Содержимое таблицы |
контент...
Выравнивание таблицы по центру делается аналогично, через параметр align="center" тега
Это приводит к тому, что отступы таблицы вычисляются автоматически. После этого таблица будет находиться по центру страницы.
Не менее часто требуется выровнять данные по центру ячейки. При этом существует три способа: горизонтальный, вертикальный и абсолютный. Из их названия понятно, по какой оси будет происходить центрирование. В любом случае используется тег
| Текст по центру ячейки |
Если вы хотите сделать такое форматирование стандартным для всего сайта или страницы (чтобы не переписывать каждую таблицу), то следует использовать CSS-стили. Для этого допишите следующий код внутри тега
:
С помощью этого способа также можно задать выравнивание как для конкретной ячейки, так и для столбца, строки или всей таблицы в целом. Как можно заметить, любой из способов весьма прост.
