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

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

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

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

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

ХИТЫМЕСЯЦИТОГО ПОВЫШЕНИЕ
324497Январь 1998
436699Февраль 1998112172

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

ХИТЫ МЕСЯЦ ИТОГО ПОВЫШЕНИЕ
324497 Январь 1998 -
436699 Февраль 1998 112172

Чтобы центрировать эту таблицу, вам нужно добавить: margin-left: auto; margin-right: auto; до конца атрибута стиля в

тег. Табличный тег будет выглядеть следующим образом.

Изменение атрибута стиля в

тег, как показано выше, приводит к центру таблицы на веб-странице, как показано ниже.

ХИТЫМЕСЯЦИТОГО ПОВЫШЕНИЕ
324497Январь 1998
436699Февраль 1998112172

Чаевые

Вы можете добавить параметры к атрибуту стиля в

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

Ссылка на основную публикацию