Twenty-plus years ago, tables were the main way web pages were created in HTML. It gave web builders consistent control of constructing pages with some “design.” No longer did sites only have to be top-to-bottom in a linear manner — they could be set up with columns that align left-to-right and top-to-bottom. Back then, it was seen as a huge breakthrough.
Tables, however, were never designed to lay out pages and, in fact, have all sorts of problems when used that way today. It was a convenient hack, but at the time, a very welcome one, particularly for those trying to achieve a super-specific layout that previous ways couldn’t handle.
Fast-forward to modern days and it’s now obvious that were tons of issues with the table layout approach. Accessibility is a big one.<table>, <th>, <tr> and <td> elements aren’t exactly accessible, especially when they’re nested several levels deep. Screen readers — the devices that read web content and serve as a measure of accessibility compliance — struggle to parse them into cohesive blocks of content. That’s not to say tables are bad; they simply were never intended as a layout mechanism.
Check out this table layout. Feel free to run it through VoiceOver or whatever screen reading software you have access to.
Yes, that example looks very much like a typical website layout, but it’s crafted solely with a table. You can see how quickly it becomes bloated and inaccessible the very moment we start using it for anything other than tabular data.
So after more than 20 years of being put through the ringer, you might think we should avoid tables altogether. If you’ve never shipped a table-based layout, you’ve undoubtedly heard war stories from those of us who have, and those stories are never kind. It’s like we’ve sort of made tables the “Internet Explorer of HTML elements.”
But that’s not totally fair because tables do indeed fill a purpose on the web and they are indeed accessible when they are used correctly.
Tables are designed to handle data that is semantically related and is best presented in a linear-like format. So, yes, we can use tables today in the year 2020, and that will likely continue to be true many years from now.
Here’s a table being used to display exactly what it’s intended to: tabular data!
With the push toward web standards in the early 2000s, tables were pushed aside as a layout solution in favor of other approaches, most notably the CSS float property. Designers and developers alike rejoiced because, for the first time, we had a true separation of concerns that let markup do the markup-y things it needs to do, and CSS to do the visual stuff it needs to do. That made code both cleaner and way easier to maintain and, as a result, we could actually focus on true standards, like accessibility, and even other practices, like SEO.
See (or rather hear) the difference in this example?
Many of us have worked with floats in the past. They were originally designed to allow content to flow around images that are floated either to the left or right, and still be in the document flow. Now that we’ve gotten newer layout features — again, like grid and flexbox — floats, too, have sort of fallen by the wayside, perhaps either because there are better ways to accomplish what they do, or because they also got the same bad rap as tables after being (ab)used for a long time.
But floats are still useful and relevant! In fact, we have to use them for the shape-outside property to work.
A legitimate float use case could be for wrapping content around a styled <blockquote>.
CSS features like grid, flexbox, and multicolumn layouts are among the wonderful tools we have to work with these days. With even more layout possibilities, cleaner and more accessible code, they will remain our go-to layout approaches for many years to come.
No hacks or extra code in this flexbox example of the same layout we’ve looked at throughout this article:
So, next time you find yourself considering tables or floats, reach for them with confidence! Well, when you know the situation aligns with their intended use. It’s not like I’m expecting you to walk away from this with a reinvigorated enthusiasm for tables and floats; only that, when used correctly, they are perfectly valid techniques, and even continue to be indispensable parts of our overall toolset.
You could just use tables in the markup and set it to display grid in CSS. You get the appropriate html markup with good styling features. You might need to use display: contents for tbody, tfood and trs.
Technically it’s possible, but it may have terrible accessibility implications in current browsers: https://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html
Could be wrong, but if you set the display property on table elements, you loose the semantic values, and the table possibly wouldn’t read out like a table. If I recall, there are other strange css gotchas that apply to tables that break the screen reader’s ability to read the table as intended.
But you have lots of unnecesary wrapper tags: table and th.
With divs you can have less wrappers.
Also you need to write more code to disable all styling in tables, div by default doesn’t have anything exept display:block
Thanks .. this was a cute recollection of the past!
Tables are still extremely useful, I’d say required, for laying out email.
Wringer. Like on your great grandma’s washing machine. She would put the clothes through it before hanging them out to dry.
As noted in other comments, CSS display properties will break table semantics. This is a problem for data tables. If, however, you are talking about layout tables, then you have two things to worry about:
A. You would be using the wrong element (though adding
role="presentation"to the<table>can save you from a WCAG SC 1.3.1 Info and Relationships failure); andB. Reading order can get messed up when the table is linearized (WCAG SC 1.3.2 Meaningful Sequence), though for the super simple example above it is already in good shape.
Those who have to support tabled layout in email as well as accessibility still toil with these 1990s- and 2010s-era fixes.
Separately, I recommend Léonie Watson’s post and video How screen readers navigate data tables if you have no prior experience.
Wrote a similar article in 2009 (https://developer.cmzmedia.com/?p=71#more-71). We need to realize there is a proper, intended use for tables. Thanks for adding to the voice of reason.
Here is a brief excerpt:
I am surprised that in 2009 there are still people in the web development world who don’t understand the proper use of HTML tables.
With the economy the way it is I have a trickle of freelance web development work but still need to land a full time gig. I contact many companies about jobs they have posted but rarely get any sort of response. A few days ago I actually received a response from one company that may shed some light on what other, non-responding companies could be thinking. After this company checked my resume online they wrote back and said:
It did not matter to them that my site did not use HTML tables for page layout but only for presenting tabular data. All that mattered to them was that somewhere along the line they had heard the vague idea tossed about that “tables are bad” and they took that idea and ran with it without ever finding out the truth of the matter.