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.
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:
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:
table.stat caption,