Чат Telegram
Группа ВКонтакте
Как выровнять таблицу по центру в 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
Онлайн-уроки в удобное время!
Начать бесплатно
Комментарии (14)
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
loader
Есть вопрос по программированию?
Здесь быстро ответят!
Задать вопрос
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
loader
Форум веб-разработчиков
Здесь все!
Перейти
loader
Логические задачи с собеседований