Website Logo or Name

Page heading

Here's a two column layout with header, navigation bar and footer sections. The first two table rows create the header and the navigation bar and contain a single table cell each. These table cells use the colspan="2" attribute-value pair.

The third table row contains two table cells which create the menu column (left) and the content column (right). The colspan attribute is not set in either so they default to colspan="1".

The fourth table row creates the footer. Like the header and the navigation bar, it contains a single table cell which uses the colspan="2" attribute-value pair.

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 two 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 for Windows. To get around that you can use minmax.js