Таблицы

На таблицы распространяются типичные отличия между productivity и media: скругления углов, внутренние и внешние отступы, типографика.

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

Автомобильная марка / салон Средняя ставка по кредиту Документы, необходимые для оформления кредита Спецпредложения
Toyota 19-25% Паспорт + водительское удостоверение, без справки На автомобили дороже 1 млн рублей ставка по кредиту — 17,5%
Hyundai 20,3-22% Паспорт + водительское удостоверение Нет
Voklswagen 19-26% Паспорт + водительское удостоверение, без справки Нет
Спецификации
Состояние Параметр Значение
normal
/* Общее обрамление таблицы */
border: 0 solid $colorBorder;
/* Ячейка таблицы */
padding: $paddingTableHorizontal $paddingTableVertical;
border: 0 0 $sizeBorderWidth 0 solid $colorBorder;
color: $colorText;
font-size: $fontBody;
line-height: $fontBodyLine;
/* Заголовок таблицы */
/* Основные свойства наследуются от стандартной ячейки */
border: 0 solid $colorBorder;
background-color: $colorBgSecondary;
font-weight: $fontTableHeader;
text-transform: $fontTableHeader;
 
0 solid rgba(0, 0, 0, 0.12)
 
??? 16px /* Договориться про вертикальные отступы */
0 0 1px 0 solid rgba(0, 0, 0, 0.12)
#333333
15px
20px
 
 
0 solid rgba(0, 0, 0, 0.12)
#f0f0f0
700
uppercase
hover /* Состояния нет. Взаимодействие идёт с контентом таблицы */
active /* Состояния нет. Взаимодействие идёт с контентом таблицы */
disabled /* Состояния нет. Взаимодействие идёт с контентом таблицы */

Автомобильная марка / салон Средняя ставка по кредиту Документы, необходимые для оформления кредита Спецпредложения
Toyota 19-25% Паспорт + водительское удостоверение, без справки На автомобили дороже 1 млн рублей ставка по кредиту — 17,5%
Hyundai 20,3-22% Паспорт + водительское удостоверение Нет
Voklswagen 19-26% Паспорт + водительское удостоверение, без справки Нет
Спецификации
Состояние Параметр Значение
normal
/* Общее обрамление таблицы */
/* Основные свойства наследуются от стандартной таблицы */
border: $sizeBorderWidth 0 0 $sizeBorderWidth solid $colorBorder;
/* Ячейка таблицы */
/* Основные свойства наследуются от стандартной ячейки */
border: 0 $sizeBorderWidth $sizeBorderWidth 0 solid $colorBorder;
/* Заголовок таблицы */
/* Основные свойства наследуются от стандартного заголовка таблицы */
border: 0 $sizeBorderWidth $sizeBorderWidth 0 solid $colorBorder;
 
1px 0 0 1px solid rgba(0, 0, 0, 0.12)
 
 
0 1px 1px 0 solid rgba(0, 0, 0, 0.12)
 
 
0 1px 1px 0 solid rgba(0, 0, 0, 0.12)
hover /* Состояния нет. Взаимодействие идёт с контентом таблицы */
active /* Состояния нет. Взаимодействие идёт с контентом таблицы */
disabled /* Состояния нет. Взаимодействие идёт с контентом таблицы */



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

Автомобильная марка / салон Средняя ставка по кредиту Документы, необходимые для оформления кредита Спецпредложения
Toyota 19-25% Паспорт + водительское удостоверение, без справки На автомобили дороже 1 млн рублей ставка по кредиту — 17,5%
Hyundai 20,3-22% Паспорт + водительское удостоверение Нет
Voklswagen 19-26% Паспорт + водительское удостоверение, без справки Нет
Спецификации
Состояние Параметр Значение
normal
/* Общее обрамление таблицы */
/* Основные свойства наследуются от стандартной таблицы */
/* Ячейка таблицы */
/* Основные свойства наследуются от стандартной ячейки */
/* Заголовок таблицы */
/* Основные свойства наследуются от стандартного заголовка таблицы */
border: 0 0 $sizeBorderWidthBar 0 solid $colorAccent;
 
 
 
 
 
 
0 0 4px 0 solid #ff4f00
hover /* Состояния нет. Взаимодействие идёт с контентом таблицы */
active /* Состояния нет. Взаимодействие идёт с контентом таблицы */
disabled /* Состояния нет. Взаимодействие идёт с контентом таблицы */