Once upon a time, table design was web design. Before the elegance of CSS Grid or the flexibility of Flexbox, we built entire sites with <table>, <tr>, and <td> like it was second nature. They were the backbone of layout — the duct tape holding the early web together. But as web development matured, we traded layout tables for cleaner, more semantic code. Still, tables remain essential — not for layout, but for what they were truly meant to do: present data.
So, where do tables fit into modern, accessible web design? When are they appropriate, and how do we use them in a way that supports users of all abilities, including those using screen readers or keyboard navigation?
In this guide, revisit table design through a modern lens — not to reminisce about the old days of spacer GIFs and nested rows, but to examine how to use tables the right way today. Whether you’re structuring tabular data or dealing with legacy layouts, we’ll walk through practical techniques for designing and coding tables that are both functional and inclusive.
Understanding Tables in Web Design
Tables still serve a clear purpose in today’s web — when used thoughtfully. But there’s a key distinction: data tables are for presenting information, and layout tables… well, those belong in the same drawer as Netscape hacks and the blink tag. How you use them matters, especially for folks navigating with a screen reader or keyboard.
Understanding the difference is the first step toward solid, accessible table design that doesn’t leave users behind.
Data Tables
Need to show structured data like schedules, product comparisons, or sales reports? That’s what data tables were born to do. When used well, they make complex info digestible — like a well-organized spreadsheet that doesn’t make you want to flip your monitor.
Making Data Tables Accessible
Start with semantic HTML — <th> for headers, <caption> for context, and group rows and columns meaningfully. These tags are like orientation tools for assistive tech — they help users actually understand the structure, not just hear a blob of words.
Reading order is your next frontier. If your table reads like it was assembled after three espressos and a deadline, it’s time to regroup. Make sure users can follow the flow with no surprises.
And if you’re knee-deep in rowspans and colspans, it’s worth pausing to ask: “Is this actually helping, or am I just flexing?” Clean table design helps avoid this entirely.
Layout Tables
Let’s talk about the fossil in the room: layout tables. We all used them. Some of us even nested them. Some of us still wake up in cold sweats because of them.
Why They Were Used
Back in the day, if you wanted a three-column layout, you reached for a table. Pixel-perfect footer? Table. It was the best option we had — right up until CSS knocked politely and said, “I got this.”
Why It’s Time to Move On
CSS changed the game. Layout tables now clutter your markup, confuse screen readers, and break responsiveness faster than you can say “media query.” The result? A tangled mess that’s hard to debug and harder to maintain.
Golden rule: Tables for data. CSS for layout. Break this rule only under duress (or for archaeological purposes).
If you must touch layout tables, think of it less as designing a layout and more as preserving legibility. It’s a survival-style form of table design.
When You Have to Use Layout Tables
Sometimes, you inherit legacy code that’s more delicate than a house of cards. Or you’re working with a CMS that still thinks it’s 2003. When you’re stuck, the goal becomes minimizing the chaos.
Best Practices for Using Layout Tables (Responsibly)
- Skip semantic elements: Leave
<th>and<caption>out. They’ll only mislead screen readers. - Use
role= "presentation": This politely tells assistive tech, “Nothing to see here — just visuals.” - Keep content order logical: It might look fine, but hit the tab or turn on a screen reader. If it reads like a jigsaw puzzle, rework it.
- Make it responsive — sort of: You’re already doing something frowned upon. At least don’t let it collapse on mobile.
CSS to the Rescue
Need flexible, responsive, accessible layouts? CSS has your back. You’ve got two powerhouse options ready to roll.
CSS Grid Layout
CSS Grid is built for complex, two-dimensional layouts. It gives you surgical control over rows and columns without diving into the <td> abyss.
Heads-up: Keep your DOM order consistent with your visual order. Otherwise, assistive tech users will be piecing together your layout like a mystery novel.
CSS Flexbox
Flexbox handles one-dimensional layouts like a champ. Think nav bars, form groups, toolbars — anything that lines up in a row or column.
Just remember, Flexbox can reorder your layout visually, but screen readers still follow the source order. Rearranging things for aesthetics? Fine. Just don’t confuse your users while you’re at it.
Both of these tools help prevent misuse of tables and support better table design principles by removing the temptation to force non-tabular content into table markup.
Follow the Principles, Not Just the Code
Accessibility isn’t about ticking boxes — it’s about designing with real people in mind. Think about how someone actually experiences your content. No mouse. No visuals. Just structure, clarity, and flow.
If someone is using a screen reader, keyboard navigation, or sip-and-puff device, your clean CSS layout means nothing if your content order is a mess. Great table design considers these experiences from the start.
Key Guidelines from WCAG to Keep in Mind:
- Info and Relationships (1.3.1): Use markup to show how data connects. Don’t rely on appearance alone.
- Meaningful Sequence (1.3.2): Your content should flow in a way that makes sense, both visually and in the code.
Quick Recap: Best Practices
- Use tables only for tabular data — not layout, not nostalgia
- Mark up data tables semantically —
<th>,<caption>, proper scope - Use CSS (Grid or Flexbox) for layout — always
- Only use layout tables when you absolutely have no other option
- If you must use layout tables, strip out semantics and add
role=" presentation" - Don’t rely on automated tools alone — test with real assistive tech
Final Thoughts
The web’s grown a lot since the days of spacer GIFs and table-based layouts — and thankfully, so have our tools. We can build cleaner, more flexible, more inclusive sites with far less hassle than we could a decade ago.
So let’s do that. Use tables where they belong — to present data. Embrace modern CSS for everything else. And always remember: building for accessibility doesn’t slow you down. It just makes your work better.
And if you’re ever elbow-deep in a legacy layout table with seven levels of nested <tr>, know this: someone out there gets it. And they’re probably muttering “never again” right along with you — while dreaming of cleaner table design.