Tables in theme and plugin development

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 CSS will make the data much harder to understand for a screen reader user.

Examples

Incorrect: a table purely for layout

// Incorrect: dont 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>

Incorrect: divs show tabular information



// Incorrect: dont 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>

Correct: a table to show tabular information

// A data table in its 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.

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.

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 is text.

This works, but dont use ARIA to fix broken HTML5. Its a hack this way, not a best practice.

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.

Resources

WCAG Success Criteria for semantic HTML

1.3.1 Info and Relationships (Level A).

Semantic HTML in Standards and best practice, Frontend code.

Other resources

One of the major limitations to tables is that they are difficult to make responsive. There are ways to do it while retaining accessibility:

  • First published: October 10, 2025
  • Last updated: August 04, 2026
  • Edit article: Improve it on GitHub

Other pages in: Frontend code

Back to: Frontend code

Quick links and main topics

Quick links

Content

Disclaimer: This documentation is intended to help the WordPress community understand and implement accessible practices. It is not a replacement for the official Web Content Accessibility Guidelines. Please read the full disclaimer.

Back to top