|
HTML Tip:
Close Your Table Tags
by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.
If you use nested tables on your page, be sure to close your TR and TD tags. If you don't, your tables may not be rendered correctly in Netscape Navigator.
HTML tables are built using a combination of the TABLE, TR, and TD tags. According to the HTML standards, the last two of these tags don't need to be closed; the </TR> and </TD> tags are optional.
For example, this is legal syntax for a table having two rows and two columns, with each table cell having a different background color:
<TABLE BORDER=2>
<TR>
<TD BGCOLOR="red"> cell 11
<TD BGCOLOR="pink"> cell 12
<TR>
<TD BGCOLOR="yellow"> cell 21
<TD BGCOLOR="tan"> cell 22
</TABLE>
|
If this table is the only thing in your HTML source, it will display just fine under all major browsers, including Netscape Navigator 4.x, Netscape Navigator 6.x, and Microsoft Internet Explorer 4.0 and up.
However, Netscape Navigator has a long-standing bug in its table parsing algorithm that appears when a table is nested inside another table. Suppose we place the table from the last example inside another single cell table, as shown below:
<TABLE BORDER=5>
<TR>
<TD ALIGN="center">
<B>outer table</B>
<TABLE BORDER=2>
<TR>
<TD BGCOLOR="red"> cell 11
<TD BGCOLOR="pink"> cell 12
<TR>
<TD BGCOLOR="yellow"> cell 21
<TD BGCOLOR="tan"> cell 22
</TABLE>
</TABLE>
|
Figure 1 shows how this page looks in Internet Explorer 4.0.
Figure 1 - Nested Tables
Viewed with IE4
|
|
Figure 2 - Nested Tables
Viewed with NN4
|
Now look at Figure 2, which shows the same code as viewed by Netscape Navigator 4.7. Notice that the second column of each row has disappeared! Even Netscape 6.0, which corrected so many browser incompatibility problems, displays it like this.
We can easily fix this by closing each of the TR and TD tags, as shown below:
<TABLE BORDER="5">
<TR>
<TD ALIGN="center">
<B>outer table</B>
<TABLE BORDER="2">
<TR>
<TD BGCOLOR="red"> cell 11 </TD>
<TD BGCOLOR="pink"> cell 12 </TD>
</TR>
<TR>
<TD BGCOLOR="yellow"> cell 21 </TD>
<TD BGCOLOR="tan"> cell 22 </TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
|
Surprisingly, this bug has been around since Navigator 2.0. Perhaps Netscape will correct this bug in future versions. Even so, older versions will remain in circulation for a long time. It's best to play it safe and close your TR and TD tags.
|
