|
HTML Tip:
Filling In Colored Table Cells
by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.
If you use colored table cells on your page, be careful: your colors may not display under Netscape Navigator. But one simple step can ensure that your table colors display under all major browsers.
Both the TABLE and TD tags allow you to set a background color through the BGCOLOR attribute. If you want to set the color of a table cell, you can do it with a statement like this:
<TD BGCOLOR="black"> cell contents </TD>
|
You can use this to add a little extra color to your Web page. For example, you might use this code to create a logo for your page:
<TABLE BORDER="0" CELLPADDING="10">
<TR>
<TD BGCOLOR="black" WIDTH="50"> </TD>
<TD WIDTH="100" ALIGN="center">
<FONT SIZE="4">
Welcome <BR> to My Page
</FONT>
</TD>
<TD BGCOLOR="black" WIDTH="50"> </TD>
</TR>
</TABLE>
|
Figure 1 shows this table as rendered by Microsoft Internet Explorer 5.0.
Figure 1 - Colored Table Viewed Under
Internet Explorer 5.0
This will work fine under all major browsers, so long as your table cell contains some sort of data. But if your table cell is empty, you may not get the results you expect.
Netscape Navigator doesn't display empty table cells or their background color. Figure 2 shows how our sample table looks when viewed with Navigator 4.02. Notice that our black cells aren't rendered at all. This is true for all versions of Navigator.
Figure 2 - Colored Table Viewed
Under Navigator 4.02
Once you're aware of it, this problem is easy to solve. You need only put some HTML code or text inside the table cell. For example, you could change our table code to include a BR tag inside each of the colored cells. Even better, you could use the (no-break space) character to achieve the same effect, like this:
<TABLE BORDER="0" CELLPADDING="10">
<TR>
<TD BGCOLOR="black" WIDTH="50"> </TD>
<TD WIDTH="100" ALIGN="center">
<FONT SIZE="4">
Welcome <BR> to My Page
</FONT>
</TD>
<TD BGCOLOR="black" WIDTH="50"> </TD>
</TR>
</TABLE>
|
Now our table will display the same under both major browsers.
|
