Get a table layout you like, such as this:

Code:

<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td width="15%">&nbsp;</td>
<td width="75%">&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
</table>

Now for the navigation bar which is coloured red I am going to put a background image on it that will repeat itself.

To make the background have an image as a background you need to have the image then add a little bit of code.

<td width="15%" background="backgroundimage.jpg">&nbsp;</td>

If you want to change the colour of the a tables cell you use this code:

<td width="15%" bgcolor="#FF0000">&nbsp;</td>

So how can these be applied using CSS?

Well the background colour is very simple. You just need to apply a class or id to the table cell then use this CSS:

.stylename {
background-color:#FFFFFF;
}

The colour here is in hex although there are some colours that you can type with words. For example:

The background image can be applied using basically the same CSS. Once again you need to apply the class or id to the cell then create the CSS code:

.stylename {
background: #FFFFFF url(/images/navigationbackground.jpg) top left repeat-y;
}

You don't have to but it is advisable to define a background colour just incase the image wasn't downloaded by the client machine so the browser knows what colour to display as the background.

The URL is simply the address to the image. If you are using a PNG or GIF with transparency it is even more important to set a background colour with your image.

The top and left define where you want your image to start. Then I have the image repeated down the y co-ordinate.

Change the formatting for the rest of the table and you will have a nice table layout: