Tables are the recommended way to display tabular data. Tabular data is any data that is best navigated in two dimensions: where there are relationships both vertically along columns and horizontally in rows. Tables are not a good idea for layout, however.

Well-coded tables are important for screen reader users so they can read, navigate, and understand the data.

Creating a pseudo-table for data by 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 the data much harder to understand for a screen reader user.


Top ↑

Incorrect: a table purely for layout

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

Top ↑

Incorrect: divs show tabular information

// Incorrect: don’t use meaningless divs to display meaningful data.
    <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>

Top ↑

Correct: a table to show tabular information

// A data table in it’s most basic form.
    <caption>The cities of WordCamp Europe</caption>

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. WAI has a good and complete tutorial on how to do complex tables.

Top ↑

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?

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 ↑

Responsive tables

One of the major limitations to tables is that they are difficult to make responsive. There are ways to do it while retaining accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (

Last updated: