Блог Михаила Озорнина: заметки с тегом таблица

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

Михаил Озорнин — Mon, 16 Sep 2019 01:32:37 +0300

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

Если спросить любого редактора, как сделать хорошую таблицу, он ответит: «Посмотри в Мильчине». Одна глава про таблицы в справочнике занимает 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. Таблицы и выводы, «Справочник издателя и автора», Мильчин и Чельцова

От таблицы к визуализации

Михаил Озорнин — Fri, 02 Feb 2018 12:53:57 +0300

Таблица по-моему — самый недооцененный формат представления информации. Я очень часто слышу «давай сделаем таблицу, а потом сделаем полноценную визуализацию». Почти всегда это полный бред.

На самом деле таблица достаточно удачный формат:

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

Наверное, таблицы многим кажутся скучными. Людям не хочется изучать данные и вглядываться в таблицу. Можно одновременно её «развеселить», сделать наглядней и повысить скорость считывания — для этого нужно таблицу раскрасить. Покажу на примерах.

После окончания 1-й ступени школы стажеров мне стало интересно сравнить свои результаты с результатами других студентов. Из таблицы общего рейтинга сложно понять, где я просел, а где нет. Цифры очень похожи, сложно заметить что-либо.

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

Расскраска по процентилям: 0,95 · 0,9 · 0,75 · 0,4 · 0,1

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

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

Такой способ часто называется скользящим окном:

Получилась такая таблица:

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

Аркадий отлично сдал вступительное, оно дало ему большой запаc. Я понемногу обгонял Андрея и Аркадия в тестах, но слил накопленное в курсовой. Леонид начал не с самых сильных позиций, но методичная работа подняла его в рейтинге. Евгений шел неравномерно: некоторые тесты лучше всех, а некоторые ощутимо хуже соседей.

От раскрашенной таблицы остается всего один шаг до теплокарты (heatmap) — графика, в котором области красятся в разные цвета. Вместо прямоугольных ячеек прямоугольной таблицы берутся ячейки другой формы и располагаются в каком-то естественном порядке: время, география, физическое положение.

Вот несколько примеров:

Даже график ниже — тоже таблица, хотя и не очень похоже, просто ячеек очень много и они очень мелкие:

Не стесняйтесь таблиц, это нормальный формат. Вот два совета бюро как сделать таблицы лучше:

Посмотрите ещё визуализацию прогресса студентов у Михаила Капанаги: http://burostat.ru