Чат PHP-разработчиков
Логические задачи с собеседований
Как выровнять текст в таблице 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.
Домашнее задание
  • задайте стили для странички, при которых текст в ячейках будет расположен сверху по центру
Читайте также
Комментарии


doubledonea
doubledonea

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

ivashkevich
ivashkevich

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

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

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

Lungren
Lungren

Сделал таблицу акцизного сбора как у вас, но её нижняя граница во многих браузерах слишком широка стала почему-то, так до сих пор и не разобрался, в чём дело?

Lungren
Lungren

Артём, почему молчите? Я у вас учусь, вас уважаю. А проблема с таблицей действительно актуальна.

ivashkevich
ivashkevich

Здравствуйте, прошу прощения за долгий ответ. Напишите в комментариях свой код, посмотрим.

Lungren
Lungren
<html>
<head>
<title>Пишем на HTML</title>
    <style>
        td{align:center; vertical-align:middle; text-align:center;}
    </style>
</head>
<body>
<table align="center" width="700" height="150" border="1">
<caption>Размер акцизного сбора на дизельное топливо.</caption>
    <tr>
        <th rowspan="2">Продукция</th>
        <th colspan="3">Налоговая ставка</th>
    </tr>
    <tr>
        <th>с 01.01 по 31.12.2015</th>
        <th>c 01.01 по 31.12.2016</th>
        <th>с 01.01.2015</th>
    </tr>
    <tr>
        <th>Дизельное топливо.</th>
        <th>3450 руб. за тонну</th>
        <th>4159 руб. за тонну</th>
        <th>3950 руб за тонну</th>
    </tr>
    <tr>
</table>
</body>
</html>
ivashkevich
ivashkevich

У вас в конце просто лишняя пустая строка, перед закрывающим тегом </table>:

    </tr>
    <tr>
Lungren
Lungren

Да, действительно. Вот какие мелочи бывают важны.)

ivashkevich
ivashkevich

В разработке всё состоит из мелочей, удачи в прохождении курса)

Dilik
Dilik

Сразу оговорюсь что я весь курс делаю на одной странице, чтоб копировать нужные куски которые использовались ранее)
Пытаюсь в таблице с акцизами сделать чтобы в ячейке "Дизельное топливо" текст был вверху справа.
Задал класс ячейке specTD и задал внутри тега style вверху справа. Но не получается. Скажите пожалуйста где моя ошибка.

<style>
        table {
            border: solid 1px blue;
            border-collapse: collapse;
            caption-side: top;
        }

        table caption {
            text-align: top;
        }

        td {
            border: solid 1px blue;
            padding: 5px;
            vertical-align: center;
    text-align: center;
        }
         th {
            border: solid 1px blue;
            padding: 5px;
        }
        specTD {
    vertical-align: top;
    text-align: right;
    }
    </style>

а в самой ячейке так

<tr>
        <th  class="specTD">Дизельное топливо</th><td>3450 руб. за 1 тонну</td><td>4150 руб. за 1 тонну</td><td>3950 руб. за 1 тонну</td>
    </tr>
ivashkevich
ivashkevich

Привет, в CSS описание для класса нужно начинать с точки перед именем класса:

.specTD {
    vertical-align: top;
    text-align: right;
}
alsvis2013
alsvis2013

А не проще задать центровку текста в таблице в CSS свойствах для всей таблицы:
table {
...
text-align: center;
}

ivashkevich
ivashkevich

Ну тут уж зависит от того, что вам нужно)