A little CSS trick for tables

Posted At : October 25, 2006 10:05 AM | Posted By : Trond Ulseth
Related Categories: CSS
I needed to include a table in a page today, like so many times before. Here's the code:

<table>
<tr><th>Date</th><th>OrderID</th></tr>
<cfoutput query="registeredOrders">
<tr><td>#DateFormat(orderDate, "d.mmm yyyy")#</td><td>#objectID#</td></tr>
</cfoutput>
</table>

So far so good. Now I wanted to make some borders around the cells. What I've previously been doing is to set a cellspacing of 1 pixel on my table, make a background color for the table (the same color as I want for borders, and then another background color for th and td elements. Something like this:

<style type="text/css">
table {background-color: #000000;}
th {background-color: #CAE4FF;}
td {background-color: #FFFFFF;}
</style>

<table cellspacing="1">
<tr><th>Date</th><th>OrderID</th></tr>
<cfoutput query="registeredOrders">
<tr><td>#DateFormat(orderDate, "d.mmm yyyy")#</td><td>#objectID#</td></tr>
</cfoutput>
</table>

Now that works. There's no invalid code. It's easy to read and manipulate. However, it felt wrong to use a table background color to make a border color. I thought there had to be a better/cleaner way of doing this with CSS only. And so together with my colleague we started looking (using The Google*) and he found a simple css attribute neither of us have used before (and we use a lot of css).

Better to show than to tell. Here's the code how it looks now:

<style type="text/css">
table {border-collapse: collapse;}
th {background-color: #CAE4FF;}
th, td {border: solid 1px #000000;}
</style>

<table>
<tr><th>Date</th><th>OrderID</th></tr>
<cfoutput query="registeredOrders">
<tr><td>#DateFormat(orderDate, "d.mmm yyyy")#</td><td>#objectID#</td></tr>
</cfoutput>
</table>

So we did not save much code right away. But now all aspects of the formating is controlled by the css. And when dealing with many tables using the same css we will have saved code, and eased the managability.

* In President Bush's words

Comments (5) | Print | Send | del.icio.us | Linking Blogs
Comments
[Add Comment]
So does this put a thicker border between cells than it does around the outer edge of the table? It seems if a cell has a 1px border around it and so does the cell next to it, then you would have a 2px border. Just curious. I haven't tried this myself.
# Posted By Matt Williams | 10/25/06 4:02 PM
Matt, the double border problem was the reason I used to use the table background-color trick. But using border-collapse:collapse; makes the cell borders overlap so that one only get a nice even 1px border also between the cells.
# Posted By Trond Ulseth | 10/26/06 1:55 AM
This part has always troubled me. What happens if someone has the style sheets turned off. It then means that the table reverts to a min width algorithm that often looks terrible.

IIRC, the MM coding guidlines from a few years ago stated that you should always have at least border, cellspacing and cellpadding in your tables.

Wonder if it's changed now?
# Posted By dc | 10/26/06 7:08 AM
dc, if someone has stylesheets turned of, then the look of the tables are one of the smaller worries. We are doing all our site layouts purely by using css. If someone has css disabeled they will pretty much get a text only version of the site, in wich case the looks and design does not matter much any way. What is important is to have logical navigation and order of content (accesible).
# Posted By Trond Ulseth | 10/27/06 3:54 AM
This works like a charm. Thanks for posting this.

Taking it further, I've been able to border the table differently than the cell borders for finished look. Nice.
There seems to be a bug in Mozilla where the cell border is drawn over the table border when the thickness is 1px for both. If you widen the table border to 2px it then is drawn over the cell border. (cell and table borders were differentiated by color in my tinkering)
# Posted By Dathan | 11/14/07 4:20 PM
[Add Comment]