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

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