Word 2003 Tables Using CSS

No other HTML element has been as maligned or as abused as the table. And yet, tables do have a purpose - to show tabular data. In this article we demonstrate how cascading stylesheets can be effectively used to style HTML tables to look like the ones produced by Microsoft Word 2003. Using CSS styling for tables delivers a more consistent cross-browser look & feel and is more in keeping with good design principles.

All styling effects are delivered by the simple expedient of changing the className attribute of the HTML table element. The only other table attribute we use is cellspacing which is set to 0. All other styling effects are delivered using CSS along.

The full set of style sheets required to display the table styles available here can be downloaded from the link at the bottom of this page. Our style definitions are somewhat verbose - largely, for three reasons

• For clarity
• To enable easy script-driven changes to the table display
• To allow for zebra striping effects. While these are only used in the 3d2 table style, we have created a generic table structure that always allows for horizontal zebra stripes.

For most practical purposes it should be possible to considerably simplify the individual styles. A document demonstrating the table styles as they appear in Word is available as part of the download along with the HTML code for the table itself.

The code here is an excellent demonstration of how grouping & nesting rules can be used to good effect to deliver extremely targeted document styling. When rules get this complex it is necessary to follow clear principles of nomenclature. The principles we have used are summarized below

• The table styles bear names of the form w2k3-LLn where LL is 3d1, cl2... .
• In the interests of good design we use header, body and footer sections in the table.
• In the body section rows have their class attribute set alternately to Z0 and Z1. This is used to enable horizontal zebra-striping of the tables.
• Styles used for individual cells or groups of cells use a spreadsheet-like nomenclature. Thus
  • A-1 refers to the first column and the first row - i.e. the top lefthand cell.
  • AX2 refers to all but the last two columns of the second row of the table.
  Look at the comments in tables.css for more information.

The table below mimics the 3d1 style in Word 2003. To see other Word 2003 table styles simply click on the style name in the listbox.