Setting the Table - Trials and Tabulations - HTML with Style

Trials and Tabulations

Setting the Table

Page Layout Using Tables

The first thing people realized when they saw tables is that tables can be used to split the display into rectangular boxes in any layout. Through intelligent use of the ROWSPAN and COLSPAN attributes, cells can have any layout you want. Back before CSS appeared on the scene, this was an incredibly powerful way to lay out pages that until then were forced to have a normal flow.

I don't have to tell you why this is bad. Making a document that is included in a table when its contents are not data that has to be tabulated is bad because you just throw document semantics out the window. Also, we have seen that in Navigator, complicated tables and complicated CSS are mutually exclusive unless you are prepared to be amazed at what bugs can creep into a popular, release-version software product by a respectable company. Although these problems are clearly bugs in the traditional sense of the word, if you're going to create a Web page that you wish to be available to millions of people, a good chunk of which will be using Navigator, you just have to do things Netscape's way.

Some simple rules to follow when designing layouts using tables:

1. Use only TABLE, TR and TD elements. Mess with any of the other ones and Navigator is bound to crash sooner or later. Anyway, the semantics of the rest of the elements are more or less incompatible with table-based layout.
2. Make sure that if you remove all of the table-related tags from your document, the structure makes sense. This is good for several reasons: One, there is a sound document structure if the document is looked at from top to bottom. Two, older browsers that don't understand tables (or newer ones like lynx, a text-based browser that still doesn't do tables) will ignore these tags anyway, so your document structure will be meaningful to them. The best way to do this is to design your document as a linear document first, and then add the table elements around this to lay it out in an interesting way. This process is similar to designing a document in HTML and then designing a style sheet to apply to it.
3. Avoid CSS layout directives at all costs. If you see something go wrong, this is the first thing to check. CSS visual formatting model properties do not co-exist peacefully with tables.

Now all you have to do is create a table around the section of your document that you wish to lay out, and put sections of the document in different cells. Arrange these cells as you wish by putting them on different rows and setting their row span, column span and width, and hey presto! You just made a crude layout.

This method is not preferred but it is widely used, and for a good reason: It's the only reliable way to lay out an HTML document. You'll find it on many pages, including WebReference.com's front page. You will probably have to use it for pages that need a layout to keep a lot of information in the same part of the screen and will be accessed by many people. Just don't overdo it. If your page could really benefit from a layout, use this method. Otherwise, stick with normal document flow. Most of the time, it makes more sense to the reader as well as being the right way to do things.

Produced by Stephanos Piperoglou

URL: https://www.webreference.com/html/tutorial11/8.html
Created: Feb 10, 1998
Revised: Feb 16, 1999