Tables

You can use the table element to control the layout of a page or part of a page.

The element includes 2 child elements, the table row element and the table data cell element.

The table element is indicated by the tages <table> </table>
The table row elements are indicated by the tags <tr> </tr>
The table cell elements are indicated by the tags <td> </td>
The columns in an html table are created by cells that are above and below each other in rows.

Using a Table as Part of a Page

Below is an example of the html for a table.

The table in the example contains 3 rows with 3 table cells in each row.
The width attribute is set at a value of 80%, which means that the table will display at 80% of the width of the element in which it is contained. In this case, the table is contained with in a <div> element that is part of the page layout.
The table will include a visible border, as indicated by the attribute and value border="1".
Cell spacing adds space around each cell on the outside of the cell.
Cell padding adds space around the cell content inside the cell.

<tr>
<td>Content goes here</td>
<td>Content goes here</td>
<td>Content goes here</td>
</tr>

<tr>
<td>Content goes here</td>
<td>Content goes here</td>
<td>Content goes here</td>
</tr>

<tr>
<td>Content goes here</td>
<td>Content goes here</td>
<td>Content goes here</td>
</tr>

</table>

The table created by the html above looks like this:

Content goes here	Content goes here	Content goes here
Content goes here	Content goes here	Content goes here
Content goes here	Content goes here	Content goes here

Using a Table to Format a Page

You can use the table elements to create the layout for your page by inserting a table at the beginning of your page content. Use a value of "0" for your border attribute and no border lines will show on your page.

<tr>
<td width="20%">Left menu goes here</td>
<td width="80%">Content goes here</td>

</tr>

</table>

You can "nest" tables within your page layout table to further organize the information on your page.

TIP: Keep all your borders showing until you complete your layout so you can see the boundaries of each table. Go back later and change the value of the borders to "0".