Maddog's HTML Primer for Real People

Chapter 11, Lesson 6

Ch 11, L 6 - Different Colored Cells: The Color Pallette Table

In this lesson, we'll look at another practical example of specifying different colors for different cells in a table. In this example, we'll generate a table of the "standard" 16-color pallette, coloring each of the sixteen cells' backgrounds with the color they describe.

This example uses the ability of most advanced browsers to calculate "nested" tables. As we said before, a nested table is one that is entirely included inside the opening and closing tag of a data cell of another table. In this example, there are many nested tables (although only one level of nesting).

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"

In the above example table, we'll establish a single "top level" table. This table will contain 16 cells, arranged in 8 rows, each having 2 table-data cells each. In each of those 16 (top-level) data cells, we'll generate a complete "nested" table. Why? Because, a table allows the author to specify it's background color, using the '<TABLE>' tag's 'BGCOLOR' attribute. Since this is a table of the sixteen colors of the standard windows pallette, we'll assign the color we're describing to the background (of each of the 16 nested tables). Then, for each of the nested tables, we'll have one row (because at least one row is mandatory), and two table-data cells, one for the color name, and one for the color's RGB code. Naturally, we'll adjust the font-color (of the text) if we need to, to give good contrast with the specified background color.

In order to get successful results when using nested tables, we have to be careful to have a closing tag for every opening tag. A trick I like to use to make sure I have the right number and sequence of tags is to create the entire tag pair before I start entering the contents of that tag, then back up to the point between the opening and closing tags, and enter the contents. For example, if I want to create a table with one data element that says "wow", I would first create the entire table tag pair, like this:

then create the table-row tag pair inside the table tag I just created, like so:

then create the table-data tag pair inside the table-row tag I just created, like so:

and finally, I put the contents of the cell inside the table-data tag:

You can see that by using this trick of the trade, I'm able to prevent missing tags before they start. A missing tag in a table with nested tables will almost always cause unexpected results, and for a large table, it can be very difficult to find.

Notice that we've specified the 'WIDTH' attribute in each of the cells in the nested table. It's important to do this if we want the 16 cells to align into columns and rows. "But wait!", you say...(I know what you're thinking). The whole idea of tables was to let the browser do the calculations whenever possible. But when you "nest" a table within the data cell of another table, the browser must begin it's calculations anew, saving the results it already has for the top-level table, and continue by calculating the nested table based on a whole new set of assumptions. In other words, when the browser calculates for a "nested" table, it does so without any knowledge of the columns and cell sizes of the previous (higher-level) table. If you specify the 'WIDTH' explicitly for each cell in each nested table, then you'll assure they line up (provided you don't make the text in any cell too long). Conversely, if you don't specify each cell's width, the browser will calculate what's needed based on the length of the text.

Finally, notice that we've specified CELLSPACING, CELLPADDING, and BORDER all equal to zero for the nested tables only. This way, the border properties of the nested table dont get lumped on top of (or rather, in addition to) whatever border the top-level table has. If we had wanted some division between the color name and the RGD code, however, we might have specified a border of '1' for the each of the nested tables.

Enough talk! let's see how we actually coded the color table shown above:

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

Overseer: Monty Northrup ...

... leave e-mail ...