Числа в таблице: выравнивание и табличные цифры
Числовые столбцы легче сравнивать, если значения выровнены последовательно, а единицы измерения указаны явно. Табличные цифры помогают сохранить одинаковую ширину знаков при поддержке шрифтом.
Назначение
Числовые столбцы легче сравнивать, если значения выровнены последовательно, а единицы измерения указаны явно. Табличные цифры помогают сохранить одинаковую ширину знаков при поддержке шрифтом.
Как это работает
Text-align:end выравнивает значения по концу строки с учётом её направления. Font-variant-numeric:tabular-nums выбирает табличные цифры, если они доступны. Это оформление не меняет сами числовые данные.
Пример
<style>.sizes{border-collapse:collapse}.sizes td,.sizes th{padding:.7rem;border-bottom:1px solid #aec1b6}.sizes .number{text-align:end;font-variant-numeric:tabular-nums}</style>
<table class="sizes"><caption>Учебные размеры файлов, КБ</caption><thead><tr><th scope="col">Файл</th><th scope="col" class="number">Размер</th></tr></thead><tbody>
<tr><th scope="row">styles.css</th><td class="number">8,50</td></tr><tr><th scope="row">cover.webp</th><td class="number">128,25</td></tr><tr><th scope="row">icon.svg</th><td class="number">2,00</td></tr></tbody></table>Что должно получиться
Значения с одинаковым количеством десятичных знаков удобно сравнивать по правому краю в русскоязычном документе. Заголовок поясняет единицы; числа служат иллюстрацией и не описывают реальные файлы сайта.
Граница применения и частая ошибка
Tabular-nums не добавляет нули и не выравнивает десятичные разделители у произвольных строк. Для локализованного форматирования исходных чисел нужен отдельный шаг. Не заменяйте отсутствующее значение нулём, если эти состояния имеют разный смысл.
Самостоятельная проверка
Добавьте отрицательное значение, большое число и строку «нет данных». Проверьте, остаётся ли сравнение понятным. Смените шрифт и объясните, почему запасной вариант оформления должен работать и без табличных цифр.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.