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

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

В статье описан прием, с помощью которого можно задать равнение таблицы по центру экрана. Таблица, как и любой другой элемент верстки, может по-разному располагаться на странице. Сегодня мы поговорим о том, как установить таблицу по центру вашего экрана. Это сделать довольно просто, необходимо определить ширину нашей таблицы. Имеется в виду задать четкое значение свойству width. Только ширина должна быть менее ширины основного экрана, чтобы наглядность центровки была на должном уровне. Также стоит определить таблице свойство блочного элемента, это делается с помощью display:block;. После этого переходим к ключевому шагу, который и обеспечит выравнивание: прописываем свойство margin, в котором значение боковых отступов будет auto. Тогда левый и правый отступ будет одинаковый и соответствовать оставшемуся свободному месту после определения ширины элемента. Пример кода CSS

table  display:block; width:177px; margin:20px auto; >

центровка таблицы

Как это будет выглядеть в реальных условиях

В каких браузерах работает?

9.0+

1.0+

10.0+

4.0+

3.6+

2.0+

Выравнивание таблиц

В данном примере создается таблица с фоном серого цвета и выравниванием по правому краю. Результат примера показан на рис. 12.4.

Рис. 12.4

Рис. 12.4. Таблица, выровненная по правому краю окна браузера

По умолчанию таблица формируется в виде сетки, при этом в каждой строке таблицы содержится одинаковое количество ячеек. Такой вариант вполне подходит для формирования простых таблиц, но совершенно не годится для тех случаев, когда предстоит сделать сложную таблицу. В подобных ситуациях применяются два основных метода: объединение ячеек и вложенные таблицы.

HTML по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Справочник по CSS (ЦСС) и ШТМЛ

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

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

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

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

Таблица в центре окна

Балбес	Бывалый
Трус	Шурик

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

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