Aileron

Responsive tables: Dual header

Table

A table is a good way to display a large amount of information which has a variety of columns and data to show for each entry.

Usage

A table is best used for:

  • Showing large amounts of discrete data with many variables
  • Showing values across multiple categories and measures
  • Allowing for filtering and ordering when comparison is not a priority

Accessibility

  • The Design team needs to ensure that visual table headers for columns and rows are used, and that the tables are as simple as possible.

  • Ensure the correct semantic markup is used to construct tables: <th>, <td>, <thead>, <tbody>, and <tfoot> markup, with scope attributes, and that they’re not breaking what looks like one table into multiple tables. It is also important to provide a label for the table that can used by Assistive Technologies to distinguish one table from another in a list of tables on the page. This can be done by using the caption markup, using the summary attribute, or using aria-label/aria-labelledby/aria-describedby to convey the relevant information to adequately describe what is presented in the table. 

<h2 id="tblSummary" class="show-for-sr">Dual header table</h2>
<table aria-describedby="tblSummary">
    <caption class="show-for-sr"> Table with both row and column headers </caption>
    <thead>
        <tr>
            <th scope="col">
                Column heading 1
            </th>
            <th scope="col">
                Column heading 2
            </th>
            <th scope="col">
                Column heading 3
            </th>
            <th scope="col">
                Column heading 4
            </th>
            <th scope="col">
                Column heading 5
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" data-label="Heading 1" class="text-left">
                Row heading 1
            </th>
            <td data-label="Heading 2">
                Cell data
            </td>
            <td data-label="Heading 3">
                Cell data
            </td>
            <td data-label="Heading 4">
                Cell data
            </td>
            <td data-label="Heading 5">
                Cell data
            </td>
        </tr>
        <tr>
            <th scope="row" data-label="Heading 2" class="text-left">
                Row heading 2
            </th>
            <td data-label="Heading 2">
                Cell data
            </td>
            <td data-label="Heading 3">
                Cell data
            </td>
            <td data-label="Heading 4">
                Cell data
            </td>
            <td data-label="Heading 5">
                Cell data
            </td>
        </tr>
        <tr>
            <th scope="row" data-label="Heading 3" class="text-left">
                Row heading 3
            </th>
            <td data-label="Heading 2">
                Cell data
            </td>
            <td data-label="Heading 3">
                Cell data
            </td>
            <td data-label="Heading 4">
                Cell data
            </td>
            <td data-label="Heading 5">
                Cell data
            </td>
        </tr>
    </tbody>
</table>