If you cut your teeth building for the web in the 90s and even into the 00s, then you probably learned to lay out your HTML pages using <table>s. As CSS support and techniques have caught up, tabled layouts have mostly gone the way of the font element.
There seems to be such a strong backlash against tables, however, that many developers won’t even use them when it is both semantically and structurally appropriate — such as marking up tabular data.
The table element represents data with more than one dimension, in the form of a table.
To explain it another way, if you are representing columns and rows of data then you probably should be using a table. If you find you are using images or other elements, then you are likely doing it wrong.
In addition, representing tabular data using other elements means you may be preventing users of assistive software, who already have experience reading tables, from being able to access the information in the same way.
Examples of the two methods I see most frequently to incorrectly mark up tables follow.
Instead the tables were presented as images with no useful alt text. While the article used an HTML5 figure, there was nothing to present the contents of the tables as plain text.
The problem was exacerbated by the fact that when the page was viewed on mobile devices, the automatic down-sampling of the .net Magazine CMS (I am assuming here) for the mobile version of the article resulted in images that were completely illegible. A traditional HTML table would not have suffered from that problem.
I figured I was on to something when my tweet drew some comments, though I don’t agree that it’s just bad alt text:
@aardrian they could have easily made the same mistake without HTML5, and likely would have. That’s just bad alt text :) /cc @rogerjohansson
To .net Magazine and the author’s credit, the images were replaced on both the main site and the mobile site within about 18 days of me mentioning it (which you can follow in the comments).
Tables As Any Other Element
I suspect some tables are put together using other HTML elements just to show off that the developer can do it. After all, If developers were thinking about the structural and semantic meaning of the content, then they surely wouldn’t use div and spans to mark up tabular data.
The web site for a two day responsive web design workshop, Build Responsively, includes a schedule on its Columbus event page. This schedule includes a column of times and a column of sessions. Each column has a heading and the rows have alternating background styles. In every visual sense, it’s a table of data.
Semantically and structurally, however, that’s not how it’s coded (which I discovered when I attempted to print the page). It’s a series of divs and spans inside an ordered list (I have also seen this done with definition lists). The first bullet even has the class “heading,” which is probably a good clue that this entire list could be a table and that “heading” could be a th.
This code block shows the event schedule HTML for context:
With all the push for hand-crafted HTML and CSS and the strong desire to show off what developers can do using HTML5 and assorted tricks, take a look at any grids you find yourself marking up. If you find you have columns of data, rows of data, headings for rows or columns, or are using any CSS table display properties, then you just might need to use a table instead.
Update: January 3, 2012
The article HTML5 caption element and headings explains that with HTML5’s acceptance of headings in captions on tables, it’s now possible for your data tables to fit into the heading navigation when accessed via a screen reader.
It depends on context. Is this really a data grid, like a file manager view? Or is this more of a gallery? Does the requirement for columns and rows come from the design or because the rows and/or columns each have labels?
My first reaction is that it probably doesn't qualify as a data table.
I remember that tweet :) I don't disagree with you, btw — it was more that I didn't agree with you saying it was an HTML5 misuse issue. Ultimately, it doesn't matter any more as the article is gone anyway :(