Close

16 июня, 2021

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

Выравнивание таблицы по центру горизонтали работает только в случае, когда явно задана ширина таблицы через свойство 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. Выравнивание таблицы с помощью стилей

Автор: Влад Мержевич
Источник: webref.ru

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Яндекс.Метрика
Открыть чат
Если есть вопросы пишите нам
Здравствуйте.
Чем вам помочь?