The following is a series of demonstrations on how tables vary in Netscape. Hey, IE has never had trouble with tables. But Netscape is nothing but trouble for any web designer/developer.

RULE #1. To start, Netscape will not even display a table unless all the tags are correct. IE is very forgiving. Netscape forgives not. So if you ever encounter a situation where a table shows up in IE but is "gone" in Netscape, look for missing tags or misplaced tags.

RULE #2. Netscape doesn't like empty cells. It hates them. It ignores them and won't even acknowledge anything to do with them. In THIS example, there are three tables with the center cell having either a COLOR or a BACKGROUND. View it in IE and everything is there. View it in Netscape and you only see the center cell on the bottom table. The first two tables' center cells have nothing in them. The bottom one has a "space" ( ). Some developers use a clear gif, I use speck.gif as a  cell filler upper for Netscape.

A further detailed discussion can be found here:

http://www.frontiernet.net/~willshak/nn_tables.html

Rule #3. Nested tables are trouble for Netscape, especially if you want to have a general table background with unique cell colors on top of that. Examples with a code workaround is available HERE.

Rule #4. Sizing tables and cells as you want them sized with Netscape is pretty much impossible without using some "shim" gimmicks or naming pixel values for each cell's width and height. Of the two methods, by far the most reliable is the "shim" method since occasionally, Netscape doesn't want to recognize pixel values even when named.  As all carpenters know, a "shim" is a piece of wood you use to plumb and level a door or window frame. It is used the same way with tables when dealing with Netscape (and even IE). I use my "speck.gif" as a general shim for tables. It is 1 pixel by 1 pixel but you can change that to anything you need in the HTML image attributes "width =" and "height =".

In my experience, it is always best to size tables using pixels rather than percentages. However, I usually use percentages when I'm nesting a simple (one or two column) table inside another table that's been given a pixel width.

When you do use pixels to size a table, you must make sure that every cell in that table has a pixel width attribute, otherwise Netscape will pretty much ignore all the sizing attributes. And your arithmetic for sizing cells in pixels has to be absolutely correct or Netscape won't recognize them.

For instance, if your table is 400 pixels wide and you have three columns of cells, and the width of all three columns doesn't add to 400, you're in trouble.

This all comes into play when you are designing tables with a lot of formatting, columns, cells, etc. which is usually found in menu tables. Click HERE for an example of this discussion.

Rule #5. The biggest trick in FrontPage for exiting your cursor from a table and creating a space above or below a table: place your cursor in the first or last cell in a table and press Ctrl plus Enter. Out that cursor hops. I can't tell you how many times I went into the HTML view and manually put in a " " between tables to create a space above or below tables to insert text, whatever. About 3 years ago, a FrontPage dabbler friend of mine showed it to me. One of the most useful tips in FrontPage I've ever come across.

Rule #6. Try not to use borders on tables because they render so differently in each browser. Instead, I usually set the cell spacing at "1" and color all the cells. This creates a clean line the same color as the page or table background and looks exactly the same in both browsers:

This:

date time event fee total

versus this:

date time event fee total

The menu header at the top of this page and at the bottom is an example of using the cell spacing to define a "border" between cells. Borders can also sometimes make it more difficult to read column items even though they are a more dramatic and even 3 dimensional rendering. But most people would agree that the top gray cell table is easier to read than the bottom gray bordered table.

Rule #7. Netscape doesn't like one cell to span too many others. Why? It would be easier to figure out the Florida election last fall. Therefore, it is far better to break cells down into "stacked" tables than to create one big table with a variety of sized and spanned cells. This becomes especially true when you are designing some table that is a big component of a design, like the horizontal menus on this page. For an example of what we are talking about, click HERE.

Rule #8. IE isn't perfect when it comes to tables either. Sometimes it demands that you specify pixel dimensions for everything IF you want it to recognize certain elements in a highly formatted table, like an image. What? See the example HERE for a demonstration.

 

W H I T T I E R   C O L L E G E
13406 East Philadelphia » P.O. Box 634 » Whittier, CA 90608-4413
Main: (562) 907-4200 » Fax: (562) 698-4067
W e b   T e m p l a t e   M a n u a l