Summary

When you're creating stylish data tables, it's important not to abuse the markup structure by attaching extra, unnecessary cells for the sole purpose of the design. By building a meaningful structure for the table firstusing only the necessary elements to support the datayou'll cut down on code and be able to later style the table however you'd like using CSS.

Borders, backgrounds, and colors can all be kept in the style sheet, which leaves the markup clean and lean and highly accessible to whatever device happens to read it.

Here are a few things to keep in mind when styling tables:

• Collapse the table using <table cellspacing="0"> (or the border- collapse property), and move all other borders, background, and spacing to the style sheet.

• Use the <caption> element to properly assign a title to the table. Be aware that Safari and IE/Mac render styled <caption>s differently.

• Use <th> elements to properly denote the table's headers, thus providing better structure and a way to uniquely style those cells with CSS.

• Create grid lines by adding borders to the <th> and/or <td> elements.

• Add background colors to rows by styling the <tr> elements. Alternate background row colors by adding a class to the desired <tr>.