Table design considerations.
How a table can affect your page layout.
Various FrontPage Table set up's.
Please view at 800x600 pixels and be ready to enlarge your browser windows to see the effects on various table layouts.
The best way to create a page layout for a web site is by using tables. (CSS will eventually become the norm but with browser differences tables work best for now.)
How you set up your table in FrontPage is critical to the presentation of your sites pages.
For your page to display correctly to as wider audience as possible we have to think in terms of 800 pixel wide browsers. Many users of the web today will have a maximum of 800 pixels to view your site page in - That's just wider than a sheet of A4 paper (foolscap) It does not matter how wide your site page is but most users do not like having to scroll left and right to see page content. So to overcome this problem and eliminate page scroll we have one or two tricks we can use.
Fixed width table
Many of the big sites on the internet use fixed width tables (Hotmail is one) and most if not all are aimed at an 800pixels wide screen resolution. This allows almost everyone the ability to view you pages and only have to scroll up and down.
Although we have a window of 800 pixels the actual display area after you take out margins and scroll bars is less. So design your table with a width of 750 pixels. You can align it left right or centre. The position you select wont matter in a 800 wide browser as the site will fill the window but when viewed in a larger browser, the table will be aligned either left, right or centre depending on your selection. Below I have made three tables all 750 wide. The tables have been inserted with the table/insert table option from the menu at the top of FrontPage. The tables will all look identical in a 800 wide browser but if viewed in a wider window, the table look radically different!
| 750 wide table centre aligned | |
| 750 wide table left aligned | |
| 750 wide table right aligned | |
Most web sites will either centre the table or align it left - the example above allows you to make an informed choice.
100% wide tables. (Fluid Table layouts)
Using the above method for table/web site design is an excellent way to allow the maximum users the ability to view your site. But viewers with larger browsers are subjected to a lot of white space (or colour) from your page background colour. Often this is not an issue as good site design will distract from this. However there is a way to make your site fit all browser sizes. A Fluid web page, one size that fits all!
One thing to note is that you will loose a bit of control over how your page displays but we can use some techniques to minimise this.
The fluid table design.
We need to gain some control over a fluid table and the best way to do this is with a three column table.
If you view the table above in your browser you will notice it will expand and contract. In a larger browser all three cells grow equally. This would play havoc with your site layout. So we control the outer cells..
Fix the width of the table cells
We can fix the width of the outer cells by simply right clicking in the cell and changing the properties in the cell properties dialogue box.
| set in cell properties to be 180 pixels wide. | Your content would go in here. assuming much of your content is text, the difference in appearance is minimal. if you use a lot of graphics, it can be more difficult. | set in cell properties to be 180 pixels wide. |
You can see above how setting the cell widths we can minimise how much of the table content will move about when the page is re-sized.
Restricting more movement!
You can take just a little more control by stacking a table within your table and setting its width to 390!!! Pixels wide.
| set in cell properties to be 180 pixels wide. |
|
set in cell properties to be 180 pixels wide. |
Using absolute positioning in FrontPage.
Absolute positioning is a great way to put images (or text) exactly where you want them to be. However it is not without its problems.
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad | Once again we have a fluid table as above but this time, I have put an image (information button) in the right hand cell the image is positioned absolutely at 612pixels right and 1706 from the top of the page. Now look at it in different browser window sizes! If you are already viewing in a larger window size then you will see the graphic below this text!!!!!!!!! |
|
Finally, if you do want to use absolute positioning, make sure that no additional styling will take place once inserted! By making your text size a little bigger or smaller or even just making headings a few pixels larger and bold will throw your page design out of line.
Further testing of absolute positioning.
With the page open in a browser, we can see how much a site will jump around, when out of your control. View this page again and this time change the browser font size. On the top toolbar of Internet Expolorer click on View/text size/largest. The information button will be very out of place. Try the other way around and make text the smallest! Strange effects that you have no control over! Use layers with extreme caution!
Click here to go back to 'Using Tables' or click close below to leave this site.