The Modular Web Page - Designing Your Page Layout
(Page 2 of 5 )
We first need a plan of what our page will look like. In this case we will create a “typical” web page with a top, a sidebar a central area and a page bottom. Using a table is a very effective way of achieving this. Find below a graphic of the kind of page I mean:
Setting the border attribute of the “table” tag to “1” is an excellent idea at this stage of development. Having the border visible gives us a clear idea of the layout of our table. Of course, when we’ve finished our page we will likely want to hide the border by setting the value to “0”.
In the example above, you can see that we have a table of three rows and each row has either one or two columns. The first row spans two columns and stretches across the top of the browser. The first column of our second row is the sidebar while the second column of this row is reserved for the changing content presented in the centre of the page. Finally, our last row contains a link to the top of the page and copyright information.
You can see that the table is a powerful tool for controlling the position of elements on a web page. The effort spent on learning to manipulate a table’s attributes is well repaid. Some people will argue that the “div” tag in conjunction with a Cascading Style Sheet (CSS) offers a superior method of control. I’m not so sure myself but enough of that. Let’s see what the code looks like.
Next: The Code >>
More PHP Articles
More By Peter Lavin
