Terrific Tables with CSS

The Future

Styling our table was easy enough, but you might have found some of it redundant, such as applying a class to every second row to create a striped table. Luckily, within the drafts of the new CSS 3 specification lie a number of useful selectors that will simplify our lives considerably.

Browser Support Conundrum

Some browser developers like those behind Firefox and Opera have been pushing ahead and trying to include early support for many of the useful things within the CSS 3 specification. Internet Explorer, however, is behind, surprise, surprise. Unfortunately, this fact means that with IE still being the browser of choice for the majority of web users, widespread adoption of CSS 3 support features is likely to be limited.

Probably the most exciting and most useful selector when it comes to styling tables is the child pseudo-selectors, of which there are a bunch.

The :nth-child(an+b) selector allows you to select every nth element. Essentially, a divides the set of elements and b is the offset. Remember our striped tables? Here’s how you’ll be able to style every second row with a different color:

tbody:nth-child(2n) { ... } /* even rows */      
tbody:nth-child(2n+1) { ... } /* odd rows */

Alternatively, you could use the :nth-of-type(an+b) selector to accomplish the same thing:

tr:nth-of-type(2n) { ... }      
tr:nth-of-type(2n+1) { ... }

Likewise, if you needed to style every second column with a different color, you could apply the style on every second td element:

tr:nth-child(2n) { ... }      
td:nth-of-type(2n) { ... }

By providing a value of 0 for a, the offset allows you to select the nth element. For example, if you wanted to style just the fifth column:

tr:nth-child(0n+5) { ... }      
td:nth-of-type(0n+5) { ... }

Both nth-child and nth-of-type are very similar but will give you fantastic control when it comes to styling your tables.

There’s also a glimmer of light at the end of the IE tunnel. Internet Explorer 7, recently released, has support for a number of new selectors, including :first-child and sibling selectors that allow us to mimic nth-child. The sibling selector uses the plus sign (+) to target elements. Therefore, if you wanted to style the second column from the left, such as that shown in Figure 19, below, you’d use the following:

td:first-child + td {      
 background-color:#036;      
}

Figure 19. Using td:first-child+td to alter background-color

The td:first-child will target the first cell within a row and then the sibling selector (the + sign) targets the element right beside it. If you wanted to target the fourth column you’d use the following:

td:first-child + td + td + td {      
 background-color:#036;      
}

Imagine a table, with a number of values, where you want the last column to be bolded to indicate that the data is a sum. Using the :last-child selector will do the trick:

td:last-child { ... }

Taking advantage of :first-child and :last-child, you could expand on the striped table that we saw earlier to add rounded corners to the first and last cells of both the header and the footer. The border is an image set as the background-image of the first and last cells within each row.

Figure 20. Using CSS 3 selectors to add rounded corners to table

There are plenty more selectors that you can expect to see in the not-too-distant future. Although we’re probably a few years away from being able to use some of these features in all popular browsers, it never hurts to dream. For more information on the CSS 3 selectors, check out the relevant section of the W3C CSS 3 specification.

Summary

I hope you’ve finished this chapter with a newfound respect for tables. With any luck, I’ve shown you a few table elements you weren’t aware of before.

We’ve discovered how to create a perfectly semantic data table that provides lots of hooks for our CSS. We’ve set up a well-structured table and learned to style it effectively. We’ve learned that giving a table some style actually makes our table more useful, making it easier to read and understand the data contained within.

We’ve seen how JavaScript can inject a little personality and some additional usability without making things difficult for those users who don’t have JavaScript. Hopefully, you’ve gained some valuable ideas on how to implement JavaScript on tables in new and useful ways.

We’ve seen the future, and it’s bright! We’ve anticipated how the new features of CSS 3 will offer us easy ways to make our tables look good, and now we have the knowledge to use them as they become available.

If you enjoyed this chapter of The Art & Science Of CSS, why not sign up to receive the entire book as a PDF for FREE? This “Twitaway” (Twitter giveaway) will run for 14 days only, so get in quick! Just follow @sitepointdotcom on Twitter, and you’ll receive your free PDF, no strings attached. Grab your copy now!