Browse CSS

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.