Горизонтальное выравнивание
Чтобы выровнять содержимое <th> или <td> по горизонтали, задайте text-align значение left, right или center.
Примечание: Без какой-либо стилизации содержимое <td> выровнено по левому краю, а содержимое <th> по центру.
CSS text-align: center
text-align: center размещает содержимое элементов <td> по центру.
Пример
Здесь содержимое элементов <td> выровнено по центру.
<style> задайте table/th/td сплошную объединённую границу 1px и установите td text-align в center. Добавьте таблицу с колонками Имя/Фамилия/Сбережения и несколькими строками.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th><th>Savings</th></tr>
<tr><td>Peter</td><td>Griffin</td><td>$100</td></tr>
<tr><td>Lois</td><td>Griffin</td><td>$150</td></tr>
<tr><td>Joe</td><td>Swanson</td><td>$300</td></tr>
</table>
</body>
</html>
CSS text-align: left
Содержимое элементов <th> смещается влево, как только этим элементам задано text-align: left.
Пример
Содержимое <th> находится не по центру, а слева.
<style> задайте table/th/td сплошную объединённую границу 1px и установите th text-align в left (по умолчанию заголовки выровнены по центру). Добавьте таблицу с колонками Имя/Фамилия/Сбережения и несколькими строками.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th><th>Savings</th></tr>
<tr><td>Peter</td><td>Griffin</td><td>$100</td></tr>
<tr><td>Lois</td><td>Griffin</td><td>$150</td></tr>
<tr><td>Joe</td><td>Swanson</td><td>$300</td></tr>
</table>
</body>
</html>
Вертикальное выравнивание
Чтобы выровнять содержимое в <th> или <td> по вертикали, например по верху, по низу или по середине, используйте vertical-align.
Примечание: И <th>, и <td> по умолчанию выравнивают содержимое по середине.
Пример
Когда элементам <td> задана высота, их содержимое может располагаться внизу.
<style> задайте table/th/td сплошную объединённую границу 1px и задайте td высоту 50px с vertical-align bottom. Добавьте таблицу с колонками Имя/Фамилия/Сбережения и несколькими строками.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
td {
height: 50px;
vertical-align: bottom;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th><th>Savings</th></tr>
<tr><td>Peter</td><td>Griffin</td><td>$100</td></tr>
<tr><td>Lois</td><td>Griffin</td><td>$150</td></tr>
<tr><td>Joe</td><td>Swanson</td><td>$300</td></tr>
</table>
</body>
</html>