Browse Learn

Tables

Make information easy to compare. Use clear headings, consistent alignment, and readable spacing on desktop and mobile.

Start with a semantic table

Current projects
Project	Status	Owner
Brand direction	In progress	Design team
Website refresh	In review	Web team
Component library	Planning	Engineering

<div class="table-scroll" tabindex="0" role="region" aria-label="Project table">
<table>
  <caption>Current projects</caption>
  <thead><tr><th scope="col">Project</th><th scope="col">Status</th><th scope="col">Owner</th></tr></thead>
  <tbody>
    <tr><th scope="row">Brand direction</th><td>In progress</td><td>Design team</td></tr>
    <tr><th scope="row">Website refresh</th><td>In review</td><td>Web team</td></tr>
    <tr><th scope="row">Component library</th><td>Planning</td><td>Engineering</td></tr>
  </tbody>
</table>
</div>

Add complexity when it earns its place

Sorting, pagination, selection, and virtualization are not part of this foundation yet. Keep small datasets native; introduce those behaviors when a real use case and measured performance justify them.