Как разместить таблицу посередине html

Нам понадобится div, внутрь тега начального помещаем «style=»text-align: center;»»

Далее нам нужен тег table + добавляем туда атрибут border + attribute style с » display: inline-block «

Соберем весь код таблицы посередине вместе:

Пример таблицы по центру с атрибутом style

Поставим эту таблицу прямо здесь:

Результат вывода таблицы посередине с помощью text-align: center;

Пример таблицы по центру с атрибутом

Поставить таблицу посередине с помощью css

В этом пункте разберем установка таблицы посередине с помощью css!

Для этого нам понадобится:

Возьмем тег table, внутрь поместим class и дадим ему, какое-то название «table_center_by_css«

В td поместим какой-то текст, чтобы можно было увидеть нашу таблицу по центру!

Пример таблицы по центру с помощью css

Далее нам нужно прописать свойства таблицы по центру(border — добавлен, чтобы мы смогли увидеть края таблицы) :

Соберем весь код таблицы посередине через css вместе:

border: 1px solid #000;

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

Время от времени на HTML-страницах наблюдаю такую конструкцию:

Так делать неправильно – тег center устаревший и не рекомендуется к употреблению:

The CENTER element is exactly equivalent to specifying the DIV element with the align attribute set to «center». The CENTER element is deprecated [p.38].

Как тогда выравнять таблицу по центру? – Да очень просто:

Это тестовая таблица

Исходный код этого примера:

 Это тестовая таблица

Указанный код работает во всех браузерах.

CSS: Оформление таблиц

Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing, которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально.

Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing , то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse. Оно может принимать два значения:

separate: является значением по умолчанию. Ячейки отображаются на небольшом расстоянии друг от друга, каждая ячейка имеет свою собственную рамку.
collapse: соединяет соседние рамки в одну, все промежутки между ячейками, а также между ячейками и рамкой таблицы игнорируются.

    Название документа table, td, th < border: 4px outset blue; border-spacing: 5px; >.first  Имя Фамилия
 Гомер Симпсон
 Мардж Симпсон
 
 
 Имя Фамилия
 Гомер Симпсон
 Мардж Симпсон

Имя	Фамилия
Гомер	Симпсон
Мардж	Симпсон

Имя	Фамилия
Гомер	Симпсон
Мардж	Симпсон

Размер таблицы

После добавления рамок к ячейкам таблицы стало заметно, что содержимое ячеек слишком близко расположено к краям. Для добавления свободного пространства между краями ячеек и их содержимым можно воспользоваться свойством padding:

th, td

Размер таблицы зависит от ее содержимого, но часто возникают ситуации, когда таблица оказывается слишком узкой и появляется необходимость ее растянуть. Ширину и высоту таблицы можно изменять с помощью свойств width и height, задавая нужные размеры или самой таблице или ячейкам:

table < width: 70%; >th

Выравнивание текста

По умолчанию текст в заголовочных ячейках таблицы выравнивается по центру, а в обычных ячейках текст выровнен по левому краю, используя свойство text-align можно управлять выравниванием текста по горизонтали.

CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align :

top: текст выравнивается по верхней границе ячейки
middle: выравнивает текст по центру (значение по умолчанию)
bottom: текст выравнивается по нижней границе ячейки

    Название документа table, td, th < border: 1px solid black; border-collapse: collapse; >table < width: 70% >td < text-align: right; >th < height: 50px; >.test1 < vertical-align: top; >.test2  Имя Фамилия
 Гомер Симпсон
 Мардж Симпсон

Имя	Фамилия
Гомер	Симпсон
Мардж	Симпсон

Чередование фонового цвета строк таблицы

При просмотре больших таблиц, содержащих много строк с большим количеством информации, бывает трудно отследить, какие данные относятся к конкретной строке. Чтобы помочь пользователям сориентироваться, можно использовать два разных фоновых цвета поочередно. Для создания описанного эффекта можно использовать селектор class, добавляя его к каждой второй строке таблицы:

    Название документа table < width: 70%; border-collapse: collapse; >td, th < border: 1px solid #98bf21; padding: 3px 7px 2px 7px; >th < text-align: left; padding: 5px; background-color: #A7C942; color: #fff; >.alt td  Имя Фамилия Положение
 Гомер Симпсон отец
 Мардж Симпсон мать
 Барт Симпсон сын
 Лиза Симпсон дочь

Имя	Фамилия	Положение
Гомер	Симпсон	отец
Мардж	Симпсон	мать
Барт	Симпсон	сын
Лиза	Симпсон	дочь

Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса :nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные):

Читать:

Как создать кисть в painter

tr:nth-child(odd)

Изменение фона строки при наведении курсора

Еще одним способом повышения удобочитаемости табличных данных является изменение фонового цвета строки при наведении на нее курсора мыши. Это поможет выделить нужное содержимое таблицы и повысит визуальное восприятие данных.

Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс :hover к селектору строки таблицы и задать нужный цвет фона:

tr:hover

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

Выравнивание HTML таблицы по центру возможно только в том случае, если ширина таблицы меньше, чем ширина её родительского элемента. Чтобы выровнять таблицу по центру, надо воспользоваться свойством margin , задав ему минимум два значения: первое значение будет отвечать за внешний отступ таблицы сверху и снизу, а второе — за автоматическое выравнивание по центру:

table

Если вам нужны разные отступы сверху и снизу таблицы, то можно задать свойству margin три значения: первое будет отвечать за отступ сверху, второе за выравнивание по горизонтали, а третье за отступ снизу:

table

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru

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

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

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

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

HTML по теме

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