Table layout

What we check

We examine every table on the home page. We count it as a layout table if

• tables are nested inside each other,
• it is marked as pure presentation (role="presentation"), or
• it has no column headings, caption or table head, but contains entire page sections, such as headings, navigation, forms or embedded content.

If we find such tables, there is a warning.

Why it matters

In the early 2000s websites were built with tables: one row for the header, one column for the menu, one for the content. There was no better way at the time. Today this way of building causes several problems:

• On a smartphone: tables keep their columns side by side. Instead of the layout adapting to the narrow screen, everything becomes tiny or has to be scrolled sideways.
• For screen readers: blind people hear "Table with 3 columns and 12 rows" and then every cell individually. The context is lost.
• For Google and AI assistants: the structure of the page is hard to recognise. What is navigation, what is main content?
• For maintenance: changes to the layout are laborious, and modern design is hardly possible.

Sometimes layout tables also come from email templates that were copied onto the website, or from old editors that implemented columns this way.

How to fix it

Layout with CSS

Modern layouts use CSS Flexbox or Grid. They adapt automatically: on the desktop columns stand side by side, on a smartphone one below the other.

.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2rem; }

Tables for data

Keep tables for real data and give them column headings:

<table>
  <caption>Opening hours</caption>
  <tr><th>Day</th><th>Time</th></tr>
  <tr><td>Monday–Friday</td><td>8 am–6 pm</td></tr>
</table>

Old website

If the whole website is built with tables, a conversion is usually more laborious than a rebuild. A website builder such as Wix, Jimdo or Squarespace, or a CMS such as WordPress with a current theme, delivers a responsive layout out of the box.

Individual tables in the content

If a table was used in the editor to put an image and text side by side, replace it with a columns block. WordPress has the block "Columns" or "Media & Text" for this.

How to check it yourself

Right-click an area of the page and choose "Inspect". If <table>, <tr> and <td> appear above it in the element hierarchy although there is no data there, it is a layout table.

Frequently asked questions

May a website use tables at all?

Yes, for data: price lists, opening hours, technical details, comparisons. With column headings (th) they are understandable for everyone. Tables are only unsuitable as a frame for the page layout.

The website is old but looks good. Is a rebuild worthwhile?

A table layout is a clear sign that the technology dates from the 2000s. Usually other things are outdated too. Instead of a repair, a rebuild with a modern builder or CMS is often worthwhile.