CSS Table Tutorial

How to get the most out of your table design
Recently I was presented with the challenge of creating a chart for an article I was converting to html. Normally, I would use CSS div tags to format the table data, but with dozens of cells and rows facing me I chose to find a more efficient way.

By using background images for the header and left section of the chart, I am able to control the look and feel of the table represented in the original print document. From this point I built three graphics to use as the background images. View the background graphics: Head, Lead Row, Alternate Row

Applying CSS to the table
For the headers I created a class called "head". Within this style I chose the darker background graphic and added a one pixel border to the top, right and bottom of the table cell. Remember to insert a background color in case something happens to your background graphic.

On the left column I created two identical classes for the alternating rows. Then I just changed the background graphics and border colors. Lastly, I did the same for the table cells so the background colors could alternate as well.

A Table you can take home to mom
Now we have a table that not only looks sharp but is totally customizable. Plus you don’t have to fight with the table column widths jumping all over the place. Personally, I don’t miss those days.

Source Frequency Reach Cost marketing
SEO Excellent Excellent Flexible Mod. Expensive
Blog Excellent Excellent Inexpensive Inexpensive
Podcasting Excellent Excellent Flexible Mod. Expensive
Tag Fair Fair Inexpensive Inexpensive
Keyword Excellent Excellent Inexpensive Mod. Expensive
Optimization Excellent Excellent Flexible Mod. Expensive

CSS Styles

.table th.head {
font: bold 10px Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-align: left;
color: #fff;
letter-spacing: 2px;
border-top: 1px solid #885546;
border-right: 1px solid #885546;
border-bottom: 1px solid #885546;
padding: 6px;
background: #822123 url(images/table_bg.jpg) no-repeat;
}

.table th.spec {
font: bold 9px Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-align: left;
color: #822123;
letter-spacing: 2px;
border-top: 0;
border-left: 1px solid #FFF798;
padding: 6px;
background: #FFF798 url(images/table_bgspec.jpg) no-repeat;
}

.table th.specalt {
font: bold 9px Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-align: left;
letter-spacing: 2px;
color: #822123;
border-top: 1px solid #FBE689;
border-right: 1px solid #FBE689;
border-bottom: 1px solid #FBE689;
padding: 6px;
background: #F8DD6D url(images/table_bgspecalt.jpg) no-repeat;
}

.table td {
font: 9px Verdana, Arial, Helvetica, sans-serif;
text-align: left;
color: #822123;;
border-right: 1px solid #FFF798;
border-bottom: 1px solid #FFF798;
padding: 6px;
background: #FFFBCB;
}

.table td.alt {
color: #822123;
background: #FBE689;
}

Thank you to Veerle Duoh for CSS inspiration.