Smashing Html5

Chapter 6: Displaying Data with Tables

When HTML was in its infancy, the table element was used for the bulk of page formatting. The advent of CSS introduced a whole new set of rules for formatting and the table was abandoned as a formatting tool — and for good reason. However, certain table features in CSS3 have been reintroduced for specific types of formatting. So, although tables still are not general formatting tools, they have key functions for displaying data sets and for CSS3 general formatting.

This chapter explores the new CSS3 properties that you can use for accomplishing general formatting layouts, but the chapter’s main focus is on tabular data display. Tabular data is nothing more than data laid out in a table for ease of reading and not primary layout structures.

CSS3 Table Properties for HTML5

In a classic statement of double messages, the World Wide Web Consortium (W3C), the official body that sets the standards for HTML5, states emphatically, “Tables must not be used as layout aids.” Then in a note following that admonition, the same document states, “There are a variety of alternatives to using HTML tables for layout, primarily using CSS positioning and the CSS table model.”

What this means is that, in general, table elements should not be used for layouts other than tabular data. However, if you need tables in layouts, use CSS3 table properties.

The reason for this admonition is that when CSS became available, all layout was to be done with CSS. In order ...