Как центрировать таблицу с помощью CSS (краткое руководство)

Использование таблиц в веб-дизайне имеет интересную историю. До принятия CSS таблицы использовались не только для отображения табличных данных обычным способом, но и чаще использовались для управления полными макетами страниц.

В то время HTML-таблицы использовались для определения как структуры, так и внешнего вида веб-страниц, где положение таблицы можно было указать непосредственно в HTML. Например, чтобы установить выравнивание таблицы по центру, можно просто написать:

<table align="center">

Однако такое выравнивание таблиц больше не является правильным и устарело в HTML5. Это связано с тем, что современные веб-стандарты диктуют разделение структуры (HTML) и стиля (CSS), а приведенный выше метод нарушает этот принцип.

HTML никогда не следует использовать для установки способа отображения элемента; теперь это работа CSS. Так как же правильно центрировать таблицу в CSS? В этой статье нашей команды в wpDataTables мы ответим на этот вопрос и покажем вам несколько советов о том, как правильно выровнять таблицы.

Мы кое-что знаем о таблицах, учитывая, что мы создали потрясающий плагин для таблиц WordPress, так что давайте углубимся.

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

CSS определяет внешний вид страницы, позволяя вам управлять внешним видом и положением каждого элемента, включая элемент table и все его подэлементы, такие как th, tr и td.

Прежде всего, давайте рассмотрим «правильный» способ центрирования таблицы с помощью CSS. Если ваши правое и левое поля имеют одинаковое значение, современные браузеры должны отображать таблицу по центру. Простой способ добиться этого — установить для обоих полей значение auto.

Ниже приведен пример того, как написать это в CSS:

table

Обратите внимание, что вы не можете просто центрировать таблицу так же, как с текстом — например, с помощью «text-align: center». Это связано с тем, что элемент таблицы является элементом блочного уровня, а не встроенным элементом. -align: center» будет центрировать только встроенный контент, например текст в таблице, а не саму таблицу.

Однако в более старых версиях Internet Explorer существует ошибка, из-за которой элементы блочного уровня обрабатываются как встроенные элементы. Таким образом, единственный способ центрировать таблицу для работы с некоторыми версиями IE — это явно установить «text-align: center» для родительского элемента таблицы (например, для элемента body, как показано ниже):

body {

Вы можете проверить, как разные браузеры будут вести себя с разными стилями, используя «margin-left: auto; margin-right: auto» или «выравнивание текста: по центру».

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

Примеры будут иметь следующий общий формат:

<div>

<table>

</table>

</div>

Стили применяются либо к

,

а иногда и то, и другое.

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

.center1

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

CSS для старых и новых браузеров вместе:

.centertbl

Как это работает?Первая часть помещается в

. Это центрирует таблицу в Internet Explorer 5 и Netscape 4. Вторая часть применяется к

в пределах

.

Настройки полей позволяют центрировать таблицу в браузерах, которые хорошо работают с CSS. Затем встроенный текст будет возвращен к выравниванию по левому краю по умолчанию, переопределяя исходное «выравнивание текста: по центру» для поддержки старых браузеров.

Как центрировать с запасом

Один из наиболее распространенных способов центрирования таблицы — установить для нижнего и верхнего полей значение 0, а для левого и правого полей — значение auto.

Вот часто используемый метод:

table {

Или вы можете сделать это следующим образом:

table {

Если вам нужна таблица точной ширины, вы можете сделать это, как обычно, и автоматическое поле разделит оставшееся пространство.

table {

Другой способ сделать это — использовать проценты для определения ширины:

table {

Выравнивание ячеек: выравнивание по тексту или выравнивание по вертикали

Если вы хотите знать, как центрировать текст в CSS, выравнивание текста в ячейке состоит из двух частей; горизонтально и вертикально. По горизонтали — будет ли текст выравниваться по центру, слева или справа от этой ячейки. Это контролируется свойством text-align.

По вертикали находится ли он в середине, вверху или внизу ячейки. Это контролируется свойством vertical-align.

Вы применяете следующие свойства к элементу TH или TD, чтобы ваш текст был выровнен по вертикали и горизонтали, как вы хотите. Например:

td {
text-align: center;
vertical-align: top;
}

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

Советы по оформлению стола

Прежде чем закончить, мы подумали, что может быть полезно иметь список быстрых советов для справки. Это поможет при создании таблицы в CSS.

• Выстройте свой

,

, а также

. Это также дает вам больше частей, где вы можете применить CSS. Это упрощает наложение нескольких стилей.

• Использование table-layout упрощает установку ширины столбцов. Когда вы устанавливаете ширину заголовка, ширина столбца будет такой же.
• Используйте чередующиеся цвета, чтобы упростить чтение таблицы. При быстром сканировании можно увидеть, какая информация находится в той же строке.
• Пусть ваш стол будет простым. Вы можете использовать проценты, чтобы вам не приходилось каждый раз менять размер.
• Вы можете использовать border-collapse, чтобы сделать таблицу чище и аккуратнее.

Завершение мыслей о том, как центрировать таблицу

Теперь вы знаете, как центрировать таблицу с помощью CSS. Как уже говорилось, «правильный» способ сделать это — установить для правого и левого полей значение auto. Этот метод работает почти для всех новых браузеров, которые хорошо работают с CSS.

Для некоторых менее современных браузеров это не сработает. Если это так, вы можете стилизовать таблицу, используя метод выравнивания текста, и окружить ее

. Если вы хотите центрировать таблицу, используя выравнивание текста по внешнему

, вы можете сделать это с помощью text-align.

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

Если вам понравилось читать эту статью о том, как центрировать таблицу с помощью CSS, вы должны прочитать эту статью о таблицах Bootstrap.

Мы также писали о нескольких связанных темах, таких как цвет фона таблицы, таблицы HTML, адаптивные таблицы с CSS, таблицы CSS и плагины для таблиц jQuery.

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