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

🕛 22.01.2009, 23:42

Для выравнивания таблицы имеется два основных метода: с помощью параметра align тега <TABLE> и с использованием стилей. Вначале рассмотрим способ, основанный только на HTML. Его суть простая - к тегу <TABLE> добавляем параметр align со значением center, как показано в примере 1.

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

HTML 4.01IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Таблица в центре окна</title> </head> <body> <table align="center" width="300" border="1"> <tr> <td>Балбес</td> <td>Бывалый</td> </tr> <tr> <td>Трус</td> <td>Шурик</td> </tr> </table> </body>
</html>

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

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

Обратите внимание, что <!DOCTYPE> используется переходный, в противном случае код не пройдет валидацию.

Более удобен способ выравнивания таблицы, основанный на стилях. В этом случае для селектора TABLE следует задать атрибут margin со значением 0 auto. Оно обозначает, что отступы по вертикали равны нулю, а слева и справа от таблицы вычисляются автоматически. В случае установки ширины таблицы это как раз и приводит к ее центрированию (пример 2).

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

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Таблица в центре окна</title> <style type="text/css"> TABLE { width: 300px; /* Ширина таблицы */ border: 1px solid green; /* Рамка вокруг таблицы */ margin: 0 auto; /* Выравниваем таблицу по центру окна */ } TD { text-align: center; /* Выравниваем текст по центру ячейки */ } </style> </head> <body> <table> <tr> <td>Балбес</td> <td>Бывалый</td> </tr> <tr> <td>Трус</td> <td>Шурик</td> </tr> </table> </body>
</html>