Как выровнять текст в таблице CSS

В CSS существует множество способов выравнивания текста в таблице. Рассмотрим несколько основных способов.

  1. Горизонтальное выравнивание текста
table {
  border-collapse: collapse;
  width: 100%;
}

td {
  text-align: center;
}

Здесь мы используем свойство text-align: center;, которое выравнивает текст ячеек таблицы по центру. Вы также можете использовать значения left и right для выравнивания текста по левому или правому краю соответственно.

  1. Вертикальное выравнивание текста
td {
  vertical-align: middle;
}

По умолчанию, текст в ячейках таблицы выравнивается по верхнему краю ячейки. С помощью свойства vertical-align мы можем выровнять текст по центру или по нижнему краю ячейки.

  1. Выравнивание текста по границе ячейки
td {
  padding: 10px;
  border: 1px solid black;
}

td:first-child {
  text-align: right;
}

td:last-child {
  text-align: left;
}

С помощью css селекторов :first-child и :last-child, мы можем выравнивать текст по границе ячейки, например, для создания списка с отступом. Здесь мы выравниваем текст первой ячейки по правому краю, а последней — по левому краю.

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

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как выровнять текст в таблице CSS

Наш специалист свяжется с вами в ближайшее время и уточнит детали