x
 
Павел Сикорский
27 января 2015

Здравствуйте, Илья!

Расскажите про вёрстку больших таблиц.

Как избежать горизонтальной прокрутки при работе с таблицами из 20 колонок?



Подумайте над оптимизацией структуры таблицы: разделите на несколько, объедините связанные колонки, выберите оптимальную ориентацию, вынесите общее за скобку.

Залипание

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

Как улучшить таблицу в угоду удобочитаемости и экономии места

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

Результаты мужского спринта 22 января в Антерсельве

Ещё хорошо подсвечивать строки большой таблицы при наведении.

Сокращение заголовков

Ширина таблицы часто тратится на шапку, в то время как данные висят в воздухе:


Тогда удаётся сузить таблицу, сократив заголовки:


«Средняя реализационная цена» превратилась в «Ср. цену». Можно оставить и просто «Цену». Если при сокращении теряется смысл, потерю можно восполнить в заголовке таблицы («Себестоимость и средняя реализационная цена продуктов растениеводства») или сопроводительном тексте («Цена рассчитана исходя из…»).

В этом примере ещё и единицы измерения переехали из заголовков в тело таблицы. Это иногда работает с короткими обозначениями единиц (₽, %, °), но в общем случае добавит мусора — будьте осторожны.

Агрессивный перенос

Взглянем ещё раз на таблицу с программой «Школы стажёров»:

Переделано в реальном времени на курсе

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

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

Микроформаты

Микроформаты помогают превратить несколько колонок в одну сложную:

Под общим заголовком Shooting показаны три колонки: количество промахов на первом и втором огневом рубежах и общее за гонку. Благодаря знакам + и = человек понимает, как связаны числа, и пояснение в заголовке не требуется. Аналогичный фокус используется в колонке World Cup: там есть количество очков, набранных в данной гонке; общий результат перед ней и после неё. Снова, связь между числами устанавливают знаки + и →.

Здесь сокращённые названия колонок раскрываются при наведении мыши:

Или пусть остаётся широкой

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

Ход мужского преследования 24 января в Антерсельве

Горизонтальная прокрутка здесь не мешает.

Интерфейс и информация — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Недавно всплыло

Нерешённая задача графдизайна. Медпункт 5 2 1 Диаграмма футбольных трансферов. Результат 5