Skip to Main Content
Smashing CSS: Professional Techniques for Modern Layout
book

Smashing CSS: Professional Techniques for Modern Layout

by Eric A. Meyer
November 2010
Intermediate to advanced content levelIntermediate to advanced
300 pages
6h 1m
English
Wiley
Content preview from 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- ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

CSS3 Foundations

CSS3 Foundations

Ian Lunn

Publisher Resources

ISBN: 9780470684160Purchase book