Таблицы

Используйте caption для названия таблицы, thead для заголовков столбцов и tbody для строк. Задайте заголовкам столбцов scope="col", а заголовкам строк — scope="row".

#Таблица по умолчанию

<table>
  <caption>Счета</caption>
  <thead>
    <tr><th scope="col">Счёт</th><th scope="col">Сумма</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">INV-001</th><td>120.00</td></tr>
    <tr><th scope="row">INV-002</th><td>45.50</td></tr>
    <tr><th scope="row">INV-003</th><td>82.00</td></tr>
  </tbody>
</table>

Счета
Счёт	Сумма
INV-001	120.00
INV-002	45.50
INV-003	82.00

#Классы расширений

Полная сборка добавляет следующие классы.

Класс	Элемент	Действие
`trace-striped`	Таблица	Выделяет чётные строки тела таблицы
`trace-hover`	Таблица	Подсвечивает строки при наведении или фокусе внутри строки
`trace-compact`	Таблица	Уменьшает отступы и размер шрифта
`trace-numeric`	Ячейка заголовка или данных	Выравнивает значения по концу строки и использует табличные цифры
`trace-table-wrap`	Обёртка	Позволяет прокручивать широкую таблицу по горизонтали

<div class="trace-table-wrap" tabindex="0" role="region" aria-label="Суммы по счетам">
  <table class="trace-striped trace-hover trace-compact">
    <caption>Суммы по счетам</caption>
    <thead>
      <tr>
        <th scope="col">Счёт</th>
        <th scope="col" class="trace-numeric">Сумма</th>
      </tr>
    </thead>
    <tbody>
      <tr><th scope="row">INV-001</th><td class="trace-numeric">120.00</td></tr>
      <tr><th scope="row">INV-002</th><td class="trace-numeric">45.50</td></tr>
      <tr><th scope="row">INV-003</th><td class="trace-numeric">82.00</td></tr>
    </tbody>
  </table>
</div>

Суммы по счетам
Счёт	Сумма
INV-001	120.00
INV-002	45.50
INV-003	82.00

Цвета, границы и отступы задают токены таблиц.