11.03.2017   2567
Как выровнять текст в таблице 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;
}
Домашнее задание
Для просмотра домашки нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности

Комментарии

 doubledonea 2017-04-03 16:17:18
+1

Свойства padding-top/bottom/right/left и text-align/veltical-align конфликтуют между собой?

Ответить
  •  ivashkevich 2017-04-03 16:30:26
    0

    Дело в том, что первые отвечают за внутренние отступы, а вторые - за расположение текста внутри ячеек. Таким образом, возможна ситуация, когда вы задали отступы и текст теперь не выравнивается с помощью text-align/veltical-align, так как текст внутри ячеек отдалён от границ заданными отступами. Если вы увеличите при этом высоту или ширину ячеек, чтобы появилось свободное пространство, то текст будет выровнен.
    Пример:

    <td style="padding-top:10px;padding-bottom:10px;height:50px;vertical-align:bottom">содержимое</td>

    Ответить
    •  doubledonea 2017-04-03 16:46:16
      0

      Ну я так и думал, что в таком случае нужно оперировать свойствами width и height. Спасибо за ответ)

      Ответить
Чтобы написать комментарий нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности