Responsive Data Tables: A Comprehensive List of Solutions

But the spec is wrong about that – its obsolete status is based on a misunderstanding of its purpose.

The summary attribute should describe the structure of the table, while the caption describes its content. A data table should have both.

So in this example, the summary would be something like “This table has a row for each country, and a column for each piece of data about that country”.

You should also have “scope” attributes on the TH cells :smile:

And I would strongly advise against that Foundation solution, because it has poor accessibility – splitting the table into two tables where the headers in one are undisplayed and the data in the other is undisplayed, means that a screenreader can’t get coherent data from either of the tables. The same applies to any solution that splits and hides the table content – the integrity of the data structure must be maintained.

3 Likes