The HTML Tutor: Table Tutorial

Table Tutorial

Note: If you tried but it was not work right, please try to change these tag &It to the symbol "<" instead of. Then do the same with each tutorials so.

&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