Taking Business to the Web

The Technology: Tables & Frames Continued

by Joe Selzler

This is a continuation of my last article on developing a frames based website. (See CBI Jan.-March 2002)

As we saw last time using Frames to lay out your home page has some desirable advantages. First, frames allow you to divide your home page into sections, such as “Navigation” and “Content”. Second, frames allow you to change one portion of the page while leaving another portion constant. Thus the navigation portion can be set to never change while the content portion can change depending on which link is clicked in the navigation portion. Thirdly, frames make it easier to maintain a “Navigation” bar because you only have to create it once and when editing, you only have to edit it in one place.

However, we also saw that frames have a few disadvantages which can be very important for your website. The first is that frames are difficult for search engines to deal with, reducing your chances of getting a good position in a search engine. The second is that even though frames allow you to divide up your home page into sections, they are not as flexible as tables. That is why for many websites tables are the preferred option for layout and that is why we are going to discuss them now.

Tables, the Preferred Option

There may be a few of you who are asking right now what a table is, so I am going to give you a brief and simple introduction. The Table below is a simple table of rows and columns. Each row, except the first row, has been split into 4 cells. Generally tables are used to show the relationships between data; in this case some of my interests. What you might find interesting, however, is that this paragraph (the one you are reading) is one cell of another table, which contains it and the table at below. (I merely turned off borders for the larger table.)

THIS IS A SAMPLE TABLE
Hobbies Cars Computers Pets
Models Lotus Compaq Spot
Cameras Mondeo HP Polly

This is the great thing about tables -- you can arrange them any way you like and if you need to do something extra special you can place tables within other tables, as I have done above. If you study the table above a little you will probably see right away how you can use something like it to lay out your web page.

Let’s take a few moments to draw out in your mind an idea you might have for a home page. Suppose you want to have a title bar at the top of your home page, with a navigation bar down the left side. Suppose also that you want to have all of your content below the title bar and to the right of your navigation bar. The next section shows you what it might look like.

Example of a Tables Based Home Page

You can see in the table below the flexibility you can add to your homepage with tables. You can vary the sizes of each cell, change colors and even use different fonts. You can have endless variation by placing one or more tables within the “Contents” cell.

The Home Page Developer
(Navigtion Bar)
Home
Tables
Frames
FAQ's
Contact Me

Contents:
On this website I talk all about developing a home page.

I don't talk about feeding your parrot!

You can make each item in the “Navigation” bar look like a button by changing this cell into a table itself and adding borders to just this table. See table below. The use you make of tables and the effects you achieve are completely up to your own imagination

The Home Page Developer
(Navigtion Bar)
Home
Tables
Frames
FAQ's
Contact Me

Contents:
On this website I talk all about developing a home page.

I don't talk about feeding your parrot!

Where to Find Help With Tables

For a complete course on the use of tables you could use a book like Teach Yourself HTML 4 by Laura Lemay. Published by Samms Press it is available from bookstores or from the Internet itself. The best way to find it on the web is to type in the above title or author name in a search engine and you will probably find a list of stockists for it. There are probably many other books just as good, so perhaps a trip to a bookstore where you can browse wouldn’t be a bad idea. If you are completely new to HTML you might consider a slightly less ambitious treatment of the subject. Though I do not like the name, the yellow book HTML for Dummies is a lighter introduction to the subject. However, if you are serious about web page design you will want to progress to the Laura Lemay book as soon as you are able. If you want to see what a tables based page looks like go to the website www.whyamialive.com or www.worldinvisible.com The former uses several tables within one cell while the later is divided up a bit less. You will also notice a few other effects that happen there as well, some of which I will be discussing in the articles following this one. If you have a question about anything you see on either of those pages do not hesitate to contact me by e-mail at webmaster@worldinvisible.com.

Return to Table of Contents