Таблицы

Выравнивание и отступы
Типографика
Фильтры
Поведение

Выравнивание и отступы

Левый столбец всегда выравнивается по левому краю. Правый столбец выравнивается по правому краю.

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

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

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

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

Для внешних отступов выбирайте те же размеры, что и для остальных интерфейсных блоков. Отступы справа/слева/сверху — 44px, отступ снизу — 48px.

Таблицы оформляются без разделителей. Исключение составляют названия столбцов — они могут отделяться от контента разделителем толщиной в 1px, цвет #E6E6E6, rgb (230, 230, 230).

Типографика

Для основного текста в таблицах желательно использовать шрифт Museo Sans 500. Столбцы с важной информацией могут выделяться — используйте для них Museo Sans 700, для отображения столбцов и строк с дополнительной информацией можно использовать Museo Sans 300.

Основной
текст
#000
rgb (0, 0, 0)
Вспомогательный
текст (Web)
#666
rgb (102, 102, 102)
Вспомогательный
текст (Apps)
#999
rgb (153, 153, 153)
Инвертированный
текст
#FFF
rgb (255, 255, 255)

Цвет текста в основных блоках всегда черный — #000, rgb (0, 0, 0), для дополнительной информации можно использовать серый цвет #666 (102, 102, 102).

Ошибки#D0021B
rgb (208, 2, 27)
Предупреждения#FF8C00
rgb (255, 140, 0)
Успешные
действия
#4BBD5C
rgb (75, 189, 92)

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

Для названий столбцов и строк в таблице лучше использовать Museo Sans 300 в цвете #666 (102, 102, 102). Для названий столбцов и строк используйте текст меньшего размера. Например: размер для основного текста внутри таблицы — 14px, для заголовка — 13px.

Фильтры

Фильтры располагаются в правой верхней части интерфейсного блока с отступами 44px от правого края и 44px от верхнего края.

Поведение

При наведении ячейка таблицы выделяется серым цветом #F5F5F5, rgb (245, 245, 245).

 

Далее «Табы»