25.05.2017   2658
Как выровнять таблицу по центру в HTML

Способы выравнивания таблицы по центру в 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: center; // Для выравнивания содержимого таблицы по центру по вертикали
    }
</style>

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

КОММЕНТАРИИ

 redsh26 2017-05-26 15:14:38
+2

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

Ответить
 leno4ka 2017-05-26 18:15:05
+1

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

Ответить
 trialex3 2017-08-06 01:01:41
+1

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

Ответить
Чтобы написать комментарий нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности