Как выравнивать данные в таблице
Основные правила выравнивания в таблицах, чтобы вы могли не читать Мильчина.
Если спросить любого редактора, как сделать хорошую таблицу, он ответит: «Посмотри в Мильчине». Одна глава про таблицы в справочнике занимает 128 страниц. Не каждый помнит её наизусть или готов прочитать, чтобы сделать одну таблицу.
Я собрал основные правила выравнивания в таблицах. Они могут отличаться от мнения Мильчина, это мой опыт и интерпретация
1 Всё выровнять по левому краю колонок
Сначала нужно выровнять всю таблицу по левому краю. Это такой вариант по умолчанию. Получится что-то вот такое:
После этого нужно изменить выравнивание в колонках, в которых содержатся нетекстовые данные.
2 Числа выровнять по правому краю
Если в таблице есть числа, то скорее всего их будут сравнивать. В этом случае сравнивать будет удобнее, если числа выровнять поразрядно (каждый разряд ровно друг под другом). Чтобы сделать такое, числа нужно выровнять по правому краю.
В идеале нужно сами числа выровнять между собой по правому краю, а блок чисел оставить выровненным по левому с заголовком колонки. Как-то так:
Из-за сокращенного заголовка колонки «Кол-во» идея может быть не до конца понятна, вот:
Если технически выровнять так сложно, то есть простое и надежное решение — выровнять текст по правому краю целиком:
Примечания, что считать числом. Такое выравнивание нужно применить только к числовым данным одной величины, именно их имеет смысл сравнивать друг с другом. Если числа в колонке обозначают разные величины, то им нужно оставить выравнивание по левому краю. Если в колонке показываются инвентарные номера, индексы, номера паспортов, IP-адреса, то им нужно оставить выравнивание по левому краю, — эти значения вряд ли необходимо смотреть поразрядно.
3 Диапазоны выровнять по разделителю
Дальше нужно найти колонки с диапазонами и похожими конструкциями, когда в ячейке пара чисел написана через какой-нибудь разделитель: 1…15, 1—15, 1 / 15, 1 из 15, и т. д.
Такие колонки нужно выравнивать по разделителю:
Диапазоны нанизываются на разделитель как на ось:
4 Значки выровнять по центру
Если есть колонки, в которых отображаются отдельные символы, пиктограммы, эмодзи, то их лучше выровнять по центру. Часто это колонки с плюсами и минусами в качестве отметки о наличии какой-то функции.
Если в такую колонку иногда пролезает текст, например, нет данных, то текст выравнивается по правилу колонки, а не по левому краю как текст. И наоборот, если в текстовой или числовой ячейке стоит прочерк, то его нужно выравнивать не как значок, а как как другие значения в колонке:
Если делать наоборот: текст в колонке значков выравнивать по левому краю, а значки в колонке с текстом по центру, то будет некрасиво:
На этом с выравниванием всё
5 Включить моноширинные (табличные) цифры
Внимательные люди могли заметить, что числа, выровненные по правому краю, не выровнялись поразрядно. Вот та таблица:
Числа 1113 и 3800 не совпадают разрядами. Это произошло из-за того, что в шрифте Интер, которым набрана таблица по умолчанию стоят пропорциональные цифры. Моноширинные цифры в шрифте есть, но их нужно включать отдельно (opentype-фичей).
Нужно проверить, что в колонках, в которых нужно поразрядное выравнивание, показываются именно моноширинные цифры. Для инвентарных номеров, индексов можно оставить и пропорциональные. Если включить моноширинные цифры, то с поразрядным выравниванием все станет хорошо:
Ниже показана разница моноширинных (сверху) и пропорциональных цифр. Обратите внимание, что в во второй таблице 1113 уместились в три разряда числа 3800. Сравнивать числа, набранные пропорциональными цифрами будет сложнее.
Шпаргалка
Чтобы каждый раз не перечитывать пост, вот шпаргалка:
Что почитать
- Подборка советов Ильи Бирмана про таблицы: bureau.ru/soviet/selected/dima-shishkin/birman-pilit-tablitsy/
- Глава 13. Таблицы и выводы, «Справочник издателя и автора», Мильчин и Чельцова
Попытался оставить комментарий, но все взорвалось, и текст комментария пропал. Табличные данные не видно, если включена системная темная тема на маке — черные буквы на почти черном фоне.
Есть такое, к сожалению я не пойму как сделать переключение версий картинок для темной и светлой темы.
Видимо, добавлю им светлый фон.
Есть пример, как это все можно реализовать для таблиц в вебе?
Подскажите, пожалуйста, как правильно выравнивать дату и время вот в таком формате:
18.09.19 13:57 ?
18.09.19 13:57
01.09.19 13:57
Такие варианты я бы выравнивал как числа
18.09.19 13:57
1.09.19 13:57
Такие варианты я бы выравнивал как текст.
Во втором случае бы подумал о переходе к записи 1 сен 2019, 13:57
Убрать повторения единиц, отделить шапку линиией в пол пикселя — станет совсем хорошо.
Подскажите, пожалуйста, как правильно выравнивать такие числа:
541 661.28
545 667.1
548 905.32
Общая рекомендация — выравнивать поразрядно, как на первой картинке (будет ниже).
Если поразрядно не получается, то можно дописать ноль справа у среднего числа и выровнять по правому краю, получится тоже поразрядно. Строго говоря это неправильно, потому что 545 667.1 и 545 667.10 — разные числа, но вдруг вам так можно.
При выравнивании по правому или левому краю не забудьте включить моноширинные цифры.
Статья плохая, информация недоставерна
Информатичка не оценила, поставила четвёрку (((