Terrific Tables with CSS

This is an excerpt from my book, The Art & Science Of CSS, which is available for FREE download for the next 14 days only. Just follow @sitepointdotcom on Twitter, and you’ll receive your free PDF. It’s a Twitaway—a Twitter giveaway. Grab your copy now!

Have you waded knee-deep into web standards and thought you’d never again encounter a table element? Tables may have quickly been shrunk from as “bad” and “evil,” due to past abuses as a layout element, but the web standards movement hasn’t quite eliminated them from the planet. In fact, all the proliferation of semantic markup has done is send tables back to doing what they do best: presenting tabular data.

While tabular data (and the spreadsheet horrors of which it probably reminds you) may not always seem to be the most exciting material to work with, working with tables gives us plenty of opportunity to break out some serious CSS skills and create some fantastic looks—even while adding a dash of usability.

In this chapter, we’ll spend some time gaining an understanding of the elements that go into the construction of a table. After we set this foundation, we’ll look at the various styles that can be applied to those table elements. Along the way, we’ll deal with the cross-browser problems that are sure to crop up at this moment in Web history. With the theory out of the way, we’ll reach some practical examples of how our tables can be made both functional and attractive, and become acquainted with some of the niceties a dash of JavaScript can offer to the humble table. Finally, we’ll look to the future to predict how CSS 3 will affect our table-designing efforts.

The Structure

Styling tables can be liberating and confusing at the same time. While the multiple elements of which a table can consist offer plenty of ways to tie in some additional style, cross-browser inconsistencies and the lack of support for some truly useful CSS selectors can prove to be frustrating roadblocks.

However, before we tackle the intricacies of styling a table, let’s go over all the different elements of which a table might consist. Much of this will probably be familiar ground, but there might be a couple of new elements that you haven’t encountered before. My apologies if this groundwork comes off as a little dry, but it’s well worth your attention. Think of table-styling as a roller-coaster; you’ve gotta spend time on the long slow ascent before you get into the wild ride of styling!

I’m sure all the tables you’ve put together up until now utilized at least three basic elements: table, tr, and td—those are, respectively, table, row, and data cell. Likewise, you’ve probably used or seen the th, the header cell. Your markup may have looked something like this:

Example 1. table-example-basic.html (excerpt)


<table>
 <tr>
   <th scope="col">Person</th>
   <th scope="col">Web Site</th>
 </tr>
 <tr>
   <td>Bryan Veloso</td>
   <td><a href="http://avalonstar.com/">Avalonstar</a></td>
 </tr>
 <tr>
   <td>Dan Rubin</td>
   <td><a href="http://superfluousbanter.org/">
SuperfluousBanter</a></td>
 </tr>
</table>

Those aren’t all the elemental components of a table, though. We also have the thead, tbody, tfoot, caption, col, and colgroup elements at our disposal. All of these elements serve a very semantic purpose, each of which I’ll explain in a little detail so you’ll know what element to use and when. Each of these elements will provide a point where we can hook in some CSS styling to take our table from being a boring blackspot on our page to being a mini work of art in its own right.

The table Element

A table isn’t a table without a table element. It all starts from here.

A table has a number of attributes, such as border, cellpadding, and cellspacing, all of which you’ve used often if you’ve emerged from the tables-for-layout school of web design. We can ignore border and cellpadding for now, as we can replicate these attributes in CSS. One presentational attribute we’ll need to keep handy is cellspacing. Internet Explorer doesn’t support the ability to handle cellspacing via CSS, which means that if we need to maintain control, we’ll have to do it at the HTML level.

In addition to those attributes, we also have the frame attribute and the rules attribute. The frame attribute controls the display of the outermost border on the table. Its possible values are void, above, below, hsides, vsides, lhs, rhs, box, and border. void is the default value and will remove the border from around the table.

The border manifests itself differently in each of the four browsers I used to test this markup:

• Internet Explorer rendered a three-dimensional border on all sides.
• Opera rendered a solid black border.
• Firefox rendered a gray border on the left and top, with black on the right and bottom.
• Safari rendered no border at all.

When Internet Explorer is given a value other than void, this browser will incorrectly render a border on the cells inside the table as well. For example, if you specify lhs, the left side of each cell will be rendered:

<table frame="lhs">

Firefox and Opera render this markup correctly, as shown below:

Figure 1. Table with frame="lhs", as rendered by Internet Explorer, Firefox, Opera, and Safari

The rules attribute, which controls how the dividing borders of the table should be drawn, has five valid values: none, groups, rows, cols, and all. If a value of none—which is the default value—is specified, no lines will be drawn between the cells.

An interesting point to note here is that if you fail to specify a rules attribute, the border-style (using CSS) you’ve set for colgroup elements or col elements will be ignored. But if you specify a value of none, suddenly the border-style comes to life.

A value of groups will apply a border (gray and beveled in Internet Explorer, one-pixel and black in Firefox and Opera) around each thead, tfoot, tbody, and colgroup. Setting rules to rows or cols will apply a border between each respective row or column. all will apply a border around every cell. Again, if the frame attribute is omitted and rules is set to any value but none , IE breaks from the pack and displays a border around the entire table. As was the case with the frame attribute, Safari doesn’t support the rules attribute. Output rendered by the current versions of the four most common browsers can be seen in Figure 2.

Figure 2. Comparing frame="hsides" and rules="groups" applied to table

If you wish to use the frame or the rules attribute, it’s best to use them together, as frustrating rendering bugs can result if they’re used independently.