Tables

Can I use tables? Can I use tables?

Yes, absolutely – if you want to display data. You should not use tables for layout, but you definitely must use tables to display tabular information in a meaningful way.

Well-coded tables are important for screen reader users to read, navigate, and understand the data in the table.

Creating a table for data using divs and CSS will make that data much harder to understand for a screen reader user.

Choose your HTML based on semantics: use a table to show tabular information.

Top ↑

For example For example

Incorrect: a table purely for layout Incorrect: a table purely for layout

// Incorrect: don’t use a table for layout only, for example in forms.
<table>
    <tr>
        <td><label for="blogname">Site Title</label></th>
        <td><input name="blogname" type="text" id="blogname" value="" /></td>
    </tr>
[...etc…]
</table>

Top ↑

Incorrect: divs show tabular information Incorrect: divs show tabular information

// Incorrect: don’t use meaningless divs to display meaningful data.
<div>
    <div class=”row”>The cities of WordCamp Europe</div>
    <div class=”row”><div class=”cell1”><strong>Year</strong></div><div class=”cell2”><strong>City</strong></div></div>
    <div class=”row”><div class=”cell1”>2017</div><div class=”cell2”>Paris</div></div>
    <div class=”row”><div class=”cell1”>2018</div><div class=”cell2”>Belgrade</div></div>
</div>

Top ↑

Correct: a table to show tabular information Correct: a table to show tabular information

// A data table in it’s most basic form.
<table>
    <caption>The cities of WordCamp Europe</caption>
    <tr><th>Year</th><th>City</th></tr>
    <tr><td>2017</td><td>Paris</td></tr>
    <tr><td>2018</td><td>Belgrade</td></tr>
</table>

Header cells must be marked up with <th>, and data cells with <td>. For more complex tables, you may need thead, colgroup, rowgroup, scope, id, and headers attributes. The W3C WAI has a good and complete tutorial on how to do complex tables.

Top ↑

Caption or summary? Caption or summary?

  • A caption functions like a heading for a table
  • <summary> is deprecated in HTML5 and should not longer be used.

Top ↑

Can we use role=presentation? Can we use role=presentation?

Yes, you can use the ARIA attribute role=presentation to tell a screen reader user that this is not a data table and let it read out like it’s text.

This works, but don’t use ARIA to fix broken HTML5. It’s a hack this way, not a best practice.

Top ↑

Complexity Complexity

The rule of thumb is: the simpler the better. If your table is going to be very complex, consider splitting it up into more tables or find a different way to organize your data. It will probably also be easier to read for sighted users.

Top ↑

Resources Resources

Top ↑

Responsive tables Responsive tables