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.

Areas of the Nordic countries, in km²
Country Total area Land area
Denmark 43,070 42,370
Finland 337,030 305,470
Iceland 103,000 100,250
Norway 324,220 307,860
Sweden 449,964 410,928

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:

Areas of the Nordic countries, in km²
Country Total area Land area
Denmark 43,070 42,370
Finland 337,030 305,470
Iceland 103,000 100,250
Norway 324,220 307,860
Sweden 449,964 410,928

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: