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.
-
The HTML for tables consists of the following:
-
Basic tags to start and finish the table <TABLE>
</TABLE>
-
Tags to define each row of the table <TR> </TR>
-
Tags to define each cell of each row <TD> </TD)
-
Option tags to specify extensions in layout - for example cells
extending
over more than one row or column
-
Spanning more than 1 row <TD ROWSPAN=2>
-
Spanning more than 1 column <TD COLSPAN = 3>
-
Option tags for spacing, centering, captions, borders etc
<TABLE
BORDER = 0 > (no border)
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 & 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.
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.