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

Как указать выравнивание текста в ячейке таблицы

  • автор:

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

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

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

Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена 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 .

Выравнивание текста

Данные в ячейке можно выравнивать по двум осям: по горизонтали и вертикали.

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

Положение в ячейке

Пункт командного меню

Кнопка на панели инструментов, в разделе «Выравнивание»

Формат > Выравнивание > Выровнять текст по левому краю

editor_alignment_left_icon

Формат > Выравнивание > По центру

editor_alignment_center_icon_gray

По правому краю

Формат > Выравнивание > Выровнять текст по правому краю

editor_alignment_right_icon

Формат > Выравнивание > Выровнять текст по ширине

editor_alignment_justify_icon_gray

Чтобы выровнять данные по вертикали, воспользуйтесь одной из команд, описанных в таблице:

Положение в ячейке

Пункт командного меню

Кнопка на панели инструментов, в разделе «Выравнивание»

По верхнему краю

Формат > Выравнивание > По верхнему краю

editor_vertical_alignment_top_icon

Формат > Выравнивание > Выровнять текст по центру

editor_vertical_alignment_middle_icon_gray

По нижнему краю

Формат > Выравнивание > По нижнему краю

editor_vertical_alignment_bottom_icon

Поделиться:
Был ли материал полезным?
Благодарим вас за обратную связь! Вы помогаете нам стать лучше.
Уточните, почему вам понравился материал:
Уточните, почему вам не понравился материал:
Предыдущее
Цвет выделения текста
Следующее
Поворот текста

Мы используем cookie-файлы и другие технологии для улучшения работы сайта.

Подробную информацию Вы можете найти в Политике конфиденциальности

Остались вопросы?
Свяжитесь с нами

Регистрация обращений производится круглосуточно .
Максимальный размер письма — 4,6 MB.
Допустимые форматы вложений: JPEG, PNG, TXT, CSV, XML, ODT, DOC(X), XLS(X), PPT(X), PDF, RAR, 7Z.

Звонок бесплатный. Регистрация обращений производится круглосуточно .
Добавочные номера служб круглосуточного сопровождения пользователей указаны в вашем Договоре предоставления прав использования программного продукта.

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

Как сделать так, чтобы текст в ячейках таблицы был ровно посередине? Чем можно заменить атрибут text-valign:middle . Ячейки с id=td_est, > были одинаковые по высоте. text-valign:middle; не помогает. Вот код html:

 
Оформление визы Цена
Однократная

3090

Многократная*
#td_est < text-valign:middle; >#td_est2 < text-valign:middle; >#td_est3

Как сделать выравнивание текста в ячейке таблицы

введите сюда описание изображения

Как сделать выравнивание текста в ячейке, что бы крайние левые буквы каждой строки были на одном уровне, при этом текст находился по центру ячейки т.е. сейчас у меня текст по середине ячейки, но все строки как бы «пляшут», а я хочу чтоб были слева в ровень

Отслеживать
задан 22 фев 2017 в 9:01
Jeison Mortyre Jeison Mortyre
178 9 9 бронзовых знаков
22 фев 2017 в 9:08
оно, спасибо большое
22 фев 2017 в 9:26

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Можно обернуть строки инлайн блоком. И переопределить в нем выравнивание текста.

td .center
 
1111111
222
33333333333

Отслеживать
ответ дан 22 фев 2017 в 10:05
user31906 user31906

Пропишите с css text-align: left; padding-left: 30%(значение подкрутите в отладчике чтобы получилось как хочется.);

Отслеживать
ответ дан 22 фев 2017 в 9:27
382 2 2 серебряных знака 17 17 бронзовых знаков

  • html
  • css
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.4.24.8132

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

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