Part of what makes HTML tables so magical is that you can color the backgrounds of individual cells with solid colors, and thus do some fairly nifty interface design without ever using an image. You could even create something as complex as the "floating palette" element below without ever using a GIF:
But why? As a feat of HTML authoring, it would be quite an accomplishment, but considering the number of table cells it would take, you're talking about a lot of code. In these situations, look for ways to replace complex tables with an image. In this example, the entire bottom of the floating palette (below the text) could be a GIF. The savings in table code would probably outweigh the additional file size of the GIF.
Filling Cells
Expert table-makers will tell you that unless you put something within a table cell, it can sometimes collapse or not display. For example, the following code creates a table with three cells: yellow, light gray, and orange:
<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD WIDTH=50 BGCOLOR=yellow></TD>
<TD WIDTH=200 BGCOLOR=lightgrey>Behold the power of cheese.</TD>
<TD WIDTH=50 BGCOLOR=orange></TD>
</TR>
</TABLE>
Here is the result: | Behold the power of cheese. | |
The middle cell appears, but the yellow and orange backgrounds don't appear because the first and third cells are empty. To make the cells show up, you'll need to put something in them. Many people insert invisible spacer GIFs of the appropriate width (in our case, 50 pixels), but that's not necessary since the column widths are already specified as 50. All we really need is a simple nonbreaking space character entity: .
<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD WIDTH=50 BGCOLOR=yellow> </TD>
<TD WIDTH=200 BGCOLOR=lightgrey>Behold the power of cheese.</TD>
<TD WIDTH=50 BGCOLOR=orange> </TD>
</TR>
</TABLE>
Now all the cells are visible:| | Behold the power of cheese. | |
All you need within empty cells is a . A spacer GIF isn't necessary and results in too much code.
next page»
