Центрирование таблицы html. Выравнивание элементов
Влад Мержевич
За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по
горизонтали и вертикали, расширяются возможности по управлению положением элементов
относительно друг друга. Таблицы позволяют задавать выравнивание изображений,
текста, полей формы и других элементов относительно друг друга и веб-страницы
в целом. Вообще, выравнивание в основном необходимо для установки зрительной
связи между разными элементами, а также их группирования.
Центрирование по вертикали
Одним из способов показать посетителю направленность и название сайта является
использование сплэш-страницы. Это первая страница, на которой, как правило,
расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение
также является и ссылкой на остальные разделы сайта. Требуется поместить этот
рисунок по центру окна браузера вне зависимости от разрешения монитора. Для
этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).
Пример 1. Центрирование рисунка
Выравнивание
В данном примере выравнивание по горизонтали устанавливается с помощью параметра
align="center"
тега
,
а по вертикали содержимое ячейки можно не центрировать, поскольку это положение
задано по умолчанию.
Чтобы высота таблицы устанавливалась как 100%, необходимо убрать
, код при этом перестает быть валидным.
Использование ширины и высоты на всю доступную область веб-страницы гарантирует,
что содержимое таблицы будет выравниваться строго по центру окна браузера, независимо
от его размеров.
Выравнивание по горизонтали
За счет сочетания атрибутов align
(горизонтальное
выравнивание) и valign
(вертикальное выравнивание)
тега
, допустимо устанавливать несколько
видов положений элементов относительно друг друга. На рис. 1 показаны способы
выравнивания элементов по горизонтали.
Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.
Выравнивание по верхнему краю
Для указания выравнивания содержимого ячеек по верхнему краю, для тега
требуется установить атрибут valign
со значением
top
(пример 2).
Пример 2. Использование valign
Выравнивание
Колонка 1
Колонка 2
В данном примере характеристики ячеек управляются с помощью параметров тега
, но тоже удобнее изменять через стили.
В частности, выравнивание в ячейках указывается свойствами vertical-align
и text-align
(пример 3).
Пример 3. Применение стилей для выравнивания
Выравнивание
Колонка 1
Колонка 2
Для сокращения кода в данном примере используется группирование селекторов,
поскольку свойства vertical-align
и padding
применяются одновременно к двум ячейкам.
Выравнивание по нижнему краю делается аналогично, только вместо значения top
используется bottom
.
Выравнивание по центру
По умолчанию содержимое ячейки выравнивается по центру их вертикали, поэтому
в случае разной высоты колонок требуется задавать выравнивание по верхнему краю.
Иногда все-таки нужно оставить исходный способ выравнивания, например, при размещении
формул, как показано на рис. 2.
В подобном случае формула располагается строго по центру окна браузера, а ее
номер — по правому краю. Для такого размещения элементов понадобится
таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в
средней ячейке выравнивание делается по центру, а в правой — по правому
краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить
позиционирование формулы по центру.
Пример 4. Выравнивание формулы
Выравнивание
(18.6)
В данном примере первая ячейка таблицы оставлена пустой, она служит лишь для
создания отступа, который, кстати, может быть установлен и с помощью стилей.
Выравнивание элементов формы
С помощью таблиц удобно определять положение полей формы, особенно, когда они
перемежаются с текстом. Один из вариантов оформления формы, которая предназначена
для ввода комментария, показан на рис. 3.
Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы
формы — по левому, потребуется таблица с невидимой границей и двумя
колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые
поля (пример 5).
Пример 5. Выравнивание полей формы
Выравнивание
В данном примере, для тех ячеек, где требуется задать выравнивание по правому
краю, добавлен атрибут align="right"
.
Чтобы надпись «Комментарий» располагалась по верхней границе многострочного
текста, для соответствующей ячейки устанавливается выравнивание по верхнему
краю с помощью атрибута valign
.
информирует браузер о завершении таблицы.
Любая таблица состоит из столбцов и строк.
Тег
создает строку, а тег
ячейку в строке. Соответственно сколько ячеек включено в строку, столько будет и столбцов в таблице.
Тег
также создает ячейку. Его отличие от тега
в том, что ячейка созданная тегом
является ячейкой - заголовком: ее содержимое располагается по центру, а если это текст, то браузер отображает его жирным шрифтом.
Содержимое ячейки, созданной тегом
по умолчанию располагается в ее левой чаcти.
Тег
создает заголовок таблицы, он располагается внутри тега
- сразу после открывающего тега. Заголовок по умолчанию располагается над таблицей и выравнивается по ее центру.
Для выравнивания таблицы используется атрибут align
тега
.
При помощи атрибут align
Вы можете разместить таблицу в левой или правой (align=
"left"
и align=
"right"
) части окна браузера (родительского элемента
) или по его центру (align=
"center"
).
Выравнивание содержимого строк (тег
) и ячеек (тег
) по горизонтали также осуществляется при помощи атрибута align
, а по вертикали при помощи атрибута valign
:
Атрибут align
принимает значения left
, right
, center
и justify
, которые задают выравнивание содержимого строк и ячеек по их левому, правому краю, по центру и по ширине соответственно;
Атрибут valign
, принимающий значения top
, bottom
и middle
, задает выравнивание содержимого строк и ячеек по их верхнему, нижнему краю и по середине соответственно.
Атрибут align
служит также для выравнивания заголовка (тег
) по горизонтали и определения его расположения - над таблицей или под ней.
По умолчанию содержимое ячеек расположено по левому краю по горизонтали, и выравнено по середине в вертикальной плоскости.
Высота и ширина таблицы и ячеек
По умолчанию размеры (высота и ширина
) и таблицы, и ячеек меняются в зависимости от размеров их содержимого.
Но высоту и ширину как таблицы, так и отдельных ее ячеек можно задать явно - при помощи атрибутов hieght
и width
соответственно.
Тег
, создающий строку таблицы не имеет атрибутов hieght
и width
. Высота строки соответствует высоте ячеек, расположенных в ней. А ширина строки равна ширине таблицы.
Значения высоты и ширины задаются в пикселях или в процентах относительно свободного пространства. Для задания значений:
Указывается целое положительное число. В этом случае размер будет задан в пикселях;
Указывается целое положительное число с символом %.
Если содержимое таблицы или ячейки превышает заданные размеры - они будут проигнорированы браузером, а новые размеры автоматически подобраны в соответствии с размерами содержимого.
>
Как видно из примера: указывая ширину одной из ячеек столбца, Вы тем самым задаете ширину всего столбца; и, указывая высоту одной из ячеек строки, Вы задаете высоту всей строки.
Границы таблицы и ячеек
Таблица и каждая ее ячейка имеют свои собственные границы, которые по умолчанию не видны.
Атрибут border
тега
позволяет сделать границы видимыми и задать их толщину. При этом будут отображены границы и вокруг таблицы и вокруг каждой ячейки.
Толщина границы (или рамки
) задается в пикселях. В качестве значения атрибута border
указывается целое положительное число. Если атрибут border
указан без значения, толщина рамки составит 1 пиксель.
Толщина границы задается только для таблицы. Толщина рамки вокруг ячеек всегда составляет 1 пиксель (либо отсутствует
).
По умолчанию граница отображается с эффектом трехмерности и имеет черный цвет.
Атрибут bordercolor
задает цвет границы и устраняет эффект трехмерности. Атрибут может использоваться для задания цвета границы таблицы (тег
), строки (тег
) или ячейки (тег
).
Атрибут bordercolor
поддерживается не всеми браузерами и поэтому не рекомендуется его использовать. Для задания цвета границы лучше воспользоваться стилями (это уже в CSS
).
Атрибут border не указан.
Поэтому границы отсутствуют.
Толщина границы таблицы составляет 3 пикселя.
Ячейки имеют границы толщиной 1 пиксель!
Частичное отображение границ
Граница таблицы и рамка вокруг ячеек могут быть отображены частично.
Атрибут frame
тега
указывает, где рисовать границу таблицы. Атрибут rules
указывает, как отобразить границы ячеек.
"500px"
frame=
"hsides"
rules=
"cols"
>
Установлены
горизонтальные
границы таблицы
И
отображены границы
между колонками
Отступы внутри и снаружи ячеек
При форматировании таблиц в HTML, для наглядного представления некоторой информации и удобного ее восприятия, может оказаться полезным использование отступов внутри и снаружи ячеек.
Внутренние отступы - от границ ячеек до их содержимого, задаются атрибутом cellpadding
тега
.
Внешние отступы - расстояние между границами соседних ячеек и расстояние от границ ячеек до границы таблицы, задаются атрибутом cellspacing
тега
.
В качестве значений атрибутов указываются целые положительные числа, которые задают расстояние в пикселях.
Расстояние от содержимого ячеек
до их границ составляет 10 пикселей
Расстояние между ячейками и от ячеек
до границы таблицы составляет 25 пикселей
Объединение ячеек
При оформлении и форматировании таблиц в HTML нередко требуется объединить рядом расположенные ячейки. И если такая необходимость возникла, то Вам следует воспользоваться атрибутами colspan
и rowspan
тега
.
Атрибут colspan
указывает количество ячеек, которые будут объединены по горизонтали, а атрибут rowspan
устанавливает количество ячеек, объединяемых по вертикали.
Оба атрибута имеют смысл, если таблица состоит из нескольких строк.
1
2
3
4
1
2
3
4
Фон таблицы. Фон ячеек таблицы
В HTML есть возможность задать общий фон как для всей таблицы, так и фон для отдельно выделенной ячейки.
Атрибут background
тега
задает изображение, которое будет фоновым рисунком таблицы. В качестве значения атрибута указывается адрес файла с изображением - абсолютный или относительный путь к файлу ().
Атрибут bgcolor
тега
задает цвет фона таблицы. Цвет можно задать двумя способами ()
При помощи этих же атрибутов задают фоновый рисунок и цвет фона для любой ячейки таблицы (тег
).
Темно-розовый - цвет фона таблицы.
Фоновый рисунок отдельной ячейки - небо!
Напомним также о существовании атрибута cols
тега
, который указывает браузеру количество столбцов в таблице.
Использование атрибута cols
позволяет браузеру быстрее отобразить содержимое таблицы.
Редактирование таблицы
В этом разделе, рассмотрим теги, которые применяют при редактировании сразу нескольких элементов таблицы. Эти теги можно разделить на две группы.
К первой группе относятся теги
и
. Они практически идентичны и служат для задания некоторых свойств и изменения характеристик одной или нескольких колонок таблицы.
Один из этих тегов располагают сразу после тега
. Допустим это тег
.
При помощи атрибута span
тега
указывают количество колонок, к которым будут применены атрибуты align
, valign
или width
(выравнивание содержимого ячеек колонок по горизонтали, вертикали или задание ширины колонок
).
Если атрибут span
в теге
отсутствует, то будут изменены характеристики одной - первой колонки таблицы. При втором использовании тега
задаются свойства для следующих (следующей - если атрибут span
отсутствует
) колонок таблицы и т.д.
"2"
width=
"70px"
>
1
2
3
4
5
1
2
3
4
5
Ко второй группе тегов относятся также практически идентичные между собой теги
,
и
.
Любой из них можно применить для изменения некоторых свойств одной или нескольких строк таблицы: это опять же выравнивание содержимого ячеек в строках по горизонтали и по вертикали - при помощи атрибутов align
и valign
соответственно; и задание фонового цвета ячеек при помощи атрибута bgcolor
.
При использовании этих тегов следует знать несколько нюансов, которые как раз и определяют различия между ними.
Теги
и
должны быть расположены перед тегом
, сразу после открывающего таблицу тега
. Строки, помещенные в тег
представлены вверху таблицы, а строки заключенные в тег
будут расположены внизу таблицы. Оба тега могут быть применены только один раз в пределах одной таблицы.
Тег
допускается использовать несколько раз внутри тега
.
1
2
3
4
5
6
7
8
"right"
bgcolor=
"#00FF33"
>
9
10
1
2
3
4
5
6
7
8
9
10
Как выровнять содержимое ячеек таблицы по верхнему краю?
Таблицы часто применяются для разработки многоколонного макета. Каждая ячейка выступает в роли колонки, при этом высота всех колонок будет одинакова, поскольку ячейки взаимосвязаны. По умолчанию содержимое ячеек выравнивается по центру вертикали, что не всегда удобно, особенно если содержимое близлежащих ячеек различается по объему. При этом получится, что в одной колонке контент начинается от верхнего края, а в другой по середине. Исправить это положение можно с помощью параметра valign="top"
тега
. В примере 1 показано, как выравнивать по верхнему краю ячейки за счет атрибута valign
.
Пример 1. Использование параметра valign
Углерод
С помощью стилей удобнее управлять положением содержимого в ячейках. Для этого следует применить параметром vertical-align
со значением top
, добавляя его к селектору TD
, как показано в примере 2.
Пример 2. Применение стилей
Выравнивание содержимого ячеек
Углерод
Встречается в природе в трех видах: угля, графита и алмаза. Образует большое число соединений. Углерод является непременным компонентом любого органического вещества.
В данном примере все параметры таблицы и ячеек задаются через стили. Результат примера показан на рис. 1.
Рис. 1. Таблица с выравниванием содержимого ячеек по верхнему краю
Поговорим о том, как выровнять текст в таблице HTML в горизонтальном и в вертикальном направлениях.
Для того, чтобы выровнять по горизонтали следует использовать CSS-свойство text-align
. Ему присущи такие значения, как left
, center
и right
.
Чтобы выровнять по вертикали необходимо применять CSS-свойство vertical-align
. Ему, в свою очередь, характерны такие значения, как top
, middle
и bottom
.
Справедливости ради стоит отметить, что каждое из данных свойств имеет куда больше значений, чем мы перечислили. Но поскольку мы рассматриваем свойства в контексте выравнивания содержимого ячеек, то значения актуальны лишь эти.
На практике выравнивание содержимого ячеек выглядит вот так:
Результат в браузере для таблицы, которую мы создали в прошлом уроке:
Таким образом весь текст в ячейках прижался к правому нижнему углу.
Как выровнять текст в ячейке таблицы HTML
Если Вас интересует как выровнять текст в ячейке таблицы и эта ячейка конкретная, нужно задать свойство только для этой ячейки. Например, с помощью атрибута class
. В таблице присваиваете ячейке класс:
Содержимое
ячеек может быть выровнено по левому
краю, по правому краю или по центру. На
новом рабочем листе все ячейки имеют
формат Обычный
,
в котором числа, даты и время выравниваются
по правому краю ячейки, текст – по
левому, а логические значения ИСТИНА
и ЛОЖЬ
– центрируются. Изменение выравнивания
не влияет на тип данных. Для выравнивания
содержимого ячеек необходимо:
выделить ячейки,
которые следует отформатировать;
в менюФормат
выбрать команду Ячейки
;
выбрать
вкладыш Выравнивание
(рис.22);
в поле
списка по
горизонтали
выбирается тип выравнивания по
горизонтали:
по
значению
– выравнивание по умолчанию в зависимости
от типа данных;
по
левому краю (отступ)
– содержимое ячейки выравнивается по
левому краю с отступом, указанным в поле
справа;
по
центру
– содержимое ячейки центрируется;
по
правому краю
– содержимое ячейки выравнивается по
правому краю;
с
заполнением
–
содержимое выделенного диапазона
заполняется символами, указанными в
левой ячейке выбранного диапазона;
по
ширине
– содержимое ячейки разбивается на
несколько строк, а пробелы между словами
устанавливаются так, чтобы ширина строк
соответствовала ширине ячейки;
по
центру выделения
– содержимое левой ячейки выделенного
диапазона выравнивается по центру
диапазона (все другие ячейки выделенного
диапазона должны быть пустыми);
в поле
списка по
вертикали
выбирается тип выравнивания по вертикали:
по
верхнему краю
– содержимое ячейки выравнивается по
верхнему краю;
по
центру
– по центру;
по
нижнему краю
– по нижнему краю;
по
высоте
– содержимое ячейки разбивается на
несколько строк, первая и последняя
строки выравниваются по верхней и нижней
границе ячейки;
в группе
флажков Отображение
можно включить следующие режимы:
переносить
по словам
– по достижению правой границы ячейки
текст будет переноситься на новую
строку;
автоподбор
ширины
– размер символов уменьшается так, что
содержимое ячейки помещается в границах
ячейки;
объединение
ячеек
– выделенные ячейки объединяются в
одну;
в рамке
Ориентация
выбирается направление расположения
текста в ячейке – текст можно расположить
вертикально или под углом.
Для
быстрого выравнивания данных в ячейках
используются кнопки
.
Чтобы
выровнять текст по центру нескольких
столбцов, необходимо:
Установление шрифта
Для установления
шрифта необходимо:
выделить группу
ячеек;
в меню
Формат
выбрать команду Ячейки
;
выбрать
вкладыш Шрифт
(рис.23);
в списке
Шрифт
выбирается тип шрифта;
в поле
Начертание
выбирается начертание шрифта:
обычный – обычное
начертание;
курсив
– курсивное начертание
;
полужирный
– жирное
начертание
;
полужирный
курсив
– жирное курсивное начертание
.
в поле
Размер
– размер шрифта в пунктах (1 пункт =
0,375мм).
в поле
Подчеркивание
–
тип
линии подчеркивания:
Нет
– подчеркивание не используется;
Одинарное,
по значению
–
подчеркивание
символов одинарной линией;
Двойное,
по значению
–
подчеркивание
символов двойной линией;
Одинарное,
по ячейке
–
подчеркивание
одинарной линией по ширине ячейки;
Двойное,
по ячейке
–
подчеркивание
двойной линией по ширине ячейки;
в поле
Цвет
–
цвет
символов;
в рамке
Эффекты
можно
установить флажки:
зачеркнутый
–
зачеркивание
текста одинарной линией;
верхний
индекс
–
размер
символов уменьшается, текст располагается
выше;
нижний
индекс
–
размер
символов уменьшается, текст располагается
ниже;
если
установить флажок Обычный
,
то в ячейке установится шрифт по
умолчанию;
щелкнутьОК
.
Для
быстрого форматирования символов
используется панель инструментов
Форматирование
.
