Have some tabular data that you want to throw on your website? Well, that's great, but if you're going with standards, styling that table can be sort of tricky. Never fear though, there's an easy way to get around that and have your table looking spiffy in no time.

First, we have our table:

<table summary="A list of letter grades per annual">
<caption>School Grades</caption>
<thead>
<tr>
<th id="year">Year</th>
<th id="a_s">A's</th>
<th id="b_s">B's</th>
<th id="c_s">C's</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td headers="a_s">6</td>
<td headers="b_s">6</td>
<td headers="c_s">3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td headers="year">2003</td>
<td headers="a_s">1</td>
<td headers="b_s">3</td>
<td headers="c_s">1</td>
</tr>
<tr>
<td headers="year">2004</td>
<td headers="a_s">2</td>
<td headers="b_s">2</td>
<td headers="c_s">1</td>
</tr>
<tr>
<td headers="year">2005</td>
<td headers="a_s">3</td>
<td headers="b_s">1</td>
<td headers="c_s">1</td>
</tr>
</tbody>
</table>

So now we have our table ready to go and style, it's simple and just shows the amount of letter grades achieved in each school year from 2003 to 2005. They're made up, so don't worry about those C's.

First of all, what we want to style is the border of the cells and table. Let's go with a one pixel solid gray one. In our stylesheet, we'll add this:

table {
border-top: 1px solid #999;
border-left: 1px solid #999;
}
td,th {
border-bottom: 1px solid #999;
border-right: 1px solid #999;
}

Simple right? The reason we style them by opposite sides is that if you don't, you tend to get some double borders that can be quite unattractive. But, we have some gaps, so let's get rid of them. We change the table css declaration slightly.

table {
border-top: 1px solid #999;
border-left: 1px solid #999;
border-collapse: collapse;
}
td,th {
border-bottom: 1px solid #999;
border-right: 1px solid #999;
padding: 5px;
}

Apply that change and you've suddenly got some nice borders. And since we added some padding to the cells, the contents have some room to be read more easily.

Now that our cells are styles how we want them, we can make our header and footer nicer to make them more seperated from the normal content. We'll add a bit more to our CSS.

thead th {
background-color: #ddd;
}
tfoot td {
background-color: #bbb;
font-weight: bold;
}

Excellent, we've now applied the final styling to our table to make it awesome. You can feel free to style the caption add background images to cells or whatever you wish, just remember that tables should only be used for tabular data and not for your layout.

See how it looks: http://haugland.ca/files/documents/table_styling.html