Tables Are for Data, Not Layout!

In the beginning days of the World Wide Web, when I had my nose in a "Teach Yourself HTML in 15 Days" book, the only way to layout pages was to put things in tables. Everything was in tables — headers, photos, even some content.

CSS changed all that, but only the most sophisticated designers knew how that worked, and most of us content contributors continued to use tables to lay out content. If we wanted, for instance, a phone directory, with the names on one side and the phone number a few spaces away, we'd use the old <td>content</td> trick.

During the responsive migration we've seen a lot of this. And even 2 or 3 years ago, this practice, if not accepted among the web experts, was tolerated. But now that mobile devices have limited our horizontal space, using tables has suddenly become a nuisance and even an accessibility problem.

If you want to show data — numbers, content that has to be in rows and tables (such as following a row and column to a cell with the corresponding data), use a table. Jim Thatcher uses this rule of thumb: "Data tables present things like financial results, rainfall totals by city and month, TV listings or bus schedules. For layout tables, information in various cells stands on its own. There are no headings — just table cells containing text and images. In contrast, headings are crucially important for understanding (or reading) data tables. That is the problem! Your tables must be designed and marked up in such a way as to ensure that assistive technology will know where the headings are and be able to announce them."

If you want to lay out content that properly displays data in a particular area of the screen, use CSS. If you're not familiar with it, just open a ticket with us and we'll help you.

Related to: 

• Development
• Data
• Content Strategy