Чат PHP-разработчиков
Как выровнять таблицу по центру в HTML

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

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

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

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

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

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

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

<table style="margin: auto;">
    ...
</table>

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

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

Не менее часто требуется выровнять данные по центру ячейки. При этом существует три способа: горизонтальный, вертикальный и абсолютный. Из их названия понятно, по какой оси будет происходить центрирование. В любом случае используется тег <td>, отвечающий за конкретную ячейку в строке. Далее необходимо присвоить его атрибутам valign (вертикаль) и/или align (горизонталь) значение "center", в зависимости от вашей задачи:

<table>
    <tr>
        <td valign="center" align="center">Текст по центру ячейки</td>
    </tr>
</table>

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

<style type="text/css">
    table {
        align: center; // Для выравнивания содержимого таблицы по центру по горизонтали
        vertical-align: middle; // Для выравнивания содержимого таблицы по центру по вертикали
    }
</style>

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

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
Читайте также
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
Комментарии (10)


redsh26

Отлично, наконец нашлась годная информация по выравниванию таблиц, которую реально применить на практике. Всё описано просто, понятно и доступно для понимания даже новичку. Спасибо!

ivashkevich

Рад слышать! Изучайте на здоровье.

leno4ka

Ощущение как будто на курс в реале сходила. Спасибо!

trialex3

ошибка в тексте? vartical-align: center;
МБ vЕrtical-align: center;?

ivashkevich

Добрый день! Исправил, спасибо!)

Timon

Отличный курс! Спасибо за полезную информацию! Однако, тут небольшая ошибка: <style type="text/css"> table { align: center; // Для выравнивания содержимого таблицы по центру по горизонтали vertical-align: center; // Для выравнивания содержимого таблицы по центру по вертикали } </style> у vertical-align будет значение middle (проверил через htmlbook.ru)

ivashkevich

Спасибо, исправил =)

elgeykrisa@gmail.com

спасибо наконец получилось!!=)

ivashkevich

Пожалуйста)

Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Популярное за сутки
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Сейчас читают
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Новые статьи
Логические задачи с собеседований