Tables

The HTML <table> element and related elements, as defined in the HTML specification, can be used to present tabular data. Historically, table markup has been misapplied for page layout purposes, affecting how assistive technologies handle tables.

Recommendations

Mark up data tables in a way that enables browsers and assistive technologies to identify them as such.

Why it matters

Assistive technologies such as screen readers identify tables as being either for data or for layout based on the HTML markup used. If a <table> with tabular data is poorly marked up and identifies as a layout table, then potentially useful structures for navigating and understanding the content may get ignored.

The following algorithm* is used to determine if a <table> has been marked up in a way that allows browsers and assistive technologies to identify it as a data table. Go through each check in turn, stopping when you reach a data table or layout table result.

*Algorithm:

  1. Table inside editable area is data table, always, since the table structure is crucial for table editing.
  2. Table having ARIA table related role is data table (like ARIA grid or treegrid).
  3. Table having ARIA landmark role is data table.
  4. Table having datatable="0" attribute is layout table.
  5. Table created by CSS display style is layout table.
  6. Table having summary attribute or legitimate data table structures is data table; these structures are:
    • <caption> element,
    • <col> or <colgroup> elements,
    • <tfoot> or <thead> elements,
    • <th> elements,
    • header, scrope or abbr attributes on table cell,
    • abbr element as a single child element of table cell.
  7. Table having nested table is layout table.
  8. Table having only one row or column is layout table.
  9. Table having many columns (>= 5) is data table.
  10. Table having borders around cells is data table.
  11. Table having differently coloured rows is data table.
  12. Table having many rows (>= 20) is data table.
  13. Wide table (more than 95% of the document width) is layout table.
  14. Table having small amount of cells (<= 10) is layout table.
  15. Table containing <embed>, <object>, <applet> of iframe elements (typical advertisements elements) is layout table.
  16. Otherwise it鈥檚 data table.

Examples

Recommended:

<style>
    table, th, td {
        border: 1px solid black;
    }
    table {
        border-collapse: collapse;
    }
</style>
<table>
    <caption>Premier League top scorers</caption>
    <thead>
        <tr>
            <th scope="col">Player</th>
            <th scope="col">Goals</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Vardy</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Aubameyang</td>
            <td>22</td>
        </tr>
        <tr>
            <td>Ings</td>
            <td>22</td>
        </tr>
    </tbody>
</table>

Not recommended:

<table>
    <tr>
        <td>Player</td>
        <td>Goals</td>
    </tr>
    <tr>
        <td>Vardy</td>
        <td>23</td>
    </tr>
    <tr>
        <td>Aubameyang</td>
        <td>22</td>
    </tr>
    <tr>
        <td>Ings</td>
        <td>22</td>
    </tr>
</table>

Testing

Find all <table> elements in the source code and follow the defined algorithm above to check that each identifies as a data table.