Maddog's HTML Primer for Real People

Chapter 11, Lesson 6a

Ch 11, L 6a - The Color Pallette Table Another Way

In the last lesson, we generated a table of the "standard" 16-color pallette, coloring each of the sixteen cells' backgrounds with the color they describe. In that example, we used nested tables to accomplish that graphic effect. If we are willing to lose a portion of our audience, namely those who don't have the very latest browsers, we can accomplish the same effect without nesting tables. [If nothing else, it makes our source code a lot less confusing]. You see, in the last example, the only reason we were "nesting" tables is that we wanted to specify a different background color for each "color" in our table of sixteen colors. While the official HTML spec doesn't require 'BGCOLOR' attributes to be supported for tables, many browsers that support tables, also support 'BGCOLOR'. Some of the latest versions (including Netscape and Internet Explorer) also support the 'BGCOLOR' attribute for table-data (i.e., '<TD>'). If we are satisfied to target only those browsers then, we can eliminate the "nested" tables, and simply specify the 'BGCOLOR' attribute inside each '<TD>' opening tag, simplifying our HTML source code considerably.

Let's see the 16-color pallette table re-accomplished without nested tables:

COLOR TABLE
BLACK "#000000" WHITE "#800000"

SILVER "#C0C0C0" GRAY "#808080"

RED "#FF0000" MAROON "#800000"

FUSCHIA "#FF00FF" PURPLE "#800080"

BLUE "#0000FF" NAVY "#000080"

AQUA "#00FFFF" TEAL "#008080"

LIME "#00FF00" GREEN "#008000"

YELLOW "#FFFF00" OLIVE "#808000"

**COLOR TABLE**
BLACK	"#000000"	WHITE	"#800000"
SILVER	"#C0C0C0"	GRAY	"#808080"
RED	"#FF0000"	MAROON	"#800000"
FUSCHIA	"#FF00FF"	PURPLE	"#800080"
BLUE	"#0000FF"	NAVY	"#000080"
AQUA	"#00FFFF"	TEAL	"#008080"
LIME	"#00FF00"	GREEN	"#008000"
YELLOW	"#FFFF00"	OLIVE	"#808000"

Now, let's look at the source code. Compare this code with the code in the previous lesson, which should have accomplished the same results (approximately).

<TABLE BORDER=10 CELLSPACING=0 CELLPADDING=0>
<CAPTION ALIGN="TOP"><B><U>COLOR TABLE</U></B></CAPTION>
<TR ALIGN="CENTER">
           <TD WIDTH=100 BGCOLOR="BLACK"><FONT COLOR="SILVER"><B>BLACK</B></FONT></TD>
           <TD WIDTH=100 BGCOLOR="BLACK"><FONT COLOR="SILVER">"<B>#000000</B>"</FONT></TD>
           <TD WIDTH=100 BGCOLOR="WHITE"><B>WHITE</B></TD>
           <TD WIDTH=100 BGCOLOR="WHITE">"<B>#800000</B>"</TD></TR>
<TR ALIGN="CENTER">
           <TD WIDTH=100 BGCOLOR="SILVER"><B>SILVER</B></TD>
           <TD WIDTH=100 BGCOLOR="SILVER">"<B>#C0C0C0</B>"</TD>
           <TD WIDTH=100 BGCOLOR="GRAY"><FONT 
                   COLOR="SILVER"><B>GRAY</B></FONT></TD>
           <TD WIDTH=100 BGCOLOR="GRAY"><FONT 
                   COLOR="SILVER">"<B>#808080</B>"</FONT></TD></TR>
...(pattern repeats)...
</TABLE>

This source code is a lot more readable that the last lesson's implementation.

I really don't know whether the 'BGCOLOR' attributes will ever be officially included in the HTML specs for tables, and I really can't speculate how widespread it's use will be in browser software. Therefore, I find it really hard to reccommend one approach over another, although if you really want to maximize the number of people who see your web page as you intended them to, I suggest using nested tables.

Overseer: Monty Northrup ...

... leave e-mail ...