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

Содержание

CSS: Оформление HTML таблиц — рамка, размер, выравнивание текста

Табличные данные — информация, которую можно отобразить в виде таблицы и логически разделить по столбцам и строкам. Для отображения табличных данных на веб-страницах используется HTML тег <table>, представляющий из себя контейнер с содержимым таблицы. Контент HTML таблицы описывается построчно, каждая строка начинается с открывающего тега <tr> и заканчивается закрывающим тегом </tr>.

Внутри тега <tr> располагаются ячейки таблицы, представленные тегами <th> или <td>. Именно ячейки содержат весь контент таблицы, отображаемый на веб-странице.

Рамка таблицы

По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border. Но стоит обратить внимание на то, что если добавить рамку только к элементу <table>, то она отобразиться вокруг всей таблицы. Для того, чтобы ячейки таблицы тоже имели рамку, надо будет установить свойство border и для элементов <th> и <td>.

table, th, td { border: 1px solid black; }

Попробовать »

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

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table, td, th { 
	    border: 4px outset blue;
		border-spacing: 5px;
	  }
      .first { border-collapse: collapse; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
    <br>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
  </body>
</html>

Попробовать »

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

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

th, td { padding: 7px; }

Попробовать »

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

table { width: 70%; }
th { height: 50px; }

Попробовать »

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

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

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

top: текст выравнивается по верхней границе ячейки

middle: выравнивает текст по центру (значение по умолчанию)

bottom: текст выравнивается по нижней границе ячейки

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      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 { vertical-align: bottom; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
  </body>
</html>

Попробовать »

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      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 { background-color: #EAF2D3; }
    </style>
  </head>
  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th><th>Положение</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td><td>отец</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td><td>мать</td></tr>
      <tr><td>Барт</td><td>Симпсон</td><td>сын</td></tr>
      <tr><td>Лиза</td><td>Симпсон</td><td>дочь</td></tr>
    </table>
  </body>
</html>

Попробовать »

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

tr:nth-child(odd) { background-color: #EAF2D3; }

Попробовать »

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

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

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

tr:hover { background-color: #E0E0FF; }

Попробовать »

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

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

table { margin: 10px auto; }

Попробовать »

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

table { margin: 10px auto 30px; }

3.7. Выравнивание таблицы и содержимого ячеек. HTML, XHTML и CSS на 100%

Расположение таблицы по центру html

Выравнивание таблицы по центру горизонтали работает только в случае, когда явно задана ширина таблицы через свойство w >table следует задать свойство margin со значением auto . Оно обозначает, что отступы вокруг таблицы вычисляются автоматически, это как раз и приводит к её центрированию (пример 1).

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

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

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

См. также

Автор и редакторы

Темы рецептов

Гл. редактор: Влад Мержевич

О сайте

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

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Задача

Выровнять таблицу по центру горизонтали окна браузера.

Решение

Выравнивание таблицы работает только в случае, когда явно задана её ширина и она меньше 100%. При соблюдении этих условий для селектора table следует задать свойство margin со значением auto . Оно обозначает, что отступы от таблицы вычисляются автоматически, это как раз и приводит к её центрированию (пример 1).

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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

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

Основные тонкости

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

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

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

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

Выравнивание по центру в ячейках

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

, отвечающий за конкретную ячейку в строке. Далее необходимо присвоить его атрибутам valign (вертикаль) и/или align (горизонталь) значение «center», в зависимости от вашей задачи:

Если вы хотите сделать такое форматирование стандартным для всего сайта или страницы (чтобы не переписывать каждую таблицу), то следует использовать CSS-стили. Для этого допишите следующий код внутри тега :

С помощью этого способа также можно задать выравнивание как для конкретной ячейки, так и для столбца, строки или всей таблицы в целом. Как можно заметить, любой из способов весьма прост.

Таблицы | Основы вёрстки контента

Таблицы — страшный сон верстальщика. Они громоздкие в своей вёрстке и в них очень легко запутаться. Важно «набить руку» и вы сможете достаточно быстро и без боли верстать даже самые сложные варианты таблиц.

Базовая вёрстка таблиц

Таблица — составной элемент, который формируется сразу из нескольких вложенных друг в друга тегов. Это похоже на то, как верстаются списки — имеется контейнер и внутри него специальные теги-элементы. Таблицы имеют похожие структуры, только контейнеров и элементов немного больше.

Любая таблица начинается с парного тега <table>. Одного этого контейнера уже достаточно, чтобы получить первую работающую таблицу.

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

Для создания строки используется тег <tr>. Количество строк и регулируется количеством этих тегов внутри <table>. Попробуем создать три строки:

<table>
  <tr></tr> <!-- строка 1 -->
  <tr></tr> <!-- строка 2 -->
  <tr></tr> <!-- строка 3 -->
</table>

Сейчас эта разметка почти ничего не сообщает браузеру. Если вставить текст в тегах <tr>, то браузер посчитает такой код неверным и постарается обработать его самостоятельно. Например, некоторые браузеры автоматически «вытащат» весь этот текст и переместят его за пределы тега <table>.

Для добавления данных нужны колонки. Их можно добавить с помощью тега <td>. Количество колонок вы так же регулируете самостоятельно. Сколько тегов <td>, столько колонок в таблице и будет.

Важно: количество колонок должно совпадать в каждой строке. Если количество колонок будет не совпадать, то таблица может банально «сломаться». Следите за этим.

<table>
  <tr>
    <td>Строка 1. Колонка 1.</td>
    <td>Строка 1. Колонка 2.</td>
    <td>Строка 1. Колонка 3.</td>
  </tr>
  <tr>
    <td>Строка 2. Колонка 1.</td>
    <td>Строка 2. Колонка 2.</td>
    <td>Строка 2. Колонка 3.</td>
  </tr>
  <tr>
    <td>Строка 3. Колонка 1.</td>
    <td>Строка 3. Колонка 2.</td>
    <td>Строка 3. Колонка 3.</td>
  </tr>
</table>

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

Указать атрибут border для тега <table>. Это сразу установит все возможные границы, как для строк, так и для столбцов. Данный метод считается устаревшим и не рекомендуется к использованию.
Использовать свойство border для необходимых тегов.

Лучший вариант — использование CSS. Так вы будете хранить стили в одном месте, и не будет нужды вспоминать об атрибутах.

table,
tr,
td {
  border: 1px solid #000;
}

Главная неприятность — возникновение двойных границ. Это может быть дизайнерской «фишкой», но чаще всего такое не требуется. Нужно «схлопнуть» отступы и для этого используется свойство border-collapse со значением collapse. Для возвращения в исходное состояние используется значение separate.

Выравнивание контента по вертикали

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

Для выравнивания по вертикали используется свойство vertical-align, которое принимает одно из четырёх значений:

baseline — выравнивание по базовой линии шрифта. Подробнее с таким выравниванием и его принципами вы познакомитесь в курсе CSS: Flex.
top — выравнивание по верхнему краю ячейки.
middle — выравнивание по центру. Стандартное поведение для контента внутри ячеек.
bottom — выравнивание по нижнему краю ячейки.

Заголовки таблицы

Сложно представить себе таблицу, которая не имеет заголовков. Без них понять, какая ячейка относится к какой информации почти невозможно. Можно визуально задать стили заголовков и для некоторых ячеек ввести свои стили. Но семантически таких заголовков не будет существовать, что плохо для доступности.

Создать секцию с заголовками можно с помощью тега <thead>. Строки и ячейки внутри такой обёртки будут являться заголовками колонок нашей таблицы. Есть и ещё небольшое изменение: вместо тега <td> внутри шапки используется тег <th>. Это, помимо семантической нагрузки, позволяет проще определять стили.

Хорошей практикой является добавление тега <tbody> для основного контента. Если этого не сделать, то браузер подставит его сам, но лучше доверять собственной разметке, чем работе браузера.

В качестве заголовка самой таблицы используется текст, обрамлённый в тег <caption>. По умолчанию он располагается вверху всей таблицы, вне зависимости от того, где вы расположите тег. Это поведение можно контролировать с помощью свойства caption-side. Оно принимает одно из двух значений:

top — позиция по умолчанию. Заголовок располагается до таблицы.
bottom — расположение заголовка после таблицы.

Пример таблицы с использованием новых тегов и свойств:

<table>
  <caption>Профессии</caption>
  <thead>
    <tr>
      <th>№</th>
      <th>Название профессии</th>
      <th>Описание</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Фронтенд-программист</td>
      <td>JavaScript — язык программирования фронтенд-разработки. С его помощью программисты делают сайты динамичными и «живыми». Самый востребованный и наиболее простой язык для новичков.</td>
    </tr>
  </tbody>
</table>

html {
  font-family: sans-serif;
}

table {
  border-collapse: collapse;

  color: #212529;
}

td,
th {
  padding: 0.75rem;
  border-top: 1px solid #dee2e6;
}

th {
  border-bottom: 2px solid #dee2e6;
}

caption {
  margin-top: 25px;

  font-size: 0.7em;
  text-align: right;

  caption-side: bottom;
}

Объединение строк и столбцов

Не все таблицы имеют простую структуру из ровных столбцов и строк. Объединение нескольких строк или столбцов — распространённая практика при вёрстке таблиц. Рассмотрим базовые правила на примере табеля выплаты зарплаты сотрудников.

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

Создадим базовый каркас всей таблицы, без объединения строк или столбцов:

<table>
  <thead>
    <tr>
      <th>Сотрудник</th>
      <th>Зарплата</th>
      <th>Бонусы</th>
      <th>Менеджер</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Алексей Примадонин</td>
      <td>750$</td>
      <td>63$</td>
      <td>Кодовёнок Хекслетович</td>
    </tr>
    <tr>
      <td>Вениамин Редакторович</td>
      <td>1200$</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr>
      <td>Джедай Падаванов</td>
      <td>500$</td>
      <td>100$</td>
      <td>Королева Верстальщина</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td>Всего: 2613$</td>
    </tr>
  </tbody>
</table>

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

В HTML для этой операции существуют два атрибута:

colspan — объединение столбцов.
rowspan — объединения строк.

Принцип работы достаточно прост — в качестве значения аргумента указывается количество строк/столбцов, которое должен занять элемент. Например,

<td colspan="3"> — ячейка должна занять пространство трёх столбцов.
<td rowspan="2"> — ячейка должна занять пространство в две строки.

Важно: ячейки, на месте которых будут расположены ячейки с colspan и rowspan, должны быть удалены из таблицы.

Попробуем объединить менеджера первых двух сотрудников. Для этого нужно у ячейки с нужным менеджером установить атрибут rowspan со значением 2. Обязательно нужно удалить последнюю ячейку в строке ниже.

<tr>
  <td>Алексей Примадонин</td>
  <td>750$</td>
  <td>63$</td>
  <td rowspan="2">Кодовёнок Хекслетович</td>
</tr>
<tr>
  <!-- В этой строке теперь только три столбца -->
  <td>Вениамин Редакторович</td>
  <td>1200$</td>
  <td>0</td>
</tr>

Проделаем то же самое для последней строки, только теперь нужно объединить столбцы. Для этого используем атрибут colspan со значением 4.

<tr>
  <!-- В этой строке всего один столбец, который растянется на 4 -->
  <td colspan="4">Всего: 2613$</td>
</tr>

Итоговый вид таблиц:

<table>
  <thead>
    <tr>
      <th>Сотрудник</th>
      <th>Зарплата</th>
      <th>Бонусы</th>
      <th>Менеджер</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Алексей Примадонин</td>
      <td>750$</td>
      <td>63$</td>
      <td rowspan="2">Кодовёнок Хекслетович</td>
    </tr>
    <tr>
      <td>Вениамин Редакторович</td>
      <td>1200$</td>
      <td>0</td>
    </tr>
    <tr>
      <td>Джедай Падаванов</td>
      <td>500$</td>
      <td>100$</td>
      <td>Королева Верстальщина</td>
    </tr>
    <tr>
      <td colspan="4">Всего: 2613$</td>
    </tr>
  </tbody>
</table>

Дополнительные материалы

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >

Нашли опечатку или неточность?

Выделите текст, нажмите
ctrl + enter
и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

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

Об обучении на Хекслете

Создание таблиц в HTML | Шнайдер блог

4270 Посещений

Универсальность таблиц, а также широкий выбор параметров позволяют решать множество задач. Например, несмотря на актуальность слоев, таблица с невидимой границей может стать своего рода “модульной сеткой” для размещения тех или иных элементов.

Для добавления таблицы на страницу существует тег <table>. Он представляет собой контейнер для элементов, которые отвечают за содержимое таблицы. Строки и ячейки задаются при помощи тегов <tr> и <td>. Вместо последнего допускается использование тега <th>. В этом случае текст в ячейке будет выровнен по центру. Пример ячейки:

В браузере таблица будет отображаться так:

Атрибуты тега <table>

Ключевые атрибуты тега <table>:

align — выравнивание таблицы. Существуют следующие значения: left, right и center.

bgcolor — цвет фона таблицы.

border — толщина границ вокруг таблицы и между ячейками.

cellpadding — задает расстояние между границей ячейки и содержимым.

cellspacing — расстояние между внешними границами ячеек.

cols — число столбцов в ячейке.

rules — атрибут, отвечающий за то, где будут отображены границы между ячейками.

width — ширина таблицы.

Атрибуты тега <td>

Ключевые атрибуты тега <td>:

align — выравнивание содержимого ячейки по горизонтали. Возможны следующие “позиции”: left, right и center.

bgcolor — цвет фона ячейки.

colspan — количество ячеек, которые вы хотите объединить по горизонтали.

height — высота ячеек.

rowspan — количество ячеек, которые вы хотите объединить по вертикали.

valign — выравнивание содержимого ячейки по вертикали. Возможны следующие “позиции”: top, middle, bottom, baseline.

width — ширина ячейки.

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

Атрибут align тега <table> отвечает не только за выравнивание таблицы, но и за обтекание текстом (по аналогии с тегом <img>). Рассмотрим пример выравнивания таблицы по правому краю:

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>Выравнивание таблицы по правому краю</title>

</head>

<body>

<table bgcolor=»#E6E6FA» cellspacing=»0″ cellpadding=»4″ border=»2″ align=»right»>

<tr><td>Содержимое таблицы</td></tr>

</table>

<p>Текст, который будет “обтекать” таблицу по правому краю..</p>

</body>

</html>

Так таблица и текст будут выглядеть в браузере:

Объединение ячеек

Для того, чтобы объединить несколько ячеек в одну используйте атрибуты colspan (объединение ячеек по горизонтали) и rowspan (объединение ячеек по вертикали) тега <td>. Прежде чем добавлять атрибуты, проверьте количество ячеек в строках. В противном случае могут возникнуть проблемы. К пример, <td colspan=»4″> объединит четыре ячейки, поэтому в следующей строки должно быть четыре тега <td>. Что произойдет, если количество ячеек в каждой строке будет разным? В этом случае в браузере будут отображаться “фантомные” ячейки. Например:

<html>

<head>

<title>Неправильное использование colspan</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

Результат в браузере:

Рассмотрим на примере, как правильно объединять ячейки:

<html>

<head>

<title>Правильное объединение ячеек</title>

<tbody>

<tr>

<td colspan=»3″>Статистика браузеров в 2015 году</td>

</tr>

<tr>

<td>Crome</td>

<td>Opera</td>

<td>FireFox</td>

</tr>

<tr>

</tr>

</tbody>

</table>

Результат в браузере:

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

Время от времени на 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] .

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

Основные тонкости

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

Выравнивание по центру в ячейках

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Задача

Выровнять таблицу по центру горизонтали окна браузера.

Решение

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

| Справочник HTML

Элемент <tr> (от англ. «table row» ‒ «строка таблицы») служит контейнером для создания строки таблицы. Он может содержать один или несколько тегов <th> или <td>.

Элемент <tr> используется только внутри таблиц (элемент <table>) и может содержать только теги для создания ячеек, любое содержимое таблицы (текст, списки, изображения и прочие HTML-элементы) помещается внутрь тегов <td> и <th>, которые определяют содержимое ячеек.

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

Синтаксис

<table>
  <tr>
   <td>...</td>
  </tr>
</table>

Закрывающий тег

Не обязателен.

Атрибуты

alignУстарел в HTML5: Выравнивает содержимое в строке таблицы:
left — выравнивание содержимого ячейки по левому краю
center — выравнивание по центру
right — выравнивание по правому краю
justify — выравнивание по ширине (одновременно по правому и левому краю)
char — выравнивание по указанному символу
bgcolorУстарел в HTML5: Задает цвет фона для строки таблицы.
bordercolorУстарел в HTML5: Устанавливает цвет рамки.
charУстарел в HTML5: Выравнивает содержимое в строке таблицы по заданному символу.

Пример: <tr char=»c» align=»char»>…</tr>
charoffУстарел в HTML5: Задает смещение содержимого строки относительно заданного символа.
valignУстарел в HTML5: Вертикальная выравнивает содержимое в строке таблицы:
top — выравнивание содержимого ячейки по верхнему краю строки
middle — выравнивание по середине
bottom — выравнивание по нижнему краю
baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии

Для этого элемента доступны глобальные атрибуты и не доступны события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <tr> со следующими значениями CSS по умолчанию:

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

Различия между HTML 4.01 и HTML5

В HTML 5 прекращена поддержка всех атрибутов тега.

Пример использования:

Пример HTML:

Попробуй сам

  <table>
    <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
    <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
    <tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>
  </table>

Спецификации

Поддержка браузерами

Элемент
<tr>	3+	1+	3.5+	1+	1+	1+

Элемент
<tr>	1+	1+	6+	1+

Попробуйте сами — Примеры

Как добавить рамку вокруг таблицы:
Граница таблицы

Как избавиться от «двойной рамки»:
Одинарная рамка для таблицы

Как изменить поля и интервалы таблицы:
Поля и интервалы таблицы

Как изменить ширину таблицы:
Ширина таблицы

Как объединить столбцы таблицы:
Объединение столбцов

Как создать заголовок таблицы:
Заголовок таблицы

Как применять теги группирования элементов таблиц:
Теги группирования элементов таблиц

Учебник HTML

HTML уроки: HTML Табицы

HTML Элементы

html — Как выровнять элементы td по центру

html — Как выровнять элементы td по центру — qaru

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

Спросил
9 лет, 3 мес. Назад

Просмотрено
151k раз

На этот вопрос уже есть ответы здесь :

Закрыт 3 месяца назад.

Я создал простую таблицу и хочу выровнять элементы td по центру, но выровнять: center в css, похоже, не работает

  .cTable td {
выровнять: по центру;
}



  Идентификатор заявки   Статус  
  22   333  
  22   333  
  22   333

Идентификатор заявки	Статус
22	333
22	333
22	333

TylerH

19.5k5151 золотой знак6565 серебряных знаков8686 бронзовых знаков

задан 20 мая ’12 в 20: 042012-05-20 20:04

пользователь1184100

6,4142828 золотых знаков7474 серебряных знака117117 бронзовых знаков

Для меня сработало следующее (ввиду путаницы в других ответах):

Предлагаемое решение ( выравнивание текста ) работает, но должно использоваться в атрибуте стиля.

Золтан Тот

5,3k1111 золотых знаков109109 серебряных знаков129129 бронзовых знаков

Создан 30 окт.

GuruMaticsGuruMatics

30933 серебряных знака66 бронзовых знаков

маржа: авто; text-align, если это не сработает — попробуйте добавить display: block; и установите width: 200px; (на случай, если ваш TD слишком мал).

Botz3000

37.5k88 золотых знаков101101 серебряный знак125125 бронзовых знаков

Создан 20 мая ’12 в 20: 292012-05-20 20:29

СебСеб

10066 бронзовых знаков

Задайте стиль внутри элемента

или в вашем файле CSS, например: vertical-align: middle;

TylerH
19.5k5151 золотой знак6565 серебряных знаков8686 бронзовых знаков
Создан 13 авг.
Ашвини ЛЮ
1111 серебряный знак11 бронзовый знак
Я лично не нашел ни одного из этих ответов полезным.Что сработало в моем случае, так это предоставление элементу float: none и position: relative . После этого элемент центрировался в
.

Создан 22 июля ’15 в 16: 582015-07-22 16:58
Y2HY2H
2,14311 золотых знаков1616 серебряных знаков3434 бронзовых знака
Лучший способ центрировать содержимое в таблице (например, или ) — это сделать следующее:
Тег видео 1 здесь Тег видео 2 здесь

Создан 16 дек.
1
lang-html
Stack Overflow лучше всего работает с включенным JavaScript
Ваша конфиденциальность
Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Принимать все файлы cookie
Настроить параметры
Как центрировать таблицу в HTML
Обновлено: 31.08.2020, Computer Hope
Таблица — отличный способ систематизированно представить большой объем информации.Данные о продажах, посещаемость веб-страниц, тенденции фондового рынка и оценки студентов являются примерами информации, которая часто представлена в таблицах.
При добавлении таблицы на веб-страницу с помощью HTML может быть более привлекательным визуально разместить ее по центру страницы. Центрирование текста и изображений обычно выполняется с помощью класса text-align или с помощью CSS, но центрирование таблицы требует другого подхода. Ниже приведены подробные сведения о том, как центрировать таблицу на веб-странице.
Центрирование таблицы в HTML
При добавлении таблицы на веб-страницу по умолчанию она выравнивается по левой стороне страницы или контейнера, как показано ниже.
ХИТ МЕСЯЦ ОБЩЕЕ УВЕЛИЧЕНИЕ
324 497 Январь 1998 г. –
436 699 февраль 1998 г. 112 172
Исходный HTML-код для приведенной выше таблицы следующий.
<таблица> ХИТЫ МЕСЯЦ ОБЩЕЕ УВЕЛИЧЕНИЕ 324 497 Январь 1998 - 436 699 февраль 1998 г. 112 172
Чтобы центрировать эту таблицу, вам нужно добавить ; margin-left: auto; margin-right: auto; до конца атрибута стиля в теге
.Тег таблицы будет выглядеть следующим образом.
<таблица>
Изменение атрибута style в теге
, как показано выше, приводит к центру таблицы на веб-странице, как показано ниже.
ХИТ МЕСЯЦ ОБЩЕЕ УВЕЛИЧЕНИЕ
324 497 Январь 1998 г. –
436 699 февраль 1998 г. 112 172
Кончик
Вы можете добавить параметры к атрибуту style в теге
, чтобы сделать таблицу более привлекательной для глаз.Добавляем отступ : 2px; и border-spacing: 20 пикселей; добавляет интервал между точками данных и границей для улучшения читаемости.
Как центрировать таблицу с помощью CSS?
Иногда мы сталкиваемся с проблемами центрирования таблиц на веб-странице. С помощью центрального элемента CSS мы можем центрировать таблицу на нашей веб-странице.
Для центрирования таблицы установите левое и правое поля на авто . (Таблица не может быть центрирована, если ширина установлена на 100%)
Синтаксис:
.className { маржа слева: авто; маржа-право: авто; }
HTML

< html >
< головка >
<
таблица, th, td {
граница: 1 пиксель сплошной черный;
граница-обрушение: обрушение;
}

таблица.по центру {
поле слева: авто;
поле справа: авто;
}
стиль >
головка >
< корпус >

h3 > Центрировать таблицу h3 >

< p > Чтобы центрировать таблицу, установите для левого и правого поля автоматический режим: p >

< таблица класс = «центр» >
< бортик >

< tr >
< th > Col 1 th > 90 005
< th > Столб 2 th >
tr >
бортик >
< кузов >
< tr >
< td > 1.1 td >
< td > 2,1 td >
tr >
< tr >
< td > 1,2 td >
< td > 2.2 td >
tr >
< tr >
< td > 1,3 td >
< td > 2.3 td >
tr >
< tr >
< td > 1.4 td >
< td > 2,4 td >
tr >
< tr >
< td > 1,5 td >
< td > 2.5 td >
tr >
кузов >
таблица >

корпус >
html >
Выход:
Таблица CSS в центре a
Использование таблиц при разработке веб-сайта - увлекательная задача.По умолчанию таблица выравнивается по левому краю, но, используя свойство margin в CSS, мы можем выровнять ее по центру.
Если мы установим значение margin-left и margin-right на auto , то браузеры покажут таблицу по центру. Мы можем использовать сокращенное свойство margin и установить для него значение auto для выравнивания таблицы по центру вместо использования свойства margin-left и margin-right .
Вместо выравнивания таблицы по центру, text-align: center; центрирует только содержимое таблицы, например текст внутри таблицы.
Давайте разберемся в этом с помощью иллюстрации.
Пример
В этом примере мы используем выравнивание текста : center; для центрирования содержимого внутри таблицы и margin-left: auto; и поле справа: авто; для центрирования стола.

<стиль>
table, th, td {
граница: сплошной черный 1px;
маржа слева: авто;
маржа-право: авто;
граница-коллапс: коллапс;
ширина: 500 пикселей;
выравнивание текста: центр;
размер шрифта: 20 пикселей;
}

<таблица>
Имя Фамилия Тема Знаки Джеймс Гослинг Математика 92 Алан Рикман Математика 89 Сэм Мендес Математика 82

Проверить это сейчас
Выход
CSS: центрированные таблицы
CSS: центрированные таблицы
CSS: Центрированные таблицы
[Спасибо Яну Хиксону за решение этой проблемы.]

Вы поместили это в свою таблицу стилей:
.центрированный {выравнивание текста: центр; }
И этот HTML:

Проверка центрирования

Таблица городов и штатов

Пекин Иллинойс

Сан-Хосе Калифорния

Вот что вы получите:
Тест центрирования
Таблица городов и штатов
Пекин Иллинойс
Сан-Хосе Калифорния
«Ага», - думаете вы.«Мой новый блестящий браузер
сломанный." Нет, это не так. Он работает точно так же, как второй уровень CSS.
говорит, что должен. Раздел 16.2 спецификации
говорит, что text-align описывает, как встроенное содержимое
блок выровнен. Если вы посмотрите на определение типа документа (DTD)
для HTML вы обнаружите, что таблицы - это , а не встроенных элементов.
Вот как можно решить проблему. Добавьте это в свою таблицу стилей:
.centered-table { маржа слева: авто; маржа-право: авто; }
Установка ширины поля автоматически заставляет браузер
рассчитайте наценки по формуле в разделе 10.3.3 из
Технические характеристики. В этом случае левое и правое поля равны,
таким образом центрируя стол. Теперь ваш HTML изменится на это:

Проверка центрирования

Таблица городов и штатов

Пекин Иллинойс

Сан-Хосе Калифорния

И вы получите желаемый результат:
Тест центрирования
Таблица городов и штатов
Пекин Иллинойс
Сан-Хосе Калифорния
Как центрировать текст в строке HTML-таблицы
Если вам нужно выровнять текст элемента
по центру каждой строки таблицы (
), вы находитесь в нужном месте.
Раньше это можно было сделать с помощью атрибута align, однако в HTML5 он устарел. Вместо использования этого атрибута используйте свойство CSS text-align или укажите его с помощью встроенных атрибутов стиля.
В этом фрагменте мы покажем и объясним примеры с помощью свойства text-align и атрибута style.
Создать HTML¶
Используйте элемент
.
Добавьте два элемента
и используйте два элемента
внутри каждого из них.
<таблица>
Текст Текст

Текст Текст

Добавить таблицу CSS¶
, table td { граница: сплошная 1px #cccccc; } td { высота: 80 пикселей; ширина: 160 пикселей; выравнивание текста: центр; вертикальное выравнивание: по центру; }
Теперь вы можете увидеть пример полностью.
Пример центрирования текста в строке таблицы с помощью свойства CSS text-align: ¶
<стиль> стол, table td { граница: сплошная 1px #cccccc; } td { высота: 80 пикселей; ширина: 160 пикселей; выравнивание текста: центр; вертикальное выравнивание: по центру; } <таблица> Текст Текст Текст Текст
Попробуйте сами »
Результат¶
В нашем следующем примере мы указываем свойства text-align и vertical-align через встроенный атрибут style.
Пример центрирования текста в строке таблицы с использованием атрибутов стиля: ¶
<стиль> td { высота: 80 пикселей; ширина: 160 пикселей; } Текст Текст Текст Текст
Попробуйте сами »Атрибут style переопределяет стили, установленные глобально.Он переопределит любой стиль, установленный в теге
<таблица> Заголовок Заголовок Текст Текст Текст Текст Текст Текст
Попробуйте сами »
Выровнять текст таблицы по горизонтали по центру с помощью Bootstrap и CSS
Tutorialdeep »ноу-хау» Часто задаваемые вопросы по Bootstrap »Выровнять текст таблицы по горизонтали по центру с помощью Bootstrap и CSS
Из этого руководства вы узнаете, как выровнять текст таблицы по центру по горизонтали с помощью Bootstrap. Короткий ответ - : используйте класс Bootstrap .text-center для выравнивания текста каждой ячейки таблицы по центру.
Вы также можете использовать свойство CSS text-align для выравнивания по центру текстового содержимого ячейки таблицы. Давайте узнаем, как выровнять текстовое содержимое ячеек таблицы с примерами, приведенными здесь.
Выровнять текст ячейки по центру по горизонтали с помощью Bootstrap
Чтобы выровнять текстовое содержимое таблицы по центру с помощью Bootstrap, вам нужно просто добавить класс Bootstrap .text-center в любую ячейку таблицы. Вы можете добавить класс либо в ячейку
, либо в ячейку таблицы, чтобы выровнять ее содержимое по центру.
Проверить это вживую
Имя игрока в крикет Название команды Оценка Шикхар Дхаван Индия 87
Имя игрока в крикет Название команды Оценка
Шихар Дхаван Индия 87
Выход
Имя игрока в крикет Название команды Оценка
Шикхар Дхаван Индия 87
Вышеупомянутое содержит первую строку с ячейкой
и вторую строку с ячейкой td.Во второй строке находится последняя ячейка с текстом в середине с использованием класса Bootstrap.
Сделать текст ячейки заголовка таблицы выровненным по центру с помощью CSS
Чтобы сделать текст центральным положением ячейки заголовка или
ячейки таблицы, вы должны использовать приведенный ниже CSS. Он добавляет свойство text-align: center к во все ячейки заголовка таблицы.
Проверить это вживую
Имя игрока в крикет Название команды Оценка Шикхар Дхаван Индия 87 Юврадж Сингх Индия 97
1
2
3
4
5
6
7
8
9
10
11
12
13
14
18
19
20
21
22
<стиль>
.tablecenterheadCSS th {
text-align: center;
}

Имя игрока в крикет Название команды Очки
Шикхар Дхаван Индия 87
Юврадж Сингх Индия 97
Выход
Имя игрока в крикет Название команды Оценка
Шикхар Дхаван Индия 87
Юврадж Сингх Индия 97
В приведенном выше примере содержится ячейка
, весь текст которой выровнен по центру.Если вы хотите централизованно выровнять ячейку с помощью CSS, вам нужно читать дальше.
Как выровнять текст таблицы всех ячеек
централизованно с помощью CSS
Помимо выравнивания текста в верхней ячейке таблицы, вы также можете выровнять текст ячейки
таблицы по центру с помощью CSS. Чтобы выровнять текст ячейки по центру, вы должны использовать приведенный ниже пример.
Проверить это вживую
Имя игрока в крикет Название команды Оценка Шикхар Дхаван Индия 87 Юврадж Сингх Индия 97 Шикхар Дхаван Индия 87
1
2
3
4
5
6
7
8
9
10
11
12
13
14
18
19
20
21
22
23
24
25
26
27
<стиль>
.tablecenterCSS td {
text-align: center;
}

Имя игрока в крикет Название команды Очки
Шикхар Дхаван Индия 87
Юврадж Сингх Индия 97
Шихар Дхаван Индия 87
Выход
Имя игрока в крикет Название команды Оценка
Шикхар Дхаван Индия 87
Юврадж Сингх Индия 97
Шикхар Дхаван Индия 87
В приведенном выше примере все ячейки
таблицы выравниваются по центру путем добавления свойства CSS text-align: center .

ХИТ	МЕСЯЦ	ОБЩЕЕ УВЕЛИЧЕНИЕ
324 497	Январь 1998 г.	–
436 699	февраль 1998 г.	112 172

Пекин	Иллинойс
Сан-Хосе	Калифорния

внутри каждого из них. `<таблица>`
Текст	Текст
Текст	Текст

Имя игрока в крикет	Название команды	Оценка
Шикхар Дхаван	Индия	87
Юврадж Сингх	Индия	97

CSS: Оформление HTML таблиц — рамка, размер, выравнивание текста

Рамка таблицы

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

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

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

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

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

3.7. Выравнивание таблицы и содержимого ячеек. HTML, XHTML и CSS на 100%

Читайте также

3.5. Ширина и высота таблицы и ячеек

3.8. Объединение ячеек таблицы

Выравнивание данных

Создание ячеек таблицы: <fo:table-cell>

Выравнивание и распределение

Изменение ячеек таблицы

Выравнивание

Выравнивание

Вкладка Выравнивание диалогового окна Формат ячеек

Выравнивание объектов

Выравнивание данных

Выравнивание

Изменение ячеек таблицы

Изменение ширины элементов таблицы, выравнивание

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

Расположение таблицы по центру html

См. также

Автор и редакторы

Темы рецептов

О сайте

Задача

Решение

Основные тонкости

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

Выравнивание по центру в ячейках

Таблицы | Основы вёрстки контента

Базовая вёрстка таблиц

Выравнивание контента по вертикали

Заголовки таблицы

Объединение строк и столбцов

Дополнительные материалы

Остались вопросы? Задайте их в разделе «Обсуждение»

Нашли опечатку или неточность?

Что-то не получается или материал кажется сложным?

Об обучении на Хекслете

Создание таблиц в HTML | Шнайдер блог

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

Основные тонкости

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

Выравнивание по центру в ячейках

Задача

Решение

| Справочник HTML

Синтаксис

Закрывающий тег

Атрибуты

Стилизация по умолчанию

Различия между HTML 4.01 и HTML5

Пример использования:

Спецификации

Поддержка браузерами

Учебник HTML

html — Как выровнять элементы td по центру

Как центрировать таблицу в HTML

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

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

HTML

Таблица CSS в центре a

Пример

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

CSS: Центрированные таблицы

Проверка центрирования

Тест центрирования

Проверка центрирования

Тест центрирования

Как центрировать текст в строке HTML-таблицы

Создать HTML¶

Добавить таблицу CSS¶

Пример центрирования текста в строке таблицы с помощью свойства CSS text-align: ¶

Результат¶