Tables in front-end development

Tables are the recommended way to display tabular data. Tabular data is any data best navigated in two dimensions: where there are relationships both vertically along columns and horizontally in rows. Tables are not intended for layout, however, and can make non-tabular content considerably harder to navigate.

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

This short video lets you listen to a screen reader announcing the information in a simple but well-structured table:

How to add tables in WordPress content is addressed in the “Content and Images” section Tables in the content.

The basics

Use an HTML table

Make sure you use an HTML <table>. Creating a pseudo-table for data by using div or li elements and CSS will make the data much harder to understand for a screen reader user. The page HTML table element on MDN explains in detail how to set up an HTML table.

Name the table

The <caption> describes the purpose of the table. It is read out by screen readers and gives the table its accessible name. If you must, you can hide a caption visually with CSS like the .screen-reader-text class.

If a caption is not possible, add a heading just above the table with a heading level that fits within the heading structure of the page.

Beware: Using <summary> in a table is deprecated in HTML5 and should no longer be used.

Use table headers

Use table headers to describe the columns and rows. Header cells must be marked up with <th>, and data cells with <td>. For more complex tables, you may need the thead, colgroup and rowgroup, elements and the scope, id, and headers attributes.

The W3C published an excellent tutorial for more complex tables on how to write tables at WAI/tutorials.

Note: 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 all users.

Examples

Don’t: use a table purely for layout. Using a table only for layout and not for displaying data makes the content hard to understand for screen reader user, because unrelated information about the table structure is also announced.

// 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>

Don’t: use DIVs and CSS only to show tabular information. This way the HTML doesn’t give any semantic information to screen reader users about how the data is structured. This relates to the WCAG success criterion 1.3.1 Info and Relationships for more info.

// 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>

Do: use an HTML table with table headers and table calls to show tabular information. With a caption to give the table its accessible name.

// 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>

Can we use role=”presentation”?

Yes, you can use the ARIA attribute role="presentation" or role="none" to tell a screen reader user that this is not a data table and let it read out like it is text. ARIA: presentation role on MDN gives more information.

Note: removing the semantics from an HTML table can be done, but don’t use ARIA to fix broken HTML. It’s a hack this way, not best practice. Use CSS instead for content layout. Adding the presentation role can be useful as a quick fix for legacy code, but not for new work.

The Table block in WordPress

The Table block in the WordPress Admin is, at the moment, limited to table headings at the top and rows for the data below.

Work is currently underway to improve and enhance the table block in the WordPress Admin. You can follow this in the GitHub issues labeled Block Table. There are plans for expanding the capabilities of the table block, assistance is welcome in making this happen.

Resources

Other resources

Tables can be challenging to make responsive. There are ways to do it while retaining accessibility:

  • First published: October 10, 2025
  • Last updated: September 14, 2026
  • Edit article: Improve it on GitHub
  • Contributors: Rian Rietveld, Joe Dolson.