Visit Our Sponsor

Table Tutorial
 
This is, hopefully, a good reference for those trying to use frames in their web pages. These are what give pages like ESPNET SportsZone and Sportsline their great look. So I'll give you the framework for them, then the rest is up to you.

<table> - 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
<table align=center border=1 width=580 cellpadding=5 cellspacing=5></table>

Now for rows and data that defines the table.
<tr> - 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
<tr align=middle valign=top bgcolor=#000000 bordercolor=#000080></tr>

<td> - Table Data
This is what defines the cell itself. It can include the tags from <tr>, 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 <body 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
<td width=300 height=300 rowspan=2 colspan=2 bgcolor=#000000 bordercolor=#000080 background="file.gif" nowrap></td>

<th> - Table Data
Just like <td>, but it allows everything to be centered within the cell.

Example
<th width=300 height=300 rowspan=2 colspan=2 bgcolor=#000000 bordercolor=#000080 background="file.gif" nowrap></th>

<caption> - The Caption
This allows the table to have a caption. Duh!

Example
<table width=300 cellpadding=5 cellspacing=5 
border=5 align=middle>
<tr> <td colspan=3 align=middle 
valign=middle> THIS RULES!!!
</td> </tr>

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

<tr> <td 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