Чат Telegram
Группа ВКонтакте
Как выровнять текст в таблице HTML

Выравниваем текст в таблице HTML

Поговорим о том, как выровнять текст в таблице HTML в горизонтальном и в вертикальном направлениях.

Для того, чтобы выровнять по горизонтали следует использовать CSS-свойство text-align. Ему присущи такие значения, как left, center и right.

Чтобы выровнять по вертикали необходимо применять CSS-свойство vertical-align. Ему, в свою очередь, характерны такие значения, как top, middle и bottom.

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

На практике выравнивание содержимого ячеек выглядит вот так:

td {
    ...
    vertical-align: bottom;
    text-align: right;
}

Результат в браузере для таблицы, которую мы создали в прошлом уроке:

Таким образом весь текст в ячейках прижался к правому нижнему углу.

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

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

...
<td class="specialTd">
...

А затем задаёте свойства для этого класса:

.specialTd {
    ...
    vertical-align: bottom;
    text-align: right;
}
Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Домашнее задание
  • задайте стили для странички, при которых текст в ячейках будет расположен сверху по центру
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
Комментарии (27)
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
loader
Есть вопрос по программированию?
Здесь быстро ответят!
Задать вопрос
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
loader
Форум веб-разработчиков
Здесь все!
Перейти
loader
Логические задачи с собеседований