Как выровнять текст в таблице html
Перейти к содержимому

Как выровнять текст в таблице html

  • автор:

Выравнивание текста в таблице с помощью CSS

По умолчанию текст в ячейке заголовка (th) и в ячейках тела таблицы (td) выровнен следующим образом:
по высоте — по середине,
по ширине — по левому краю ячейки.

table_default

Выровнять текст первого столбца по центру/правому краю можно при помощи конструкции

table td:first-child /* выравнивание по центру*/ table td:first-child /* выравнивание по правому краю*/

Выровнять текст в ячейке по вертикали по верхней/нижней границе ячейки можно только в случае, если для ячейки задана высота:

table td /* выравнивание по верхней границе ячейки */ table td /* выравнивание по нижней границе ячейки */

Как выровнять таблицу по центру страницы/блока?

Выровнять таблицу по центру можно при помощи конструкции

Выравнивание содержимого в ячейках

Содержимое ячеек можно выравнивать по горизонтали и по вертикали с помощью CSS.

За выравнивание по горизонтали отвечает CSS-свойство text-align . Чаще всего используются значения left , center и right .

За выравнивание по вертикали отвечает CSS-свойство vertical-align . Чаще всего используются значения top , middle и bottom .

На самом деле, значений у обоих свойств больше, но в случае с ячейками нас интересуют только перечисленные.

Чтобы задать выравнивание содержимого ячеек, надо в стилях указать:

 < vertical-align: значение; text-align: значение; >

Эти стили повлияют на все ячейки. Чтобы задать выравнивание только в определённых ячейках, нужно назначить им классы и определить стили для классов. В этом примере для вас уже подготовлены ячейки с классами.

Перейти к заданию

  • index.html

Выравнивание элементов

За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по горизонтали и вертикали, расширяются возможности по управлению положением элементов относительно друг друга. Таблицы позволяют задавать выравнивание изображений, текста, полей формы и других элементов относительно друг друга и веб-страницы в целом. Вообще, выравнивание в основном необходимо для установки зрительной связи между разными элементами, а также их группирования.

Центрирование по вертикали

Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).

Пример 1. Центрирование рисунка

   Выравнивание    
Рецепты HTML

Чтобы высота таблицы устанавливалась как 100%, необходимо убрать , код при этом перестает быть валидным.

Использование ширины и высоты на всю доступную область веб-страницы гарантирует, что содержимое таблицы будет выравниваться строго по центру окна браузера, независимо от его размеров.

Выравнивание по горизонтали

Рис. 1. Выравнивание элементов по горизонтали

Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.

Выравнивание по верхнему краю

Пример 2. Использование valign

    Выравнивание   
Колонка 1 Колонка 2

Пример 3. Применение стилей для выравнивания

    Выравнивание    

Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.

Выравнивание по нижнему краю делается аналогично, только вместо значения top используется bottom .

Выравнивание по центру

По умолчанию содержимое ячейки выравнивается по центру их вертикали, поэтому в случае разной высоты колонок требуется задавать выравнивание по верхнему краю. Иногда все-таки нужно оставить исходный способ выравнивания, например, при размещении формул, как показано на рис. 2.

Рис. 2. Добавление формулы в документ

Рис. 2. Добавление формулы в документ

В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.

Пример 4. Выравнивание формулы

    Выравнивание   
Формула 18.6 (18.6)

В данном примере первая ячейка таблицы оставлена пустой, она служит лишь для создания отступа, который, кстати, может быть установлен и с помощью стилей.

Выравнивание элементов формы

С помощью таблиц удобно определять положение полей формы, особенно, когда они перемежаются с текстом. Один из вариантов оформления формы, которая предназначена для ввода комментария, показан на рис. 3.

Рис 3. Расположение полей формы и текста

Рис 3. Расположение полей формы и текста

Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).

Пример 5. Выравнивание полей формы

    Выравнивание   
Имя E-mail Комментарий

В данном примере, для тех ячеек, где требуется задать выравнивание по правому краю, добавлен атрибут align=»right» . Чтобы надпись «Комментарий» располагалась по верхней границе многострочного текста, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью атрибута valign .

Выравнивание текста вверху ячейки таблицы HTML: решение

Для эффективного вертикального выравнивания текста в ячейке таблицы вы можете использовать CSS стиль:

Скопировать код

.vertical-align-middle < /* Посредине действительно веселее */ vertical-align: middle; >

Применив этот класс к ячейке, вы увидите, что текст будет отцентрирован по вертикали:

Скопировать код

 
Текст в центре

Вместе с поддержкой возможностью изменения положения по вертикали, свойство vertical-align со значением middle создает нужный эффект!

Поддержка через CSS-классы

В веб-разработке очень важна поддержка. Использование CSS классов для управления стилями, таких как vertical-align , способствует сокращению HTML-кода и его повторному использованию в разных частях проекта.

Исследуем другие значения для вертикального выравнивания

В CSS существуют и другие способы вертикального выравнивания, помимо middle:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *