Выравнивание текста в таблице HTML: простые способы с помощью CSS

Ровное выравнивание текста в ячейках таблицы улучшает внешний вид и читабельность табличных данных на веб-странице. Как же простыми средствами CSS выровнять содержимое ячеек? В этой статье мы разберем основные способы горизонтального и вертикального центрирования текста в таблицах.

Основы форматирования таблиц CSS

Прежде чем выравнивать текст в ячейках таблицы, нужно разобраться в базовой разметке и стилизации таблицы. Таблица в HTML создается с помощью тега <table>, строки задаются тегом <tr>, а ячейки - <td>. Заголовочные ячейки обозначаются тегом <th>.

Для красивого оформления таблиц обычно используются такие стили CSS:

• Границы ячеек и таблицы (border)
• Отступы внутри ячеек (padding)
• Выравнивание таблицы на странице (margin)

Ниже приведен пример простой таблицы с такой базовой стилизацией:

Горизонтальное выравнивание текста в ячейках

Для выравнивания текста по горизонтали в блочных HTML-элементах используется свойство text-align. У него есть несколько вариантов значений:

• left - выравнивание по левому краю
• right - выравнивание по правому краю
• center - центрирование
• justify - выравнивание по ширине

Это свойство применимо и к таблице целиком, и к отдельным ячейкам:

table { text-align: center; } td { text-align: left; } 

Благодаря этому можно гибко настраивать выравнивание.

Вертикальное выравнивание в ячейках

Для вертикального выравнивания текста в ячейках таблицы используется свойство vertical-align. У него три основных значения:

• top - выравнивание по верхнему краю
• middle - центрирование по вертикали
• bottom - выравнивание по нижнему краю

Например, чтобы центрировать текст в ячейке по вертикали:

td { vertical-align: middle; } 

Свойство vertical-align влияет на высоту всей строки таблицы. Это нужно учитывать при выравнивании ячеек разной высоты.

vertical-align легко комбинируется с text-align для выравнивания одновременно по горизонтали и вертикали.

Выравнивание с помощью тегов и атрибутов

Выравнивать содержимое ячеек можно также с помощью устаревших HTML-атрибутов valign и align. Например:

<td align="center" valign="middle">Текст</td>

Но предпочтительнее использовать стили CSS.

Внутри ячеек для выравнивания можно использовать и другие теги - например, <div> или <span>. Это дает еще большую гибкость.

Перенос длинных слов и текста в ячейках

Иногда в ячейках таблицы оказывается длинный текст, который не помещается по ширине и выходит за границы ячейки. В таких случаях помогают свойства word-wrap и overflow-wrap.

Свойство word-wrap: break-word; включает перенос длинных слов по слогам на несколько строк.

А overflow-wrap: break-word; разрешает переносить текст в любых местах, не только по границам слов.

Вертикальное выравнивание в многострочных ячейках

Если в ячейке таблицы текст занимает несколько строк, вертикальное выравнивание по vertical-align применяется к каждой строке.

Например, при vertical-align: top каждая новая строка будет выравнена по верхнему краю ячейки.

Выравнивание в таблицах без границ

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

Выравнивание текста внутри "невидимых" ячеек работает так же, как и в обычных таблицах.

Главное - правильно задать нужное выравнивание для каждой ячейки через CSS.

Адаптивное выравнивание

При адаптивной верстке часто нужно менять выравнивание текста в ячейках в зависимости от ширины экрана.

Это легко сделать с помощью медиа-запросов. Например, при ширине экрана больше 600px выровнять текст по левому краю, а на мобильных устройствах - по центру.

Выравнивание с помощью Flexbox

Современный метод выравнивания блоков на странице - Flexbox. С его помощью можно гибко управлять выравниванием колонок и строк.

Flexbox может быть альтернативой таблицам для некоторых случаев выравнивания блоков и текста внутри них.