Rose debug info
---------------

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шпаргалка

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

Что почитать

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

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

Михаил Озорнин 2019

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

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

monochromer 2019

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

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

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

Михаил Озорнин 2019

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

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

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

Харьков 2019

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

Наташа Семёнова 2019

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

Михаил Озорнин 2019

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

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

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

Илья Жмурик 2022

Статья плохая, информация недоставерна
Информатичка не оценила, поставила четвёрку (((