You now have three pages, hopefully all in the same folder. On the first one you built in navigation to the other two (though you hadn't built them at the time) as a bullet list when you did lists and links.

For the other two pages you're going to build navigation bars in the form of a tables. First though we're going to introduce two more table properties, cell padding and cell spacing.

Cell padding is:

Cell padding insets all text and pictures and other content in a table. In this table the cell padding is set at 6 pixels. That is why the text doesn't come right up to the edge, even though the text is justified.

Cell spacing is:

Cell spacing is the gap between the different cells of a table. In this table of one row and two columns the cell spacing is set at 16 pixels. Hence the gap between this cell and the cell to the right.

These bits of text are written to go in the table you're about to make. They describe what cell padding and cell spacing are.

Still working on tables2.html create a table of one row and two columns beneath the main table (separated by a line break). in the <table> tag key in the commands cellspacing="16" and cellpadding="6", and in the two <td> cell tags type in two different background colours, #CCFFFF and ivory. Make the width of the table 500 pixels and the width of each cell 50%

Then type or paste in the two bits of text, one into each cell and format it. I've used Arial, Helvetica, sans-serif, size 3.

Save and view.

Click on the link to see what it should look like.

The navigation bar on tables2.html goes between the top line and the main table. It will have a width of 300 and a height of 30.

In this table we're going to use cell spacing as a new way of creating a border. This border will be a single 1 pixel line round the cells. How we do this is to set the cell spacing at 1, give the table a black background, and the table cells the background colour #FFCCFF.

What you get should be:

You can now type the names of the three pages you've made so far into the cells - Greeting, Tables 1 and Tables 2. When you've done that you can set links to the three pages and format the text.

Go to the font tags section of the tag library I've put on this site for more font options.

Save and view

Click here to see what it should look like.

Now open tables1.html and copy and paste the navigation bar you've just made into the front of the body section of the page, and key align="left" into the <table> tag.

This table is going to have just one column, but three rows. To do this is simple, you just end one row and start another inbetween each of the cells. You will have to play around with the width and height instructions a bit to make the cell height stick at 30 and the cell width hold at 100.

You can now change the colour of the cell that links to the page you're on, both for tables1.html and tables2.html, to tell the viwer which page you're on.

You can if you wish also knock off the link (delete the <a href> tag) as there's no point linking to somewhere you're already at.

Save and view both pages and check all your links work.

Click here to see what TABLES 1 should look like

And click here to view the source code in a new window

ALSO

Click here to see what TABLES 2 should look like

And click here to view the source code in a new window

And check my links.

In the next phase we will be dealing with the practical aspect of web design by building a fantasy travel agents site.

In this site we will introduce style sheets to give much more control over text formatting. The site will be built from a template to give it a consistent look and feel.

We will also build whole pages in a single table, put tables inside tables and introduce the hugely important meta tags (which tell the search engines how to find you)