Menu link
Menu link
Menu link
Menu link
Menu link

Page heading

A three column layout with header, navigation bar and footer sections. The first row  creates the header and the search area. The first of these table cells use colspan="2" attribute-value pair. The second and fourth table rows create the  navigation bar and footer respectively and contain a single table cell each. All these table cells use colspan="3" attribute-value pair.

The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).

Unlike the sample table layout from Iron Spider, this one has all of the styling moved to the head section of the page rather than using inline styles. You can do the same thing with any of the sample layouts on the page as well as adding more style rules.

Using percentages for the widths of the table as a whole and the three columns allows the table to resize to fill the viewer's browser window. If the viewer has a large monitor opened full screen, the display may not be what you want. In that case you can contain the width of the tables by using the max-width:1500px; rule as part of the table style rules. To then center the table on the page, you will need to add margin-right: auto; margin-left:auto; to the table style rules. The only problem with max-width is that it doesn't work in Internet Explorer. To get around that you can use minmax.js

This table layout uses a background image for the header section. You can create your own image to use in the header. Edit the search code as your own search box instructs.

You will need to create additional styles as you develop your site.