HTML Frames, Tables & Page Layout

Some people like to use HTML frames to create the page layout for their websites. I would recommend you avoid them if you can &ndash and you probably can.

HTML Frames can be useful on occasion but generally speaking, "the pain is greater than the gain". Too many users complain of problems with frames than you can afford to ignore. So if you insist on using them, you'll need to create an alternative no-frames set of pages for these users. Honestly, 99% of the time HTML frames just aren't worth the trouble!

On top of that, most search engine spiders also encounter difficulties with frames. This means you'll either have to spend additional time learning how to overcome these shortcomings or be doomed to low search rankings.

In most of the situations in which you might feel you need to use HTML frames for your page layout you can usually use tables equally effectively. If not on their own, then in conjunction with SSI (Server Side Includes) which also allow you to write separate pages for inclusion in another "main" page.

The left column navigation bar, for example, is one area that it may seem appealing to place in it's own frame. The content remains the same on every page and should you need to change it, you can effect a global change just by altering a single file.

What many people don't realize that you can achieve almost the same result by using an SSI callout in a table cell within the page. This will reference another file on the server which will be written into this location when called. To browsers and search engine spiders alike the page appears as a normal web page and doesn't give rise to any of the problems associated with the use of frames.

Things have moved along a bit since this article was first written, and you can now also employ CSS (Cascading Style Sheets) to create a page layout with either a left or right hand navigation bar on every page without resorting to the use of HTML frames or tables at all.

Whilst we're on the subject of tables, don't make the same mistake I did years ago when first using them. Tables are great for quick and easy page layout, and enable you put things exactly where you want them to appear on the page. So I made one big table for the whole page, split it up into various rows and columns, then put (nested) other tables inside these and in some places yet smaller ones inside them.

Big mistake.

The thing with tables is that the browser downloads all the contents of the table before it actually draws anything on the screen. This includes the contents of any nested tables. So what did that mean for my beautiful page?

It took forever to download!

Actually, it didn't really take that much longer, but it seemed like it did. The page remained completely blank until the browser had downloaded every single component and then suddenly flung them all onto the page at once. It goes without saying that leaving your visitors staring at a blank page for ages like this is not a good way to keep them on your site.

As ever, learn from your mistakes – or my mistakes – and split your page up into several separate tables. Keep the whole lot as simple as possible and try to avoid nesting more than two layers of tables inside another. Browsers also take longer to draw tables if you don't specify the sizes, as it has to calculate how big the table needs to be to fit in all the contents.

You can also employ tables to add color to a page in preference to slow loading graphics, or to effectively draw attention to text placed in a colored box on the page, although as previously observed you can now do all this even better with CSS.