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 CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. will make that data much harder to understand for a screen reader user.

Choose your HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. 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>

HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. 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 W3CW3C The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.https://www.w3.org/. 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
  • Using <summary> in a <table> is deprecated in HTML5 and should no 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