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 ↑
// 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: 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 ↑
// 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 ↑
- A caption functions like a heading for a table
- <summary> is deprecated in HTML5 and should not longer be used.
Top ↑
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 ↑
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 ↑
Top ↑
