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’s 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 we’ve explored, you can create stylish tables by using spacer GIF shims and additional table cells that exist solely for the purposes of the design. These extra presentational bits have nothing to do with the data being presented, yet they are tangled deep within the table’s code. The resulting table looks great in modern browsers—but from a flexibility and accessibility view it is quite a mess.