|
HTML Tip:
Cross-Browser Tables
by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.
If you use HTML tables to control the layout of your Web pages, here's one of our best browser compatibility tips: always include the attribute BORDER="0". Do this even though the default for the BORDER attribute is zero.
The reason for this is that Netscape Navigator puts additional white space around each table cell unless you explicitly set BORDER="0". If you're using your TABLE to control the positioning of other elements within the page, this little bit of extra space can affect alignment.
For an example, look at the images below. They show a table containing four black squares. We want this table to look identical under both Netscape and Microsoft browsers. However, the table is rendered differently, with Netscape Navigator showing more space between the squares.
In this example, the TABLE tag is defined as follows:
<TABLE CELLSPACING="2" CELLPADDING="2">
|
Now look at these same tables again, this time with BORDER explicitly set to zero. The separation between the squares is now the same.
Much better. In this second example, the TABLE tag is defined as follows:
<TABLE BORDER="0" CELLSPACING="2 CELLPADDING="2">
|
While you're at it, it's also a good idea to set CELLSPACING and CELLPADDING to specific values. Do this for the same reason: so they will have the same values under different browsers. In short, never trust the browser default values for TABLE tag attributes.
NetMechanic's HTML Toolbox will alert you to other browser incompatibility issues on your Web pages. Use it to look for HTML code errors, check for broken links, and identify HTML code that may not display correctly across browsers.
|
