Как выровнять столбцы таблицы
Короткий ответ
Выравнивание текста в ячейке задаёт 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 — Сокращённая запись, которая задаёт начертание, жирность, размер, высоту строки и семейство шрифта в одну строку.