page 2 of Step-by-Step

1 2

Using Tables

Using tables to lay out your page

This tutorial illustrates how you can use tables to structure the content of your web page.

Set the table properties

Open an empty table on your web page by entering the following:

<table width="590" border="0" cellspacing="4" cellpadding="4" bgcolor="#FFFFFF">

cellspacing is the space (in pixels) between cells. cellpadding is the space in pixels between text and the cell wall.

Step 2 Add the page header

Create the heading row for your page by entering the following:

<tr> <td colspan="3"> Mrs. O'Brien's Class </td> </tr>

Note that this row spans three columns, which is the total number of columns used for this page.

Step 3 Add a menu column to the left of the page

Next, add a column to the side of the page, to act as a menu bar:

<tr> <td width="70" rowspan="2" bgcolor="#FFD784"> Our Writings Our Art Work Other Classes       </td>

The non-breaking spaces ( ) add blank space to the end of the menu column.

Note: Normally, this menu bar would include <a href> links to the other pages.

Note: The </tr> closing tag is not yet included, as we have not yet finished with this row.

Step 4 Add the main body text in the centre of the page

Add the following to create a new row containing the main body of the page:

<td width="300" rowspan="2"> Welcome to Mrs. O'Brien's class page. We hope you enjoy seeing our work. </td>

Step 5 Add some pictures to the side of the page

Add the following to create a new column. This column contains two rows, so rowspan is not needed. Each row contains a picture.

<td width="100"> <img src="smiley.gif" alt="smiley face" width="100" height="100" border="0"> </td> </tr>

<tr> <td width="100"> <img src="dancer.gif" alt="dancing man" width="100" height="100" border="0"> </td> </tr>

</table>

Note: Notice the last tag ( </table>), which closes the table.

Step 6 Save and view

Save your file, and preview it in your browser. To see how your page should display, click here.