Главная » Вебмастеру » Как выровнять таблицу по центру?

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

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

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

Интересные публикации по этой теме: