CSS Выравнивание таблицы
Горизонтальное выравнивание текста в таблице
CSS cвойство text-align
определяет горизонтальное выравнивание текста в таблице (например, влево, вправо или по центру) содержимого в <th> и <td>.
По умолчанию содержимое элементов <th> выравнивается по центру, а содержимое элементов <td> - по левому краю.
Чтобы выровнять содержимое элементов <td> по центру, используйте text-align: center
:
Фамилия | Имя | Сбережения |
---|---|---|
Щипунов | Андрей | $100 |
Щипунова | Татьяна | $150 |
Щипунова | Кристина | $300 |
td
{
text-align: center;
}
Попробуйте сами »
Чтобы выровнять содержимое по левому краю, принудительно выровняйте <th> элементы по левому краю с помощью свойства text-align: left
:
Фамилия | Имя | Сбережения |
---|---|---|
Щипунов | Андрей | $100 |
Щипунова | Татьяна | $150 |
Щипунова | Кристина | $300 |
th
{
text-align: left;
}
Попробуйте сами »
Вертикальное выравнивание текста в таблице
CSS cвойство vertical-align
определяет вертикальное выравнивание текста в таблице (например, вверху, внизу или по центру) содержимого в <th> и <td>
По умолчанию содержимое таблицы выравнивается по вертикали посередине (как для элементов <th>, так и для <td>).
В следующем примере выравнивание текста по вертикали устанавливается снизу для элементов <td>:
Фамилия | Имя | Сбережения |
---|---|---|
Щипунов | Андрей | $100 |
Щипунова | Татьяна | $150 |
Щипунова | Кристина | $300 |
td
{
height: 50px;
vertical-align: bottom;
}
Попробуйте сами »