7. Convertible Tables

Strip the presentation from data tables, and refinish with CSS

In many of the previous examples, we’ve replaced nested table designs with minimal markup and CSS. But there are times when tables are the right tool for the job—for presenting data. Whether it be a table of financial data, statistics, or a comparison of information, a table is in these cases necessary and appropriate.

In this chapter we address styling the table. Instead of dovetailing the presentation in with the table’s data, we strip that presentation (the design) from the markup and move it to CSS. The result is less code, a more accessible table, and a flexible design that’s easily changed or updated.

A Common Approach

Just like with the other common components ...

Get Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS, Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.