Quick Guide to Tables

Stephen Wilson, Art Department, SFSU


Tables can be used for much more than presentation of tabular data.  Web designers can use them to layout pages much more predictablly than with other methods.  Each table cell can contain text, images, or even other tables.  The HTML specifications ask the designer to specify the contents of each row in order.


Example of 2 x 3  table 
Cell 1.1  Cell 1.2  Cell 1.3 
Cell 2.1   Cell 2.2 & 2.3 (spanning 2 columns) 
<TABLE BORDER CELLPADDING="2">
<CAPTION>  Example of 3 x 2 table   </CAPTION>
<TR>
<TD>  Cell 1.1  </TD>
<TD>  Cell 1.2   </TD>
<TD>   Cell 1.3> </TD>
</TR>
<TR>
<TD> Cell 2.1 </TD>
<TD COLSPAN=2> Cell 2.2 &amp; 2.3 (spanning 2 columns)  </TD>
</TR>
</TABLE>


HTML 4.0  Table markup extensions

The table can have a color, background image or specific border colors.
Each cell can have an independent color or background images.
The table can be given a name and controlled by style sheets.
 
x x
x x
The HTML code to control color for an entire table is as follows:
<TABLE BORDER COLS=2 WIDTH="100%" BGCOLOR="#FFF417" >

The HTML code to control the background image of the second cell of the second row is as follows:
<TR>
<TD></TD>
<TD BACKGROUND="im3.gif"></TD>
</TR>

Once full 4.0 compliance is available, you will be available to define and name sections of the table including the table head (THEAD), table foot (TFOOT), and table body (TBODY).  Each will be addressable by style sheets and scripting.