Simple CSS demo #1:
Setting font properties in a table

To suggest font properties for text in a table, it is best to associate the rules with td, th, and caption elements rather than the table element. The reason is that browsers have bugs in the inheritance of properties associated with tables.

Let's first take a look at a simple table without stylistic suggestions. This means that the browser's default font family and size are used.

If the table were larger, with several columns, it might be useful to suggest a reduced font size. Since small font generally looks better on screen if it is a sans-serif font, we also make a suggestion concerning the font-family.

Here is the same table but with a simple stylesheet:

The table tag used is <table class="stat"> and the stylesheet is the following:

table.stat th, table.stat td {
  font-size : 77%;
  font-family : "Myriad Web",Verdana,Helvetica,Arial,sans-serif;
  background : #efe none; color : #630; }

Notes:

• The style sheet suggests that a font size which is 77% of the basic font size. In a simple case, the basic font is the browser's default font size. Percentage font size specifiers are risky if there is nested markup so that you have some relative font size specifier for an enclosing element too (such as an outer table).
• The list of sans serif fonts is a subset of a list mentioned in Todd Fahrner's Beyond the FONT tag.
• The rules in this stylesheet apply to table cells only. If you'd like to make them apply to the caption too, you'd include
  table.stat caption,
  at the beginning of the first line in the stylesheet.
• In this case, the table contains no links, so we need not worry about link colors. In the general case, when you suggest text and background colors (which should always go together), you should also suggest compatible link colors.