Таблицы Table

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

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

Как улучшить таблицу:

1. Оставьте только те данные, которые необходимы для поиска и сравнения информации либо для выбора строки. Всё остальное уберите на страницу с полной информацией.
2. Определите оптимальный порядок столбцов и их ширину. Если пользователь будет сравнивать значения из разных столбцов, они должны стоять рядом.
3. Проверьте, можно ли содержимое двух-трёх столбцов склеить в одной ячейке. Это сделает таблицу компактнее.
4. Определите ключевое поле и поставьте его в начало. Возможно, его стоит выделить более крупным кеглем или жирным начертанием.
5. Посмотрите, можно ли данные столбца представить в виде иконки, тега, статуса. Или каким-то другим способом передать ту же информацию более наглядно и эффективно.
6. Второстепенные данные уведите на второй план, покрасив в серый. Важно, чтобы серого текста в таблице было меньше, чем чёрного.

Хорошие и плохие примеры:

Хороший пример

Название выделено жирным, у региона есть название и код, этап показан токеном с цветовым кодированием и добавлены аватарки пользователя

Плохой пример

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

Хороший пример

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

Шапка таблицы

Если таблица простая и в ней легко ориентироваться, то шапку можно не добавлять.

Если шапка есть, то текст в заголовках столбцов выравнивается так же, как в ячейках.

От контента шапка отделяется разделителем в 1 px, цвет — #E6E6E6.

Цвет текста в шапке таблицы — #757575.

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

Подробнее — в гайдах «Табличные фильтры» и «Панель массовых действий».

Наведение на заголовок

При наведении появляется ховер-эффект #F0F0F0, а текст и иконка становятся чёрными #222222

Сложный заголовок

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

Залипание шапки

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

Контент таблицы

Линейки

Между строк может быть разделитель цвета #E6E6E6

Но такие линии создают дополнительный шум, поэтому используйте их только при необходимости. Например, когда без них таблица «разваливается».

Хороший пример

Эта таблица хорошо выглядит и без линий

Хороший пример

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

Выравнивание в столбцах

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

Каждый третий разряд отбивайте пробелом. Заголовок в таких столбцах также выравнивается по правому краю.

Неправильно

Так сравнивать числа сложно

Правильно

А так проще: копейки над копейками, десятки над десятками и так далее

Выравнивание в строках

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

Неправильно

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

Правильно

ИНН-КПП выровнены по базовой линии первой строки

Текстовые значения

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

Хороший пример

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

Используйте одно правило округления.

Неправильно

У целых значений не показана дробная часть, из-за этого их тяжело сравнивать

Правильно

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

Когда единица измерения у всех данных в колонке одинаковая, выносите её в заголовок колонки, не повторяйте её в каждой ячейке.

Исключение — знак процента (%).

Не переносите числовые значения. Увеличьте ширину, измените порядок или округление.

Теги

Теги помогают обозначать статусы, этапы, принадлежность к группе.

Используйте приглушённые цвета с кодом 10 из общей палитры, выравнивайте тег по базовой линии строки.

Текст в тегах должен быть короткий и понятный. Не делайте многострочные теги.

Неправильно

Правильно

Иконки и картинки

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

Для более быстрого считывания статуса документа можно размещать иконку и статус рядом с названием.

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

Не делайте иконки/картинки слишком маленькими или большими. Работайте в границах высоты строки набора.

Хороший пример

По иконкам быстро можно понять статус отчёта

Наведение на строку

При наведении курсора на строку появляется ховер-эффект #F0F0F0.

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

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

Выбор строк

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

После выделения одной строки начинаем показывать чекбоксы у всех остальных строк. Это облегчает множественный выбор и дополнительно даёт понять, что пользователь находится в режиме массовых действий.

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

Выбранная строка при наведении меняет свой цвет на #E6E6E6.

Подробнее — в гайде «Панель массовых действий».

Одиночные действия со строкой

Быстрые действия появляются при наведении курсора на строку. Иконки располагаются в конце строки.

Иконки выравниваются по высоте строки и могут градиентом скрывать часть контента при появлении.

Выносите в таблицу не более 3 действий, иначе делайте кебаб-меню.

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

Негативные действия при наведении стоит подсвечивать красным #FE4C4C.

Строка удаляется с анимацией:

1. Контент строки становится прозрачным: 100ms cubic‑bezier(0.5, 1, 0.89, 1)
2. Нижние строки сдвигаются на освободившееся место: 100ms cubic‑bezier(0.5, 1, 0.89, 1)

Кликабельная ячейка

Если в строке несколько независимых кликабельных ячеек, делайте их внешним видом ссылок.

Подвал

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

Если пользователю важно в любой момент видеть подвал, фиксируйте его при скролле.

Подробнее о связи подвала контента и подвала страницы — в гайде «Подвал».

Настройка вида

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

Готовые пресеты

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

Изменение происходит моментально, без дополнительных загрузок:

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

Не делайте много пресетов. Если в списке больше 3 — 4 вариантов, пользователю будет сложно выбрать подходящий вид.

Гибкая настройка

Если пресеты не покрывают все сценарии, добавьте гибкую настройку вида таблицы. Её можно использовать вместе с пресетами или без них. Разместите настройку в сайдпейдже или дроплисте.

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

Неправильно

Настройки всех элементов таблицы

Правильно

Настройка с готовыми пресетами и без элементов таблицы, которые пользователю не нужно отключать

Добавьте кнопку «Сбросить всё», чтобы пользователь мог быстро вернуться к виду по умолчанию.

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

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

Влияние настроек на фильтры

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

Хранение настроек

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