Tables

Tables use a single border color, monospace column headings, and enough cell padding to stay readable without turning into cards.

Markup

Use a caption, a thead, and scope attributes so the table works with assistive technology.

<table>
  <caption>Quarterly totals</caption>
  <thead>
    <tr>
      <th scope="col">Quarter</th>
      <th scope="col">Revenue</th>
      <th scope="col">Change</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Q1</th>
      <td>$24,000</td>
      <td>+8%</td>
    </tr>
  </tbody>
</table>

Live example

Cells align to the start by default. Use text-align on a cell or column when numbers need a different alignment.