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