The Art of Cross-Browser Table Building | 2

[previous]

The Art of Cross-Browser Table Building

The magic of a transparent gif...

Many times, just hard coding cell widths with pixel sizes won't suffice either. A better way to make sure they don't render smaller is to use a 1 pixel-square transparent .gif and in the IMG tag set it to the width of the cell you want to hold size. This will assure it doesn't get smaller, but will do nothing for getting bigger. However, if you do not have dynamic tables, this transparent .gif can be used in each column to make darn sure that table holds its size perfectly. I have myself, on occasion, put a 1 pixel high TR at the top of the table using nothing but transparent .gifs to hold the size of the table for the remainder of the page. Just figure out exactly how many columns you will have, and what size they need to be and fill the row with the appropriate IMG widths. This can help make managing complex tables easier because you always have a reference right at the top of the page as to how many columns you have. Thus, the browser can quickly figure out ROWSPANs or cell WIDTHs very quickly and easily from anywhere on the page.

Don't Nest too deep...

Keeping your level of nested tables to a minimum is also helpful in rendering dynamic tables, nesting a second table in the main table is fine, sometimes even helpful, a third can be problematic, and a fourth often lethal to your site. Netscape's rendering engine can choke on nested tables much faster in a dynamically sized site than a static one. Keep your tables as simple as possible, rather than coding a bunch of ROWSPAN and COLSPAN cells at 10 pixels wide and tall to space your content apart. Instead see if CELLSPACING or CELLPADDING will do the trick. If used wisely, these properties can keep your table much simpler and it will render much better in any browser. If you are using dynamic content, such as news stories drawn from a database, try to have them laid out in paragraphs rather than table cells, as well as any other content. With this the content will wrap when it has to and gracefully fill the whole cell it occupies.

In Conclusion...

The moral of the story is just to say that most cross-browser issues can be worked around. You just need to be creative and not afraid to try something different, it just might work. Happy coding, and good luck in the NEXT generation of browsers, I am sure version 7's will bring a whole new group of issues for us to complain about and then tackle and conquer.

[Ed: Note that some less complex layouts can also be achieved using CSS2, we'll have more on these soon.]

"Dan brings with him years of Web development and multimedia experience. He has developed internet and intranets for franchisees of Computer Renaissance and Music Go Round stores. Dan is also very involved in the music industry with a heavy background in live and studio audio engineering. In the last four years, Dan has produced recordings and streaming media for several musical artists worldwide. Currently he is working as the Web site and Streaming Media Producer for Retek for the corporate Web site, He can be contacted at www.retek.com. and operating his own audio production and Web development business, dB Masters Audio Prod. (www.dbmasters.net)." He can be contacted at [email protected].

[previous]