Table

For data that is genuinely tabular. Always a caption, always header scopes.

When not to use

For layout, ever. For a list of label and value pairs, use the summary list.

Passport fees
Type	Validity	Fee	Status
Standard, 32 pages	5 years	35,000	Available
Standard, 64 pages	10 years	70,000	Available
Official	5 years	0	By request

Show HTML

<div class="ag-table-wrap ag-mb-0" role="region" aria-label="Passport fees" tabindex="0">
  <table class="ag-table ag-table--striped">
    <caption>
      Passport fees
    </caption>
    <thead>
      <tr>
        <th scope="col">Type</th>
        <th scope="col">Validity</th>
        <th scope="col" class="ag-table__numeric">Fee</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Standard, 32 pages</th>
        <td>5 years</td>
        <td class="ag-table__numeric" data-docs-money="35000">35,000</td>
        <td><span class="ag-badge ag-badge--success">Available</span></td>
      </tr>
      <tr>
        <th scope="row">Standard, 64 pages</th>
        <td>10 years</td>
        <td class="ag-table__numeric" data-docs-money="70000">70,000</td>
        <td><span class="ag-badge ag-badge--success">Available</span></td>
      </tr>
      <tr>
        <th scope="row">Official</th>
        <td>5 years</td>
        <td class="ag-table__numeric" data-docs-money="0">0</td>
        <td><span class="ag-badge ag-badge--warning">By request</span></td>
      </tr>
    </tbody>
  </table>
</div>

A table with two columns

A table takes the full width of the page. With two columns, such as a service and its fee, that puts the two a long way apart. Put a narrow table inside ag-prose, which holds it to the reading width.

Testing fees
Test	Fee
Household tap	Free
Borehole	2,500

Show HTML

<div class="ag-prose">
  <div class="ag-table-wrap ag-mb-0" role="region" aria-label="Testing fees" tabindex="0">
    <table class="ag-table">
      <caption>
        Testing fees
      </caption>
      <thead>
        <tr>
          <th scope="col">Test</th>
          <th scope="col" class="ag-table__numeric">Fee</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Household tap</th>
          <td class="ag-table__numeric">Free</td>
        </tr>
        <tr>
          <th scope="row">Borehole</th>
          <td class="ag-table__numeric" data-docs-money="2500">2,500</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Accessibility

The caption is the table's name. Screen readers list tables by caption.
Column headers get scope="col" and row headers scope="row", so a cell is read with its headers.
The wrapper scrolls sideways on narrow screens. It has tabindex="0" and a label so keyboard users can scroll it.
Numbers are right-aligned with ag-table__numeric and use tabular figures so columns line up.
Stripes (ag-table--striped) help with wide tables. Skip them for three columns or fewer.

Pack fields

currency.symbol, currency.position, currency.locale for the money column.