Tables
Tables can be used in many ways. They can store information, help you achieve browser compatibility, and they are useful when designing the layout for a page.

To make a layout using tables, set the border width to 0 and use valgin="top" to make sure all information is aligned correctly. Bet you didn't know the main pages all use invisible tables!

There are a few tags you need to know and understand before you can make a table. The tags needed to make a table are listed below with an explanation of what they do. Each tag has attributes, all of which can be seen in the Quick Reference Guide.

TagExplanation
<TABLE>This is the tag used to tell the browser that a table is to follow. Use the tag </TABLE> to end a table.
<TH>Tag used to start a Table Header, used instead of <TD> in the first row of a table, </TH> is the closing tag.
<TR>Starts a Table Row, these hold the <TD>'s of a table, </TR> ends the row.
<TD>Begins a cell within a Table Row, you can have as many as you want in a row, </TD> ends a cell.

Caption tag
<table border="3" cellpadding=3 cellspacing=3>
<caption align="top">Table Caption</caption>
<tr>
<td>Table content here</td>
</tr></table>
Table Caption
Table content here

You can change align="top" to
align="bottom" to have the
caption be under the table.
Height and Width
<table border=3 cellpadding=3 cellspacing=3 height="100" width="100">
<tr height="100" width="100">
<td height="100" width="100">Content</td>
</tr></table>
Content

You can also use the % sign to
make a table relative to the
users monitor.
Border Width
<table border=7 cellpadding=3 cellspacing=3 width="200">
<tr>
<td> This border is size 7, the other examples on this page use a border size of 3, so that gives you an idea of the possibilities of border size.</td>
</tr></table>
This border is size 7, the other examples on this page use a border size of 3, so that gives you an idea of the possibilities of border size.
Border Color
<table border=3 cellpadding=3 cellspacing=3 width="200" bordercolor="#ff0000">
<tr>
<td> You can use any color you want for the table border, just substitute ff0000 for any color in RRGGBB format.</td>
</tr></table>
You can use any color you want for the table border, just substitute ff0000 for any color in RRGGBB format.
Table Background Color
<table border=3 cellpadding=3 cellspacing=3 width="200">
<tr>
<td bgcolor="#ff0000"> You can use any color you want for the table background, just substitute ff0000 for any color in RRGGBB format.</td>
</tr></table>
Substitute ff0000 for any color in RRGGBB format to change background color, you can use this tag in TD, TR and TABLE.
A simple, 1 celled table:
<table border=3 cellpadding=3 cellspacing=3>
<tr>
<td>Example 1</td>
</tr></table>
Example 1
1x2 cell table:
<table border=3 cellpadding=3 cellspacing=3>
<tr>
<td>Example 2</td>
<td>Example 2</td>
</tr></table>
Example 2Example 2
A 2x2 table:
<table border=3 cellpadding=3 cellspacing=3>
<tr>
<td>Example 3</td>
<td>Example 3</td>
</tr> <tr>
<td>Example 3</td>
<td>Example 3</td>
</tr></table>
Example 3Example 3
Example 3Example 3
The same table above using valign commands:
<table border=3 cellpadding=3 cellspacing=3 width="100">
<tr width="100" height="100">
<td width="25" height="100" valign="top">5</td>
<td width="75" height="100" valign="bottom">Ex. 5</td>
</tr></table>
5Ex. 5

Default valign is in the center of the table.
An example of columns:
<table border=3 cellpadding=3 cellspacing=3 width="99">
<tr width="99" height="100" valign="top">
<td width="33" height="100" valign="top">6.1</td>
<td width="33" height="100" valign="bottom">6.2</td>
<td width="33" height="100">6.3</td>
</tr></table>
6.16.26.3
An example of colspan:
<table border=3 cellpadding=3 cellspacing=3>
<tr>
<td>Example 7</td>
<td>Example 7</td>
</tr>
<tr>
<td colspan="2">Example 7</td>
</tr></table>
Example 7Example 7
Example 7
A rowspan example:
<table border=3 cellpadding=3 cellspacing=3>
<tr>
<td>Example 8</td>
<td rowspan="2">Example 8</td>
</tr>
<tr>
<td>Example 8</td>
</tr></table>
Example 8Example 8
Example 8
Nested Tables:
<table border=3 cellpadding=3 cellspacing=3 bordercolor="#ff0000">
<tr>
<td><table border=3 cellpadding=3 cellspacing=3 bordercolor="#00ff00">
<tr>
<td> These are nested tables, they work like any other table, they are just inside one another, you make these by using multiple TABLE tags. Make sure to end all tags at the end of your nested tables. I used different border colors to make it easier to distinguish between tables, but you don't have to.</td>
</tr></table>
</td>
</tr></table>
These are nested tables, they work like any other table, they are just inside one another, you make these by using multiple TABLE tags. Make sure to end all tags at the end of your nested tables. I used different border colors to make it easier to distinguish between tables, but you don't have to.
Cellpadding and Cellspacing
<table border=3 cellpadding=10 cellspacing=10>
<tr>
<td><b>Cellpadding</b> is the amount of space between the border of a table and it's contents. </td> </tr>
<tr>
<td><b>Cellspacing</b> is the distance between the cells of a table.</td>
</tr>
<tr>
<td>
The other examples on this page use cellpadding and cellspacing of 3, so that gives you an idea of the possibilities of these attributes.</td>
</tr></table>

Cellpadding is the amount of space between the border of a table and it's contents.
Cellspacing is the distance between the cells of a table.
The other examples on this page use cellpadding and cellspacing of 3, so that gives you an idea of the possibilities of these attributes.
Empty Cells
<table border=3 cellpadding=10 cellspacing=10>
<tr>
<td></td>
<td>I have empty cells by my sides.</td>
<td></td>
</tr>
</tr></table>
I have empty cells by my sides.

Alignment:

I am aligned to the left.
<table border=3 cellpadding=3 cellspacing=3 align="left">
<tr>
<td>I am aligned to the left.</td>
</tr></table>







I am aligned to the middle.
<table border=3 cellpadding=3 cellspacing=3 align="middle">
<tr>
<td>I am aligned to the middle.</td>
</tr></table>

I am aligned to the right.
<table border=3 cellpadding=3 cellspacing=3 align="right">
<tr>
<td>I am aligned to the right.</td>
</tr></table>