# Table: Стилизация

## Обзор

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

## Публичные CSS-переменные

| Переменная | Где используется | Назначение |
| --- | --- | --- |
| `--border-color` | `TableRow` | Разделители строк. |

## Переменные частей

- `Table`: обрабатывает флаги раскладки на всю ширину и высоту.
- `TableRow`: задаёт границы строк через `--border-color`.
- `TableHeading`: отвечает за отступы и выравнивание ячеек заголовков.
- `TableData`: отвечает за отступы и выравнивание ячеек данных.

## Взаимодействие состояний и вариантов

- `dataAlign` меняет выравнивание и ячеек заголовков, и ячеек данных.
- `edgePadded={false}` убирает краевые отступы у первой и последней ячейки, чтобы выровнять таблицу с окружающей раскладкой.
- `fullWidth` и `fullHeight` влияют на раскладку, но не меняют семантическую структуру.

## Примеры

```css
.brandTable {
  --border-color: var(--separator-opaque);
}
```

```css
.compactTable td,
.compactTable th {
  padding: var(--spacing-4);
}
```

## Не переопределяйте

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