Tables can help page formatting immensely. Take the menu bar on the left hand side of this page. It's all formatted using a table, if used correctly they can keep thing really neat and tidy

Step 7 - Using Tables

Right, I'll assume that you have a blank page with the head, title, body tags etc. in place. Let's build a table! A table is basically built up of three tags, the <table>, <tr> and <td> tags (along with their standard closing counterparts. The <table> tag tells the browser you want to start a table, the <tr> tells the browser you want that table to have a row and the <td> says to the browser I'd like a cell here please. Try the following two examples:

Example 1

<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>

Example 2

<table>
<tr>
<td>Cell 1 </td>
<td>Cell 2 </td>
</tr>
<tr>
<td>Cell 3 </td>
<td>Cell 4 </td>
</tr>
</table>

See The difference, They both have the same number of cells but in a different format. You can also add to the tbl tag to give the browser a bit more information on what you want the table to look like :

<table border="1" cellpadding="5" Cellspacing="2" bordercolor="#000000">
<tr>
<td>Cell 1 </td>
<td>Cell 2 </td>
</tr>
<tr>
<td>Cell 3 </td>
<td>Cell 4 </td>
</tr>
</table>

The cellpadding element is the amount of space placed around an object within a cell, the cellspacing is the actually distance between cells.So, how would I add image? Well, take the File structure image in Step 6 as an example. Believe it or not, that's made up of 4 separate images:

Here's the code that made them look like one big image:

<center>
<table border="0" width="300" cellspacing="0" cellpadding="0">
<tr>
<td width="50%">
<img border="0" src="../images/internet/struc1.gif" alt="File Structure diagram part 1">
</td>
<td width="50%">
<img border="0" src="../images/internet/struc2.gif" alt="File Structure diagram part 2">
</td>
</tr>
<tr>
<td width="50%">
<img border="0" src="../images/internet/struc3.gif" alt="File Structure diagram part 3">
</td>
<td width="50%">
<img border="0" src="../images/internet/struc4.gif" alt="File Structure diagram part 4">
</td>
</tr>
</table>
</center>

See! It is possible! Notice that the width of the table is set to "300", this is 300 pixels which corresponds to the exact width of the image as it was as a whole. Oh, and the <center></center> nicely centres the table on the page, have ago with your own and see what happens.

The most common way of defining the width of tables is to measure them as a percentage of the page, therefore "100%" would be as wide as the page, "75%" would be three quarters of the page. It is often better to format tables this way as they then expand or contract depending on the user's screen resolution (which you don't want to happen with a image as it wouldn't fit together properly so that's why an absolute width was used). Okay. You can format your text, you can use tables and put images in. What's next? Now to the nitty gritty, Step 8 - Browser Compatibility (Boo, Hiss!).