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.

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.