Как выравнивать данные в таблице

Основные правила выравнивания в таблицах, чтобы вы могли не читать Мильчина.

Если спросить любого редактора, как сделать хорошую таблицу, он ответит: «Посмотри в Мильчине». Одна глава про таблицы в справочнике занимает 128 страниц. Не каждый помнит её наизусть или готов прочитать, чтобы сделать одну таблицу.

Я собрал основные правила выравнивания в таблицах. Они могут отличаться от мнения Мильчина, это мой опыт и интерпретация

1 Всё выровнять по левому краю колонок

Сначала нужно выровнять всю таблицу по левому краю. Это такой вариант по умолчанию. Получится что-то вот такое:

После этого нужно изменить выравнивание в колонках, в которых содержатся нетекстовые данные.

2 Числа выровнять по правому краю

Если в таблице есть числа, то скорее всего их будут сравнивать. В этом случае сравнивать будет удобнее, если числа выровнять поразрядно (каждый разряд ровно друг под другом). Чтобы сделать такое, числа нужно выровнять по правому краю.

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

Из-за сокращенного заголовка колонки «Кол-во» идея может быть не до конца понятна, вот:

Если технически выровнять так сложно, то есть простое и надежное решение — выровнять текст по правому краю целиком:

Примечания, что считать числом. Такое выравнивание нужно применить только к числовым данным одной величины, именно их имеет смысл сравнивать друг с другом. Если числа в колонке обозначают разные величины, то им нужно оставить выравнивание по левому краю. Если в колонке показываются инвентарные номера, индексы, номера паспортов, IP-адреса, то им нужно оставить выравнивание по левому краю, — эти значения вряд ли необходимо смотреть поразрядно.

3 Диапазоны выровнять по разделителю

Дальше нужно найти колонки с диапазонами и похожими конструкциями, когда в ячейке пара чисел написана через какой-нибудь разделитель: 1…15, 1—15, 1 / 15, 1 из 15, и т. д.

Такие колонки нужно выравнивать по разделителю:

Диапазоны нанизываются на разделитель как на ось:

4 Значки выровнять по центру

Если есть колонки, в которых отображаются отдельные символы, пиктограммы, эмодзи, то их лучше выровнять по центру. Часто это колонки с плюсами и минусами в качестве отметки о наличии какой-то функции.

Если в такую колонку иногда пролезает текст, например, нет данных, то текст выравнивается по правилу колонки, а не по левому краю как текст. И наоборот, если в текстовой или числовой ячейке стоит прочерк, то его нужно выравнивать не как значок, а как как другие значения в колонке:

Если делать наоборот: текст в колонке значков выравнивать по левому краю, а значки в колонке с текстом по центру, то будет некрасиво:

На этом с выравниванием всё

5 Включить моноширинные (табличные) цифры

Внимательные люди могли заметить, что числа, выровненные по правому краю, не выровнялись поразрядно. Вот та таблица:

Числа 1113 и 3800 не совпадают разрядами. Это произошло из-за того, что в шрифте Интер, которым набрана таблица по умолчанию стоят пропорциональные цифры. Моноширинные цифры в шрифте есть, но их нужно включать отдельно (opentype-фичей).

Нужно проверить, что в колонках, в которых нужно поразрядное выравнивание, показываются именно моноширинные цифры. Для инвентарных номеров, индексов можно оставить и пропорциональные. Если включить моноширинные цифры, то с поразрядным выравниванием все станет хорошо:

Ниже показана разница моноширинных (сверху) и пропорциональных цифр. Обратите внимание, что в во второй таблице 1113 уместились в три разряда числа 3800. Сравнивать числа, набранные пропорциональными цифрами будет сложнее.

Шпаргалка

Чтобы каждый раз не перечитывать пост, вот шпаргалка:

Что почитать

Поделиться
Отправить
Запинить
 3263   2 мес   верстка   таблица
Подписаться на блог…
5 комментариев
Олег Горбунов 2 мес

Попытался оставить комментарий, но все взорвалось, и текст комментария пропал. Табличные данные не видно, если включена системная темная тема на маке — черные буквы на почти черном фоне.

Михаил Озорнин 2 мес

Есть такое, к сожалению я не пойму как сделать переключение версий картинок для темной и светлой темы.

Видимо, добавлю им светлый фон.

monochromer 2 мес

Есть пример, как это все можно реализовать для  таблиц в вебе?

Сергій Зеленський 2 мес

Подскажите, пожалуйста, как правильно выравнивать дату и время вот в таком формате:
18.09.19 13:57 ?

Михаил Озорнин 2 мес

18.09.19 13:57
01.09.19 13:57
Такие варианты я бы выравнивал как числа

18.09.19 13:57
1.09.19 13:57
Такие варианты я бы выравнивал как текст.

Во втором случае бы подумал о переходе к записи 1 сен 2019, 13:57

Харьков 1 мес

Убрать повторения единиц, отделить шапку линиией в пол пикселя — станет совсем хорошо.

Наташа Семёнова 28 дн

Подскажите, пожалуйста, как правильно выравнивать такие числа:
541 661.28
545 667.1
548 905.32

Михаил Озорнин 28 дн

Общая рекомендация — выравнивать поразрядно, как на первой картинке (будет ниже).

Если поразрядно не получается, то можно дописать ноль справа у среднего числа и выровнять по правому краю, получится тоже поразрядно. Строго говоря это неправильно, потому что 545 667.1 и 545 667.10 — разные числа, но вдруг вам так можно.

При выравнивании по правому или левому краю не забудьте включить моноширинные цифры.

Популярное