Table

A responsive table component for displaying tabular data. Built on native <table> with styled headers, rows, and cells.

Component Skill — components/table/component-skill.md

Native basis

<table> element with semantic <thead>, <tbody>, <tfoot>, and <caption>.

Web Platform APIs

<table> <thead> <tbody> <tfoot> <caption>

Classes

.table-container .table .table-caption .table-head .table-row .table-cell

Accessibility

• Use <th> with appropriate scope for column/row headers

• <caption> provides an accessible name for the table

• Screen readers announce table structure (rows, columns, headers)

Basic Table

Standard table with header and body rows. Uses .badge for status and .avatar for user display.

User	Status	Role	Amount
CNCody Lindley	Paid	Admin	$250.00
JDJordan Davis	Pending	Editor	$150.00
ASAlex Smith	Unpaid	Viewer	$350.00

<tr class="table-row">
  <td class="table-cell">
    <div style="display:flex;align-items:center;gap:0.5rem;">
      <span class="avatar" data-size="sm">
        <img class="avatar-image" src="..." alt="..." />
        <span class="avatar-fallback">CN</span>
      </span>
      <span>Cody Lindley</span>
    </div>
  </td>
  <td class="table-cell">
    <span class="badge" data-variant="default">Paid</span>
  </td>
</tr>

With Footer

Table with a summary footer row.

A list of your recent invoices.
Invoice	Status	Amount
INV001	Paid	$250.00
INV002	Pending	$150.00
INV003	Unpaid	$350.00
Total		$750.00

<table class="table">
  <caption class="table-caption">Recent invoices</caption>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>
    <tr class="table-row">
      <td class="table-cell" colspan="2">Total</td>
      <td class="table-cell" style="text-align:right">$750.00</td>
    </tr>
  </tfoot>
</table>

CSS view file

Styles for the table component. Uses design tokens for colors, spacing, and radius.

@layer components {
  .table-container {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    container-type: inline-size;
  }

  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: left;
    caption-side: bottom;
  }

  .table-caption {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    text-align: center;
  }

  .table-head {
    padding: 0.75rem 1rem;
    font-weight: 500;
    color: var(--muted-foreground);
    background-color: var(--muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--border);

    &:first-child {
      border-top-left-radius: var(--radius-lg);
    }

    &:last-child {
      border-top-right-radius: var(--radius-lg);
    }
  }

  .table-row {
    border-bottom: 1px solid var(--border);
    transition: background-color 150ms ease;

    &:last-child {
      border-bottom: none;
    }

    tbody &:hover {
      background-color: var(--muted);
    }
  }

  .table-cell {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    color: var(--foreground);
  }

  tfoot .table-row {
    background-color: var(--muted);
    border-top: 1px solid var(--border);
    font-weight: 500;
  }

  tfoot .table-cell:first-child {
    border-bottom-left-radius: var(--radius-lg);
  }

  tfoot .table-cell:last-child {
    border-bottom-right-radius: var(--radius-lg);
  }

  /* -- Container query: compact table in narrow containers -- */
  @container (max-width: 480px) {
    .table-head,
    .table-cell { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
  }
}