Tables & Style Sheets

NOTE : presented here is an overview of the table section of the Style Sheet specification. More complete information can be obtained from the Style Sheet specification, available from http://www.w3.org/pub/WWW/Style Sheets/

For simple styling of tables, normal Style Sheet methods can be employed (i.e. defining the elements style within the <STYLE> elements, or by using CLASS, ID and STYLE attributes. For more information, see the Style Sheets topic).

For example :

<STYLE>
TABLE { font-size : 12pt;
color : #FF0000}
TH { font-size : 14pt;
font-weight : bold}
</STYLE>
are acceptable.

The problem with tables comes when considering the borders present and therefore any border styling methods. According to the HTML 3 table model, there are only three sections of a table that can be considered as having well defined borders (the <TABLE> itself, row groups (as defined by <THEAD>, <TBODY> and <TFOOT>) and table cells - <TD> and <TH>). Table rows can be considered to be nested within the table and table cells can be considered to be nested within the table rows. It is counter-intuitive to think of tables like this (as a three level nested object) and so the Style Sheet table model treats tables as single level objects (i.e. the border/edge of a cell at the edge of a table and the table are considered to share a border). Essentially, considering elements in the nesting order of a table, elements higher in the nesting order will take precedence. That is, the border style of a <TABLE> will be used, but the border style of rows, or cells will only be used when there is no border specified for the table.

The style sheet table model adds a couple of values to the border-style property and adds a new elevation property. For details of style sheet properties and values, see the Properties and Values topic.

Additions to the 'border-style' property.
The table model adds the blank and bevel values to the border property. Blank differs from the 'none' property allowed for borders by preventing the border style being over-ridden by elements lower in the table nesting order. Bevel specifies that the table has a 3-D border style (necessary to allow the elevation property below)

The 'elevation' property.
This property specifies the elevation (in the z-direction - towards the viewer from the screen) of the table border-styles. It will only work if the border-style of bevel is used. The elevations of <TR>, <THEAD>, <TBODY> and <TFOOT> are used to determine the elevation of table cells (but aren't displayed) while the elevation of the <TABLE> element is used to determine the elevation of the cells contained within the table. It requires a unitless value which is used as the size of the 3-D border.