Table Tutorial
&lttable> - Table: this is what makes the table. It must begin and end with this. It can include the following:
border: defines the width of the border surrounding the table.
cellpadding: this will be a value of 1 to whatever. This is the space between the cell and it's contents.
cellspacing: this is the space between each individual cell. Again can be anything from 1 to whatever.
width: defines the width, in pixels, of the particualer frame.
align: defines how the table will be displayed. Can include left, center, or right.
border: defines the width, in pixels, of the table itself.
Example
&lttable align=center border=1 width=580 cellpadding=5 cellspacing=5></table>
 
Now for rows and data that defines the table.
&lttr> - Table Row
This is required because it tells the browser where a new row begins. It can have the folowing options:
align: adjusts the text or graphics in the row. It has the attributes left, center (or middle), and right.
valign: which stands for verticle align. This controls from top to bottom. It can include top, middle, bottom, and baseline. The row is then followed by...
bgcolor: defines the background color for the cell. Can be hexidecimal or RGB code.
bordercolor: defines the border color of the cell.
Example
&lttr align=middle valign=top bgcolor=#000000 bordercolor=#000080></tr>
 
&lttd> - Table Data
This is what defines the cell itself. It can include the tags from &lttr>, but can also include:
align: aligns text or graphics horizontally. Can be left, middle, or right.
valign: aligns text or graphics vertically. Can be left, middle, or right.
width: defines the width of the cell by pixels or percentage.
height: defines the height of the cell.
bgcolor: defines the background color for the cell in Hexidecimal or RGB.
background: tiles an image as the background much like &ltbody background ...> does in the body tag.
bordercolor: defines the color of the border of the cell. It only works on the table has a border of 1 or more.
rowspan: defines how many rows the cell will span as compared to other rows.
colspan: defines how many columns the cell will span as compared to other rows.
nowrap: allows the text to continue uninhibited from the table cells.
Example
&lttd width=300 height=300 rowspan=2 colspan=2 bgcolor=#000000 bordercolor=#000080 background="file.gif" nowrap></td>
 
&ltth> - Table Data
Just like &lttd>, but it allows everything to be centered within the cell.
Example
&ltth width=300 height=300 rowspan=2 colspan=2 bgcolor=#000000 bordercolor=#000080 background="file.gif" nowrap></th>
 
&ltcaption> - The Caption
This allows the table to have a caption. Duh!
Example

&lttable width=300 cellpadding=5 cellspacing=5 
border=5 align=middle>
&lttr> &lttd colspan=3 align=middle 
valign=middle> THIS RULES!!!
</td> </tr>

&lttr> &lttd align=middle valign=middle> 
Number 1
</td> 
&lttd align=middle valign=middle> 
Number 2
</td>
&lttd align=middle valign=middle> 
Number 3
</td> </tr>

&lttr> &lttd colspan=3 align=middle valign=middle> 
THAT'S IT!!!
</td> </tr> </table>


Now compare it to this output:

THIS RULES!!!
Number 1 Number 2 Number 3
THAT'S IT!!!

For some thorough examples of their possible usages, check out my Examples page. It has a tone of different examples to choose from.

Hopefully, this has answered some of your questions regarding tables. There's not very much to them, but they can be a pain in the butt sometimes. But just keep werking at it, and you'll get it. If I can do it, then anyone can.

Return Home

All Artwork & Design � 1997-1999 Krit Spooker