Can customers read your website tables on a phone?

A service comparison, delivery timetable or list of sizes can look tidy on a wide screen and become awkward on a phone. Before you add more columns, check whether a customer can find one answer without losing their place.

Start with a table that helps someone make a real decision. For example: which workshop runs on Saturday, how long does it last, and what should the visitor bring? The checks below are a practical starting point, not a full accessibility audit.

1. Give the table one clear job

Write down the question the table should answer. Then review each column against it. A workshop timetable might need the session name, day and duration. A long description of the tutor probably belongs in the session details instead.

Do not remove information that changes a customer’s choice. Move supporting explanations to a clear nearby section and link to it where useful. If there are only two short facts, a heading and a list may be easier to maintain than a grid.

2. Make the labels specific

Read the column headings without looking at the values. Would “Duration (minutes)” be clearer than “Time”? Would “Collection day” be clearer than “Available”? Use the same unit down each column, and explain any abbreviation before the customer has to guess.

Make empty cells deliberate. In a fictional workshop table, a dash could mean “not supplied”, “not needed” or “ask us”. Write the meaning in the cell or explain it immediately beside the table. Check that the explanation remains visible on a phone.

3. Use a real table with proper headers

A screenshot of a spreadsheet may look like a table, but it does not provide HTML table structure. Ask your editor or developer to mark header cells as headers and connect them correctly with the data. Making the first row bold is only a visual change.

The W3C tables tutorial explains how this structure gives screen-reader users context as they move between cells. A short caption can identify what the table covers. Keep the structure simple; merged cells and several levels of headings need more careful work.

4. Check the narrow-screen view

Open the published page on a phone in portrait view. Find a value in the last column, then identify its row and heading. Can you still tell what it means? Look for clipped text, overlapping labels and information that disappears at the edge.

Do not solve a wide table by making all the text tiny. Ask your developer whether the content can be simplified or whether the table needs its own horizontal scroll area. If scrolling is necessary, make it discoverable and test it with a keyboard as well as touch.

W3C’s explanation of reflow allows an exception for data tables that need a two-dimensional layout. That does not exempt the surrounding page or justify unreadable cell content. The rest of the page should still adapt as the viewing area narrows.

5. Test one customer task after editing

Choose a question with a known answer. For our fictional workshop, try: “Which Saturday session lasts 90 minutes?” Ask someone who did not build the page to find it. Watch where they hesitate without telling them which row to read.

• Check the answer on a phone and a desktop screen.
• Enlarge the page and confirm that content remains available.
• Use a keyboard to reach any links and operate any scrolling region.
• Check that notes, units and exceptions still match the values.
• Record the page, date, problem and person responsible for fixing it.

If your editor rearranges a table into cards on small screens, verify that every value keeps its label and meaning. A different layout still needs to preserve the relationships.

Keep the next update simple

Give one person responsibility for the table’s content. When a session, size or service option changes, check the live page again rather than relying on the editing preview. Save your test question so the next check starts with a real customer task.

For related checks, see our guide to using a website without a mouse. If a table on your site is difficult to use, contact Hobbit Web Design with the page link and the problem you found.