Since this is a tutorial primarily for teaching current W3C standard XHTML peppered with a little knowledge to enable you to read source of 1990's-style sites, I'll say this about tables: tables are for organizing tabular data. Tables are really just multi-column lists, when you think about it.
Because early browsers had little ability to precisely position page elements or group like elements togther, some smart web designers began to use tables for that purpose in the late '90's. And it worked; many good-looking sites owe their pleasing and organized appearance to the clever use of tabular mis-use. This page will, however, only show you how to use tables for what they were intended -- tabular data display. Element positioning will be covered under "Floating and Positioning".
Tables consist of data cells in rows and columns. The table tag has these attributes:
| width | The width of the outside dimension of the table. Units can be in % of window width or pixels. |
| border | Width of the border in pixels. Width of 0 means "no border". |
| cellspacing | Distance in pixels between adjacent cells; affects top, bottom and sides. |
| cellpadding | Space in pixels around contents of table cells. |
| bgcolor | Background color of the entire table inside the border. Specified in 6-digit hexidecimal format. |
A very simple table followed by the HTML that created it:
| One | Two |
| Three | Four |
<table border="1"> begins the table and specifies border thickness
<tr> begins the 1st table row
<td>One</td> adds the 1st data cell to the row
<td>Two</td> adds the 2nd data cell to the row
</tr> ends the 1st row
<tr> begins the 2nd table row
<td>Three</td> adds data cell to 2nd row
<td>Four</td> adds data cell to 2nd row
</tr> ends the 2nd row
</table> ends the table HTML
Same table set to 50% body width:
| One | Two |
| Three | Four |
<table border="1" width="50%">
Same table set to 500 pixel width:
| One | Two |
| Three | Four |
<table border="1" width="500px">
...with a border of 5 pixels:
| One | Two |
| Three | Four |
<table border="5" width="500px">
...with data in left column aligned right:
| One | Two |
| Three | Four |
<td align="right">One</td>
:
<td align="right">Three</td>
...with cell spacing set to 10 pixels:
| One | Two |
| Three | Four |
<table cellspacing="10" width="500px">
...with cell padding set to 10 pixels:
| One | Two |
| Three | Four |
<table cellpadding="10" width="500px">
Illustrating the use of "row span":
| One | Two |
| Three | |
| Four | Five |
<table cellpadding="10" width="500px">
<tr>
<td rowspan="2" align="right">One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
</tr>
<tr>
<td>Four</td>
<td>Five</td>
</tr>
</table>
Illustrating the use of "column span":
| One | Two |
| Three/Four | |
| Five | Six |
<table cellpadding="10" width="500px">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td colspan="2" align="center">Three/Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
</table>