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. Name the table with a <caption> as its first child: screen readers read it out before the table, and it shows above it. Give every header cell a scope: col for a column heading, row for a heading at the start of a row. 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>
  <caption>...</caption>
  <thead>
    <tr>
      <th scope="col">...</th>
      <th scope="col">...</th>
      <th scope="col">...</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>

A <colgroup> after the caption groups columns that belong together, such as the figures of one year. Nausikaä draws a line between the groups. A <col> inside a group stands for a single column; give it the class highlight to mark that column. Cells with a background of their own, such as the rows of a striped table, cover the highlight, so use it on basic and bordered tables.

<table>
  <caption>...</caption>
  <colgroup>
    <col>
  </colgroup>
  <colgroup>
    <col>
    <col class="highlight">
  </colgroup>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

The highlight is for the eye only: screen readers don’t announce it. If the marked column matters, say why in the caption or in a heading cell, for example “Books 2026 (this year)”.