Как выровнять таблицу по центру?

Выравнивание таблицы по центру горизонтали работает только в случае, когда явно задана ширина таблицы через свойство width. При соблюдении этого условия для селектора table следует задать свойство margin со значением auto. Оно обозначает, что отступы вокруг таблицы вычисляются автоматически, это как раз и приводит к её центрированию (пример 1).

Пример 1. Использование margin

Читайте также »   Как запретить изменение размеров ?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Таблица в центре окна</title>
<style>
table {
width: 300px; /* Ширина таблицы */
margin: auto; /* Выравниваем таблицу по центру */
}
td {
border: 1px solid green; /* Рамка вокруг таблицы */
text-align: center; /* Выравниваем текст по центру ячейки */
}
</style>
</head>
<body>
<table>
<tr>
<td>Балбес</td>
<td>Бывалый</td>
</tr>
<tr>
<td>Трус</td>
<td>Шурик</td>
</tr>
</table>
</body>
</html>

Результат данного примера показан на рис. 1.

Как выровнять таблицу по центру?

Рис. 1. Выравнивание таблицы с помощью стилей

Источник

You might also like

Comments are closed.