Table

Styled table with header formatting and optional variants.

Basic Table

Name	Value
Alpha	100
Beta	200

Base

Class	Description
`.ui-table`	Base class

Compact

Class	Description
`.ui-table--compact`	compact

Striped

Class	Description
`.ui-table--striped`	striped

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-table-font-size`	`var(--ui-font-size-sm)`	Font size
`--ui-table-border-color`	`var(--ui-color-border)`	Border color
`--ui-table-header-bg`	`var(--ui-color-bg-subtle)`	Header background color
`--ui-table-cell-padding-x`	`var(--ui-space-2)`	Cell padding x
`--ui-table-cell-padding-y`	`var(--ui-space-1)`	Cell padding y

Variants

Token	Value
`--space-1`	0.5rem
`--space-2`	1rem

Item	Status
Task 1	Done
Task 2	Pending
Task 3	Done

<table class="ui-table ui-table--compact">
  <thead>
    <tr>
      <th>Token</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <code class="ui-code ui-code--sm">--space-1</code>
      </td>
      <td>0.5rem</td>
    </tr>
    <tr>
      <td>
        <code class="ui-code ui-code--sm">--space-2</code>
      </td>
      <td>1rem</td>
    </tr>
  </tbody>
</table>
<table class="ui-table ui-table--striped">
  <thead>
    <tr>
      <th>Item</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Task 1</td>
      <td>Done</td>
    </tr>
    <tr>
      <td>Task 2</td>
      <td>Pending</td>
    </tr>
    <tr>
      <td>Task 3</td>
      <td>Done</td>
    </tr>
  </tbody>
</table>