Tables

Trace CSS styles native HTML tables in every build. Use a caption to name the table, column headers in thead, and rows in tbody. Add scope="col" to column headers and scope="row" to row headers.

#Default table

<table>
  <caption>Invoices</caption>
  <thead>
    <tr><th scope="col">Invoice</th><th scope="col">Amount</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>

Invoices
Invoice	Amount
INV-001	120.00
INV-002	45.50
INV-003	82.00

#Extension classes

The Full build adds these classes.

Class	Applies to	Effect
`trace-striped`	Table	Shades alternate body rows
`trace-hover`	Table	Highlights rows on hover or when they contain focus
`trace-compact`	Table	Reduces padding and font size
`trace-numeric`	Header or data cell	Aligns values to the inline end and uses tabular digits
`trace-table-wrap`	Wrapper	Allows a wide table to scroll horizontally

<div class="trace-table-wrap" tabindex="0" role="region" aria-label="Invoice amounts">
  <table class="trace-striped trace-hover trace-compact">
    <caption>Invoice amounts</caption>
    <thead>
      <tr>
        <th scope="col">Invoice</th>
        <th scope="col" class="trace-numeric">Amount</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>

Invoice amounts
Invoice	Amount
INV-001	120.00
INV-002	45.50
INV-003	82.00

See Table tokens for colors, borders, and spacing.