Smashing CSS: Professional Techniques for Modern Layout

Chapter 6. TABLES

I KNOW, I KNOW—you've been hearing for years now that Tables Are Evil, and that nobody should ever use them in page layout. And that's broadly true: Tables shouldn't be used for layout. On the other hand, laying out tables is a fine and often overlooked pursuit. After all, sometimes you have a table of data that you need to present. No sense doing so half-heartedly!

In this chapter, you explore ways to use table structure to your styling advantage as well as turning tables into entirely different visualizations, like maps or bar graphs. Hopefully by the time you're done, you'll see that tables are just like any other collection of markup—a rich source of styling possibilities.

HEAD, BODY, FOOT

HTML defines three elements that serve to group rows within tables: thead, tbody, and tfoot. Perhaps unsurprisingly, these represent the head, main body, and footer of the table.

Here's a stripped-down table structure using two of these row groupers.

<thead>
<tr>...</tr>
</thead>
<tbody>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>

These elements impart more structure to your tables, which is nice from a semantic point of view, but the nicer thing is that you can use them to uniquely style elements within the table header as opposed to its main body (see Figure 6-1). Thus, you might center column headings (which live in the thead) while right-aligning row headings (those in the tbody).

thead th {text-align: center;}
tbody th {text-align: right;}

Figure 6.1. Right- ...