Tables Used for Layout

Where these come from

Before styling could position things reliably, everybody built page layouts out of tables, and a great deal of the web was made that way for a decade.

Sites built in that era, pages copied from old templates, and content pasted out of a word processor or a spreadsheet all carry it forward.

It is also generated by some email tools and some older editors, which is why it appears on sites built recently.

The visitor sees a normal page and assistive technology sees a data table, which is where the problem lies.

What it sounds like

• Table with four columns, eleven rows.
• Row one, column one, before each cell.
• Content read in an unexpected order.
• Navigation announced as data.
• Nested tables, announced repeatedly.

The second is what makes it tiring rather than merely odd. Somebody hears positional announcements before every piece of content, on a page that has no rows and columns as far as anybody looking at it is concerned.

The question to ask

Which decides what to do about any table.

Is this information that belongs in rows and columns, where the row and the column both mean something.

A price list with services down one side and options across the top is a genuine table and should stay one.

A page where the left third is a photograph and the right two thirds is text is not a table, whatever it is built from.

Everything else follows from that answer, and it is usually obvious once the question is asked.

Most tables on small business sites are genuine data tables, and the layout ones are concentrated on older pages.

A worked example

A business had a services page built in 2011 and carried through two redesigns because nobody wanted to retype it.

Listening to it, the page announced a table with three columns and nine rows, then read each service preceded by its position.

The content was a list of services with a short description each, which is a list rather than a table.

Rebuilding it as headings and paragraphs took about forty minutes and also fixed how it behaved on a phone, where the three columns had been squeezing to unreadable widths.

The accessibility problem and the mobile problem had the same cause and the same fix.

That is the usual pattern with layout tables.

Rebuilding is usually the answer

Since the alternative is patching something that should not exist.

A layout table can be marked so that assistive technology ignores its structure, which stops the announcements and leaves everything else wrong.

The content still does not reflow on a phone, the columns still squeeze, and the page still cannot be edited easily.

So marking it is a stopgap for a page you cannot rebuild, and rebuilding is the actual fix.

Most affected pages are a list, a set of headings and paragraphs, or two columns that should stack, all of which are straightforward in any modern editor.

Find them without reading the code

Which is possible from the browser.

Narrow the window as far as it will go, or open the page on a phone.

A layout table generally refuses to reflow and produces horizontal scrolling or tiny columns, where a properly built page stacks.

That test finds most of them in a few minutes across a whole site.

A screen reader confirms it, and the narrow-window test is enough to build the list.

The pages affected are almost always the oldest ones, which narrows the search further.

Watch what gets pasted in

Since this keeps happening.

Content copied from a spreadsheet or a word processor into a page editor frequently arrives as a table, complete with formatting nobody wanted.

Paste as plain text and apply formatting in the editor, which takes slightly longer and avoids importing a structure.

Tell anybody else who adds content the same thing, since this is the main route by which new layout tables appear on modern sites.

Check any page somebody else has added in the last year.

Genuine tables need headers

Worth covering while you are looking at tables at all.

A real data table needs its header row marked as headers rather than as ordinary cells made bold.

That is what lets a screen reader say service, roof repair, price, four hundred dollars rather than reading a stream of unlabelled figures.

Most editors have a setting for it and most people have never used it.

On a price table that single change is the difference between usable and unusable.

Check the pages nobody has opened in years

Since that is where these concentrate and nobody looks.

A site that has been through two redesigns usually has a handful of pages carried across untouched, because rebuilding them was never worth the hour at the time.

Those are the pages most likely to contain a layout table, an old header, a missing image description, and a dead link, all at once.

Look at your least visited pages rather than your most visited ones for this particular problem, which is the reverse of the usual advice.

Several of them can probably be removed entirely, which is faster than fixing anything.

The counter-case

Rebuilding old pages has a cost.

A page that works acceptably and is rarely visited may not justify forty minutes, particularly on a site due for replacement.

Marking a layout table to be ignored is also a legitimate quick fix where rebuilding is genuinely not available.

And email templates are a separate world entirely, where tables remain the normal approach for good technical reasons.

Nothing here applies to what your email software produces, which is a different problem with a different history.

Narrow the window to find them, rebuild the ones people visit, and mark headers properly on any genuine table.

The check

1. Narrow the browser window.
2. Note pages that will not reflow.
3. Ask whether it is really a table.
4. Rebuild the ones people visit.
5. Mark the rest to be ignored.
6. Set headers on genuine tables.
7. Paste as plain text from now on.

Step one finds nearly all of them, since a layout table and a page that breaks on a phone are usually the same page for the same reason.

The data table problem is covered in a table that does not fit.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.