Table

Tables present structured data that needs clear relationships between rows and columns.

Considerations

Use semantic row and cell elements (<thead>, <tbody>, <tfoot>, <th>) so assistive technologies can interpret the table correctly. Add a scope attribute to cells that label the row or column. Usually this is <th scope="col"> for column headers and <th scope="row"> for row headers. <tfoot> is often used to indicate a summary or total.

When possible, use a <caption> element to describe the table. This must be the first child of the <table> element. It gives the table an accessible name.

Examples

Basic Table

<table>
  <caption>
    Monthly spending
  </caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>March</td>
      <td>$30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$210</td>
    </tr>
  </tfoot>
</table>

Striped Table

This example uses .table--striped for alternating row backgrounds that improve readability for large datasets.

<table class="table--striped">
  <caption>
    Monthly spending
  </caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>March</td>
      <td>$30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$210</td>
    </tr>
  </tfoot>
</table>

Overflow Scroll

Wrapping a table in .table-outer-wrapper and .table-inner-wrapper allows tables to scroll horizontally on smaller viewports, ensuring content remains accessible without breaking the layout.

<div style="max-width: 300px">
  <div class="table-outer-wrapper">
    <div class="table-inner-wrapper" tabindex="0">
      <table class="table--striped">
        <caption>
          Monthly spending with overflow container for smaller viewports
        </caption>
        <thead>
          <tr>
            <th scope="col">Category</th>
            <th scope="col">Planned</th>
            <th scope="col">Actual</th>
            <th scope="col">Difference</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Rent/Mortgage</td>
            <td>$1,200</td>
            <td>$1,200</td>
            <td>$0</td>
          </tr>
          <tr>
            <td>Utilities</td>
            <td>$150</td>
            <td>$140</td>
            <td>-$10</td>
          </tr>
          <tr>
            <td>Groceries</td>
            <td>$400</td>
            <td>$420</td>
            <td>+$20</td>
          </tr>
          <tr>
            <td>Transportation</td>
            <td>$100</td>
            <td>$80</td>
            <td>-$20</td>
          </tr>
          <tr>
            <td>Entertainment</td>
            <td>$200</td>
            <td>$220</td>
            <td>+$20</td>
          </tr>
          <tr>
            <td>Miscellaneous</td>
            <td>$100</td>
            <td>$90</td>
            <td>-$10</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>