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

Таблицы — отличный способ представить большие объемы информации в упорядоченном виде. Данные о продажах, посещаемость веб-страниц, тенденции фондового рынка и оценки учащихся — примеры информации, часто представляемой в табличной форме.

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

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

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

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

Исходный код HTML для приведенной выше таблицы выглядит следующим образом.

<table style="border:1px solid black">
  <tr>
    <td><b>HITS</b></td>
    <td><b>MONTH</b></td>
    <td><b>TOTAL INCREASE</b></td>
  </tr>
  <tr>
    <td>324,497</td>
    <td>January 1998 </td>
    <td style="text-align:center">-</td>
  </tr>
    <tr>
    <td>436,699</td>
    <td>February 1998</td>
    <td style="text-align:center">112,172</td>
  </tr>
</table>

Чтобы центрировать эту таблицу, вам нужно добавить ;margin-left:auto;margin-right:auto;  в конец атрибутов стиля в теге <table> . Разметка таблицы следующая.

<table style="border:1px solid black;margin-left:auto;margin-right:auto;">

Как показано выше, изменение атрибутов стиля в теге <table> приводит к центрированию таблицы на странице, как показано ниже.

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

намекать

Вы можете добавить параметры к атрибутам стиля в теге <table>, чтобы сделать таблицу более привлекательной. Добавьте отступы: 2 пикселя и интервал между границами: 20 пикселей, добавьте интервал между точками данных и границами для удобочитаемости.