Encodera

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.

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

Короткий ответ

Выравнивание текста в ячейке задаёт text-align. Числа принято выравнивать по правому краю, чтобы разряды стояли друг под другом:

<style>
  table { border-collapse: collapse; }
  th, td { padding: 6px 12px; border-bottom: 1px solid silver; text-align: left; }
  .num { text-align: right; }
</style>
 
<table>
  <tr><th>Product</th><th class="num">Price</th></tr>
  <tr><td>Tea</td><td class="num">$3.50</td></tr>
  <tr><td>Coffee</td><td class="num">$12.00</td></tr>
</table>

Весь столбец сразу

Чтобы не ставить класс в каждую ячейку, выберите столбец по номеру через :nth-child:

<style>
  td, th { padding: 4px 12px; }
  td:nth-child(2), th:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; }
</style>
 
<table>
  <tr><th>Day</th><th>Visitors</th></tr>
  <tr><td>Monday</td><td>1,120</td></tr>
  <tr><td>Tuesday</td><td>98</td></tr>
</table>

font-variant-numeric: tabular-nums делает все цифры одинаковой ширины — колонки чисел выглядят ровнее.

По вертикали

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

Частая ошибка

Выравнивают столбец, задав text-align элементу <col> или <colgroup>. Колонкам можно задать только ширину, фон и рамку — выравнивание текста на ячейки через них не передаётся. Нужен селектор по ячейкам.

Функции из этого ответа

  • text-align — Выравнивание текста и строчного содержимого внутри блока по горизонтали.
  • vertical-align — Выравнивание строчного элемента по вертикали внутри строки или содержимого в ячейке таблицы.
  • :nth-child() — Выбирает детей по их номеру: третий, каждый чётный, каждый третий.
  • <td>, <th> — Ячейки таблицы: `<td>` — с данными, `<th>` — заголовочная.
  • font — Сокращённая запись, которая задаёт начертание, жирность, размер, высоту строки и семейство шрифта в одну строку.

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.