The Art of Cross-Browser Table Building

[next]

The Art of Cross-Browser Table Building

By ( Dan Ball )

Back in the version 3 era of browsers, compatibility was more of an "it supports it or it doesn't" choice. Now in the version 5 going towards 6 era it is more of a "well, it sort of supports it, should we use it or not" type of choice. My goal here is to bring to light some of the issues facing front-end coders in this new generation of browsers as it relates to tables.

Too many browsers... Too little time...

Even though Netscape 6 is out in its official release and IE6 is out in beta at the time of this writing, I still stand by my statement above saying "Now in the version 5 going toward 6 era" because Netscape 6 is, in my opinion, far from a completed browser as it has MANY, MANY issues with simple tasks. My method with Netscape 6 is to get everything working as much as possible, but without interfering with it's operation in IE 4 and 5 or Netscape 4.xx. Therefore, the majority of this article will be focused on IE 4.x, IE 5.x and Netscape 4.xx.

Putting it all on the Table...

One of the biggest problems I see for front-end developers is dynamic table construction. Netscape 4.xx's rendering of dynamic tables that resize with the browser window is frustrating at best, and seemingly impossible at worst. It goes without saying that even if a browser is forgiving of sloppy code, like IE, a good developer will still keep his/her code as clean and valid as humanly possible. IE forgives non-closed TABLE, TR, and TD tags and continues to render the page to the best of its ability, whereas Netscape just chokes. You can blame Netscape all you want for this, but the fact is, in this case it is purely the developer's problem.

If you have a perfectly coded and validated dynamic table and it still doesn't render properly, consider this: theoretically, tables render the pixel-coded table cells solid to that pixel size and render the percentage-sized (WIDTH="x%") cells around them. With Netscape 4.xx this is not always the case. It will render the table quite well, but rarely perfect if you are mixing pixel and percentage-sized cells.

The obvious answer to this is to do what many do, and just hard code your site to a given pixel size and if the visitor has a bigger window, the rest will just be white space. But it is possible to build a cross-browser dynamic site, you just need to focus your technical and creative juices a little differently. Let's say your page, like many, is one big table, right after the BODY tag you have a TABLE tag and right before /BODY you have the /TABLE tag. For that page to resize dynamically with the window your best place to start is to have all you percentage-sized cells in one column from top to bottom, don't overlap dynamic cells, doing this, all columns are hard-coded to the pixel but one, and the one column that is dynamic should contain no COLSPAN or ROWSPAN properties. If you need additional formatting in the dynamic column, nest a table inside the cell and set it at 100% WIDTH. This will help the initial table render cleaner and the nested one may help push the table into place. If you overlap dynamic cells with COLSPAN and ROWSPAN properties the resulting pixel-sized cells will rarely render to your satisfaction.

One place where this less-than-perfect table rendering has bitten me is when I hard code a 1 pixel cell going the whole height of the page with a different BGCOLOR to act as a 1 pixel line that displays between content columns of a page. This is useful in news sites that want to look more like a newspaper and have their content displayed in columns rather than one full width column. I found that there is one little trick to get around this. If you are like me, you optimize your sites to look best in 600x800 resolution, and hope for the best in 1024x768. Well, when you're viewing a page in Netscape on a 1024x768 monitor those 1 pixel cells become about 4 pixels wide. Your BGCOLOR line ends up fatter and not very attractive. So I just make a graphic 1 pixel tall and about 10 pixels wide, make the first pixel the color you want the BGCOLOR to be and the rest the color of the background of your site. Then, set the graphic as the BACKGROUND of your cell. The line will not appear perfectly centered between columns, but you will still see the line as a 1 pixel column. I have used this trick several times and it works great.

[Ed. note: We recommend optimizing your pages to work on any width screen (including some Macs etc. that have less than 600 pixel wide screens) using fluid tables as the author recommends, with percentage widths for the outer table.]

Contents The magic of a transparent gif...

[next]