Tables
The use of tables after divs were introduced to html will either be accepted or not.
The fact is tables have their place and that place should not be restricted to display of spreadsheet information or XML dumps.
On the other hand because many browsers display tables and their formatting differently you should check your work for cross browser compatibility.
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 browsers 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}
</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 this?</font> </td> </tr>
<caption bgcolor="green">This is a caption</caption>
</table>
</BODY>
</HTML>
| This is the header | ||
|---|---|---|
| This is the first row first column | second row second col | Row 1 Col3 |
| This text should be red | Row2 col2 | can you see the this? |
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 Cell Not implemented in all browsers.
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.
Not implemented in all browsers.
border-color
Sets the color of the border.
Not implemented in all browsers.
border-style
Sets the type of line used for the border.
Not implemented in all browsers
Values that can be used:
blank, double, solid, ridge, groove, none, 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.
Values include: baseline, top, bottom, middle
Not Supported in all browsers: text-top, text-bottom, sub, super
<Style>
TD {vertical-align:bottom}
</Style>
Alignment
Used to align text horizontally within a cell
caption-side
Used to position Table Captions
Not implemented in IE4 or NS4.
speak-header-cell
Used to tell Text to Speech Synthesizers how they should interpret and read the table.
Aural Styles are not implemented in most browsers.
Note
Formatting Tables with CSS is a very reasonable way to control your content’s layout but only if you double check your work in both IE and FireFox.
