HTML, CSS and Tables: The Beauty of Data

We start by defining a black border around the table and making sure that there is no spacing in between the cells. We also define the font size and family (this could be inherited from the body element, too).

table {
 border:1px solid #000;
 border-collapse:collapse;
 font-family:arial,sans-serif;
 font-size:80%;
}

We repeat the border information for all of the inner elements and set their padding to 5 pixels.

td,th{
 border:1px solid #000;
 border-collapse:collapse;
 padding:5px;
} 

We use the IDs of the headers to define the width of the columns (this could also be achieved via a colgroup and col definition in the HTML, but this is more flexible).

#fn,#dp,#ar{width:58px;}
#fr,#to{width:138px;}

Next on our list is the caption. It needs a background, a slightly larger font and a border. As our caption sits on top of the table, we have to get rid of the bottom border. Texts in captions are centered by default, therefore we need to set the text-align to left.

caption{
 background:#ccc;
 font-size:140%;
 border:1px solid #000;
 border-bottom:none;
 padding:5px;
 text-align:left;
}

The same applies to headers, and to distinguish between headers in the head and those in the body of the table, we use descendant selectors:

thead th{
 background:#9cf;
 text-align:left;
}
tbody th{
 text-align:left;
 background:#69c;
}

The same descendant selectors help us defining the differences for the data cells:

tfoot td{
 text-align:right;
 font-weight:bold;
 background:#369;
}
tbody td{
 background:#999; 
}
tbody tr.odd td{
 background:#ccc;
}

Voila, our table is styled. You might have realized that we still need a class if we want to have alternate row colors. In CSS3 we will have a chance to avoid that, via the n-th child selector, or alternatively, we can use a Javascript to add the alternate line classes for us.

This tutorial should only give you an insight of what is possible when you ditch old school solutions and embrace a cleaner structure. By using the right markup and creating CSS that uses inheritance and descendant selectors we can cut down the amount of markup drastically, make it easier to maintain, and accessible to boot.

If you want to know more about the taming of HTML tables, read the following:

• The HTML Table specifications
  (http://www.w3.org/TR/html4/struct/tables.html)
  
  
  (cryptic at times, but there is no more accurate source)
• Developing accessible tables
  (http://www.ferg.org/section508/accessible_tables.html)
  (put the kettle on, this is a long one)
  
  
• Building accessible tables
  (http://www.evolt.org/article/Building_accessible_tables/
  4090/42090/index.html)
  
  
• Accessible Table Builder
  (http://www.accessify.com/tools-and-wizards/accessible-table-builder_step1.asp)
  
  
• HTMLDog HTML introduction
  (http://www.htmldog.com/)
  
  
• A very nice presentation on CSS vs. Table Layouts:
  (http://www.hotdesign.com/seybold/)