Caution should be used when defining selectors that alter the proportions and layout of your tables. If selectors are used to set widths or row and column spanning there is the possibility that your documents could become unreadable by User Agents that can not correctly parse the selectors.
Tables are often used by Authors to organize their page content into readable and visually appealing documents. Tables are defined by using a layered grid.
The <TABLE> element being on the bottom defines:
the overall width and height of the table and how the cells of the table will be separated with margins.
The <ROW> element is then used to separate the table into a number of horizontal rows but can not contain the actual page content.
Finally the top layer the <TD> element is used to define columns that are placed inside the rows to hold the actual information to be displayed.
Table Headers <TH> are also used to provide comment lines between the row / column contents. They can not contain column elements and are considered row elements.
The <CAPTION> element can be used to contain a description of the table. Although the code is placed inside the <TABLE> element it is displayed outside the boundaries of the table border.
Because all of these elements are containers many formatting Declaration Values can be applied to them to define: width, color, border,… and styles can be inherited by their child elements to define: text color, size, and family and so on.
An example would be:
<HTML>
<HEAD>
<style>
TABLE {background:00C9FF }
CAPTION {background:blue; color:yellow; font-size:20pt;
caption-side:bottom }
TR.whitetext {color:FFFFFF ; font-size:18pt}
TD.redtext {border: thick solid red; color:red;
font-size:24pt}
TD.ltgreenbackground {background:lightgreen}
#width30 {width=30}
TD.image {background: url(chicken.jpg) fixed;
vertical-align:bottom }
</style>
</head>
<body>
<table border=0>
<th colspan=3>This is the header</th>
<tr class="whitetext">
<td>This is the first row first column </td>
<td class="ltgreenbackground" width=30>
<font color="green">second row second col</font>
</td> <td>Row 1 Col3</td> </tr>
<tr>
<td ID="width30" class="redtext">
This text should be red
</td>
<td bgcolor="yellow">Row2 col2
</td> <td class="image">
<font size="2">can you see the chicken?</font> </td> </tr>
<caption bgcolor="green">This is a caption</caption>
</table>
</BODY>
</HTML>The following images are representations of how this table is displayed in Internet Explorer and Netscape. You can see that the tables are dramatically different. However IE4 offers the best representation of the table when styles are used for element declarations. In the table you should notice that when Selectors are applied to parent elements like the <TR> they are inherited by their child elements the <TD> tag. You can override the style selectors locally by applying formatting values to the child elements.
This is important to remember and as suggested care should be taken to check compatibility across browsers.
Yes it is an ugly table but that’s not the point. Take a look at the differences between what endusers will see and what you may see if you develop with only one browser in mind.
This is the table in Internet Explorer
This is the table in Netscape
With this in mind here are the declarations that may be used for your
table elements.
column-span
Sets the number of columns that a will be spanned by a column that is above two or more columns.
row-span
Sets the number rows a cell will span.
width
Sets the width of the table cell
border
The border Declaration can be used for shorthand to define the color, style, width of your border.
Example you define a border of a cell with the following selector:
TD.red {border: red thick}
The cell will be red and thick.
You can also use the following declarations to define these properties individually.
border-width
Sets the width of the border of the Cell.
border-color
Sets the color of the border.
border-style
Sets the type of line used for the border.
Values that can be used in IE include:
blank, double, solid, ridge, groove, none
The following values are not implemented in IE:
dashed, dotted
vertical-align
When you align contents in the sell you are shifting the baseline of the cells contents. The first Line of text or the bottom of the first image is used to set the baseline of a Table Cell. If the Cell is empty the bottom of the cell is considered the baseline.
<Style>
TD {vertical-align:bottom}
</Style>
Alignment
Used to align text horizontally within a cell
caption-side
Used to position Table Captions
speak-header-cell
Used to tell Text to Speech Synthesizers how they should interpret and read the table.