Tables

Tables shine when you need to present dense, comparable data—think schedules, price grids, inventories, and research results. Use them to reveal relationships across rows and columns, not to lay out a page; each column should have a clear heading, and every cell should align to a single idea so readers can scan without guesswork.

Structure tables semantically with headers, summaries, and predictable state styling so screen readers and keyboard users get the same clarity as sighted users. Pair responsive patterns—like horizontal scrolling, wrapping labels, or stacked layouts on small screens—with concise copy so the data stays legible across breakpoints.

Basic tables rely on a well-formed skeleton: use <thead> for column headings, <tbody> for the core data, and <tfoot> for summaries or repeated headers. Give every header cell a scope that matches its role, keep columns consistent in type (no mixing currencies with text), and order rows by the dimension that helps readers make the fastest comparisons.

Additional notes: avoid using tables for layout, keep numeric columns right-aligned, and choose concise labels to prevent wrapping overload. Provide captions or summaries for complex datasets, ensure adequate contrast for striped or bordered variants, and expose keyboard-focus styles so interactive cells (like sortable headers) remain discoverable.

<table>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>...</th>
      <th>...</th>
      <th>...</th>
    </tr>
  </tfoot>
</table>

Striped tables use alternating row backgrounds to reduce eye strain and help readers track across wide datasets. They work best for long lists where horizontal scanning is frequent; keep the stripe subtle enough to avoid visual noise, and pair it with clear hover and focus states so keyboard navigation still feels anchored.

<table class="striped"></table>

Bordered tables delineate each cell with lines, making it easier to read dense numerical or form-like data. Use them when the grid structure needs to be unmistakable—financial reports, matrix comparisons, or audit logs—but keep borders lightweight and consistent so the table doesn’t overpower the surrounding typography.

<table class="bordered"></table>

Outlined tables frame the grid with a clear outer boundary while keeping the interior lighter, giving grouped data a defined footprint without excessive lines. Reach for this style when you want to set a table apart from adjacent content—cards, callouts, or mixed media—yet still keep the cells readable and the header hierarchy obvious.

<table class="outlined"></table>