Jump to content

Year

Day

24 Ways to impress your friends

19 12/2005 Tables with Style

by Jonathan Snook

It might not seem like it but styling tabular data can be a lot of fun. From a semantic point of view, there are plenty of elements to tie some style into. You have cells, rows, row groups and, of course, the table element itself. Adding CSS to a paragraph just isn’t as exciting.

Where do I start?

First, if you have some tabular data (you know, like a spreadsheet with rows and columns) that you’d like to spiffy up, pop it into a table — it’s rightful place!

To add more semantics to your table — and coincidentally to add more hooks for CSS — break up your table into row groups. There are three types of row groups: the header (thead), the body (tbody) and the footer (tfoot). You can only have one header and one footer but you can have as many table bodies as is appropriate.

Sample table example

Inspiration

Table Striping

To improve scanning information within a table, a common technique is to style alternating rows. Also known as zebra tables. Whether you apply it using a class on every other row or turn to JavaScript to accomplish the task, a handy-dandy trick is to use a semi-transparent PNG as your background image. This is especially useful over patterned backgrounds. 

tbody tr.odd td
 {
     background:transparent url(background.png) repeat top left;
 }


 * html tbody tr.odd td
 {
     background:#C00;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
          src=‘background.png’, sizingMethod=‘scale’);
 }

We turn off the default background and apply our PNG hack to have this work in Internet Explorer.

Styling Columns

Did you know you could style a column? That’s right. You can add special column (col) or column group (colgroup) elements. With that you can add border or background styles to the column.

<table>
     <col id="ingredients">
     <col id="serve12">
     <col id="serve24">
 ...

Check out the example.

Fun with Backgrounds

Pop in a tiled background to give your table some character! Internet Explorer’s PNG hack unfortunately only works well when applied to a cell.

To figure out which background will appear over another, just remember the hierarchy:

(bottom) Table → Column → Row Group → Row → Cell (top)

The Future is Bright

Once browser-makers start implementing CSS3, we’ll have more power at our disposal. Just with :first-child and :last-child, you can pull off a scalable version of our previous table with rounded corners and all — unfortunately, only Firefox manages to pull this one off successfully. And the selector the masses are clamouring for, nth-child, will make zebra tables easy as eggnog.

About the author

Jonathan Snook is a web developer by trade and tirelessly puts his many skills to work on snook.ca and other projects.

Comments

Commenting is closed for this article.

by Jonathan Snook

About the author

Jonathan Snook

Jonathan Snook is an internationally-admired web designer and developer, and a gifted creator of striking designs and impeccable markup and code. He moves effortlessly from client-side, front-end work to hardcore server-side challenges, and his fluency in CSS, JavaScript, PHP and MySQL make make him the "turn-to" man for many high-profile clients. Coauthor of , he writes regularly at his popular blog snook.ca, and for Digital Web and Sitepoint. Jonathan speaks at top web conferences and also works with his partners at Sidebar Creative, makers of world-class websites and innovative applications.

More information

In association with:

Perch - a really little cms