HTML Tables: When to Use Them and How to Make Them Accessible

Comparison tables are some of the most useful content on the web: they answer “which one should I choose?” at a glance, and Google often shows them as featured snippets. But tables built carelessly are a nightmare on phones and for screen readers. Here’s how to do them properly.

When to use a table#

A well-structured table#

<table>
  <caption>WordPress hosting types compared</caption>
  <thead>
    <tr>
      <th scope="col">Hosting type</th>
      <th scope="col">Typical monthly cost</th>
      <th scope="col">Best for</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Shared</th>
      <td>Low</td>
      <td>New, small sites</td>
    </tr>
    <tr>
      <th scope="row">Managed WordPress</th>
      <td>Medium</td>
      <td>Business sites that need speed and support</td>
    </tr>
  </tbody>
</table>

• <caption> gives the table a title that’s announced by screen readers.
• <th scope="col"> marks column headers; scope="row" marks row headers.
• <thead> and <tbody> separate headers from data.

Tables and SEO#

• Real HTML tables can appear as table featured snippets for comparison queries.
• Clear headers make the data easy for search engines and AI systems to extract accurately.
• Keep the table near the heading that introduces it, and summarise the key takeaway in text too.
• Avoid images of tables — they can’t be read, translated or quoted.

Making tables work on mobile#

The simplest robust approach is to let wide tables scroll horizontally inside a wrapper:

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 560px; border-collapse: collapse; }
th, td { padding: 10px 14px; text-align: left; }

Other options include stacking each row as a card on small screens (good for 2–4 columns), or freezing the first column with position: sticky. This theme makes article tables scroll horizontally on small screens automatically.

Styling for readability#

• Left-align text, right-align numbers so digits line up.
• Use subtle row borders or zebra stripes; avoid heavy grid lines.
• Give header cells a distinct background.
• Keep cell text short; move long explanations below the table.
• Check colour contrast in both light and dark mode.

Tables in WordPress#

The block editor’s Table block outputs clean HTML with thead when you enable “Header section” in the block settings. For large data tables with sorting and filtering, plugins like TablePress work well — just check their output is real HTML and not loaded entirely with JavaScript.