A CSS styled table

from http://veerle.duoh.com/blog/comments/a_css_styled_table/

 

 

Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS. The data of tables can be boring so all the more reason that we need to attract attention to it and make it as pleasant to read as possible. Presentation and design with some basic accessibility rules in mind is the way to go.

Advantages
Styling a table with CSS has mayor advantages since it separates the structural markup from presentation formatting. It offers extra flexibility on the way you present your table. You have the freedom to style each side of a table cell separately, isn't that cool.

Getting started
First I create a simple draft in Photoshop. I experiment by trying out some color combinations, bullets, colors for the alternating rows etc. If you can't decide on colors, then maybe these color calculators can help you out.

 

In the next step I export these 3 image files to style the background of the headers:

• bg_header.jpg
• bullet1.gif
• bullet2.gif

The structural markup
The coding in BBEdit is pretty simple. Here is some part of it:

<table id="mytable" cellspacing="0" summary="The technicalspecifications of the Apple PowerMac G5 series"><caption>Table 1: Power Mac G5 tech specs </caption><tr>  <th scope="col" abbr="Configurations" class="nobg">Configurations</th>  <th scope="col" abbr="Dual 1.8GHz">Dual 1.8GHz</th>  <th scope="col" abbr="Dual 2GHz">Dual 2GHz</th>  <th scope="col" abbr="Dual 2.5GHz">Dual 2GHz</th></tr><tr>  <th scope="row" class="spec">Model</th>  <td>M9454LL/A</td>  <td>M9455LL/A</td>  <td>M9457LL/A</td></tr>...

As you can see I've used the scope attribute to make sure that a my table makes sense in non-visual browsers. This attribute defines whether the header cell holds header information for a column (scope="col") or a row (scope="row").

The CSS styles
For the headers at the top I've used a background image to make them extra visible, except for the one on the left. For this one I created a class (.nobg I have the habit to always use 'bg' as an abbreviation of 'background'). Here is how the CSS code looks:

th {font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica,sans-serif;color: #6D929B;border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;border-top: 1px solid #C1DAD7;letter-spacing: 2px;text-transform: uppercase;text-align: left;padding: 6px 6px 6px 12px;background: #CAE8EA url(images/bg_header.jpg) no-repeat;}th.nobg {border-top: 0;border-left: 0;border-right: 1px solid #C1DAD7;background: none;}

The headers on the left that appear as rows (the specification headers) have alternating styles:

th.spec {border-left: 1px solid #C1DAD7;border-top: 0;background: #fff url(images/bullet1.gif) no-repeat;font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,sans-serif;}th.specalt {border-left: 1px solid #C1DAD7;border-top: 0;background: #f5fafa url(images/bullet2.gif) no-repeat;font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,sans-serif;color: #B4AA9D;}

The table cells that hold the technical specifications of each Power Mac G5 also have alternating styles:

td {border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;background: #fff;padding: 6px 6px 6px 12px;color: #6D929B;}td.alt {background: #F5FAFA;color: #B4AA9D;}

And this is the final result: