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

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

1. Горизонтальное выравнивание текста

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  text-align: center;
}

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

2. Вертикальное выравнивание текста

td {
  vertical-align: middle;
}

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

3. Выравнивание текста по границе ячейки

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 для выравнивания текста в таблице. Вы можете комбинировать разные свойства и значение для создания нужного вам вида таблицы.