 |
|
|
|
How to layout a page using tablesI will show you how to make the layout of a page using tables. This example will concentrate on this point and not in the use of HTML to achieve visual effects. So, the majority of presentational details have been obtained using CSS, which is the modern tool for these purposes. A style sheet has been linked to the HTML page, which relieves us of the burden of having to specify fonts, fonts sizes, and so on. However, CSS also permits me to make a "trick"; the menu column is given a width of 120 pixels and is separated 20 pixels from the left, which allows me to spare another table column. For a pure HTML version of this example, please look in the HTML section. Our starting point will be a template given to us as an image in the popular graphics format JPG. I have already drawn on this image green lines to separate the zones that are most likely to compose our page. Here is the image so marked.
As you can see, I have separated on the image four zones that I named: header, menu, content, and footer. Each zone will have a different background image, and all these images will have a border that must be not overlaid. The target browser window will have a width of 768 pixels. To make the page, I will use a table with this width, that has three rows and two columns. The header and the footer will occupy each one row and will be formed by one cell each, using both columns thanks to the attribute "colspan=2". In the center row, the menu will be in the first column and the content in the second column. This is shown in the next picture.
Now, the dimensions. The header will be given a height of 135 pixels, and the footer, of 72 pixels. The center will have not a fixed height, but a fixed width: the first column will be 169 pixels wide, and the second, 599 pixels wide. The header is the easiest part to do, as it will be filled with a background image of 768 by 135 pixels. The header text ("My Holidays") will be written in Tahoma font of 14 pts. The footer is slightly more complicated, because it has two sub-parts that need different alignments. We will need to introduce another table that will have one row and two columns, and a width of 95% so as to leave some margin in both sides. The first column will receive a text, "Happy journeying!", with left alignment. The second column will contain a mail-to link with right alignment. The menu and the content will be formed each one by a table, because we want each menu option and each type of content (text and picture) to be in a row on its own. The menu table will be given a width of 140 pixels. The content table will occupy the rest of the window width. The content table gets a width of 575 pixels to prevent the text from bumping against the window border. The first row will contain some text and the second one, a picture. The next link will open the page in a new window.
|
|
||||||||||||||||||||
