бывает интересно встретить сразу несколько таблиц, созданных на основе одинаковых данных, и порассуждать об их отличиях.

вот, например, два варианта одного и того же — совместимости крови.
как думаете: в чём их разница? какая лучше? почему?

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

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

псевдотаблицу легко узнать уже по виду: в одной колонке — заголовок и много пустоты, в другой — наоборот много текста.

здесь это просто исправить: повторяющиеся элементы выносятся в заголовки, и сразу всё становится лучше.

результат — на соседней картинке, с учётом исправления нескольких неточностей. сравните насколько меньше она занимает места.

подробнее о псевдотаблице — в бесплатной главе нашего табличного курса:
https://www.igorshtang.ru/course/tables/lessons/tabulation/

нам часто пишут хорошие отзывы о курсе по таблицам, а мы почему-то скромничаем и не рассказываем об этом.
так что добавили несколько новых.

если задумываетесь о прохождении, почитайте, что говорят те, кто уже прошёл:
https://www.igorshtang.ru/course/tables/#reviews

а тем, кто пишет отзывы (не только нам, а вообще) — большое спасибо, это важно.

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

Мы удвоили количество отображаемых маршрутов. На 25% увеличили кегль. Перераспределили палитру, чтобы менее заметные цвета отвечали за отображение менее приоритетной информации. Подписи маршрутов теперь самые заметные, а не самые малозаметные элементы табло.

такие перевёрстки напоминают волшебные рассказы. сравните предыдущую цитату вот с этой:

Harry bent down, ducked under the tent flap, and felt his jaw drop. He had walked into what looked like an old-fashioned, three room flat, complete with bathroom and kitchen.

салават снова прислал интересную табличку, даже три:

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

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

но когда тебя чему-то научили, а рядом вроде такое же, а устроено по-другому, то сразу зависаешь и хочется спросить: вы меня зачем учили, если сами этими знаниями не пользуетесь?

если формат не подходит, то лучше вместо него использовать другой, а не какой-то похожий.

в общем, можно смело дублировать тут цены, а группировка похожего далеко не всегда упрощает восприятие.

а ещё можно можно разбивать большие блоки на блоки поменьше.

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

рубрика #кусочеккурса

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

в фигме, например, это делается в настройке шрифта:
type settings → details → numbers → style.

в css табличные цифры задаются с помощью свойства:
font-variant-numeric: tabular-nums;

курс «таблицы и прочие радости», глава «шрифт»: igorshtang.ru/course/tables