Maddog's HTML Primer for Real People

Chapter 11, Lesson 7

Ch 11, L 7 - Different Colored Cells: Enhancing Tabular Data

In this lesson, we'll generate a table of tabular data, and show a way to use color to make the table more readable.

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).

Flower Type Observed

FLOWER JAN FEB MAR APR MAY JUN

Wild Plum none sparse frequent sparse none none

Redbud none frequent frequent none none none

Dogwood none none sparse none none none

Bluebonnet none none sparse heavy heavy sparse

Paintbrush none none sparse heavy frequent sparse

Primrose none none none sparse heavy sparse

DYC none sparse some heavy heavy heavy

Phlox none none some heavy some sparse

Wild Pear none none frequent sparse none none

Clover none sparse heavy heavy frequent frequent

Indian Blanket none none none sparse heavy heavy

Poppy none none none some heavy heavy

Verbena none none sparse frequent heavy frequent

Spiderwort none none some heavy heavy some

Dayflower none none none some heavy some

Rain Lily none none none some some some

Nightshade none none sparse some some heavy

Bull Nettle none none none sparse some heavy

Milkweed none none none sparse heavy some

The example immediately above shows another practical example for using different colors in different cells. Again, we've utilized nested tables. In this case, the top level table has one data cell in each row, and a table is nested in that data cell. Like the last example, we can specify a different color for each nested table. We'll specify white for most of the nested tables, but every fifth table we'll specify a slightly shaded 'BGCOLOR'. This makes our overall table more readable, by highlighting every fifth row.

As in the previous example, it's important for us to explicitly specify the width of each data cell in each nested table, so that the effect of "columns" will be displayed. It will be up to us to make sure there's enough width specified to accommodate the text in each cell, otherwise the browser will override our specification, and the table won't look like we thought it would.

By the way, it really becomes important to use an HTML validation service when generating large tables or nested tables. Browsers are generally intolerant of mistakes in tables, but each behaves somewhat differently when it encounters a mistake. If you've built a table using nested tables, and it seems to look good on your local browser, don't be satisfied until you've validated the code, using "strict" validation rules.

Now, look over some of the features of the example table, like the caption, the borders, and the heading cells, and then examine the source code to see how we've handled them:

<TABLE BGCOLOR="SILVER" BORDER=0 CELLPADDING=0 CELLSPACING=1>
<CAPTION><B>Flower Type Observed</B></CAPTION>
<TR><TD>
    <TABLE BGCOLOR="#E0E0E0" BORDER=0 CELLPADDING=0 CELLSPACING=0>
        <TR ALIGN="CENTER">
            <TH WIDTH=150>FLOWER</TH>
            <TH WIDTH=75>JAN</TH>
            <TH WIDTH=75>FEB</TH>
            <TH WIDTH=75>MAR</TH>
            <TH WIDTH=75>APR</TH>
            <TH WIDTH=75>MAY</TH>
            <TH WIDTH=75>JUN</TH>     
        </TR>
    </TABLE>
</TD></TR>
<TR><TD>
    <TABLE BGCOLOR="WHITE" BORDER=0 CELLPADDING=0 CELLSPACING=0>
        <TR ALIGN="CENTER">
            <TH WIDTH=150>Wild Plum</TH>
            <TD WIDTH=75>none</TD>
            <TD WIDTH=75>sparse</TD>
            <TD WIDTH=75>frequent</TD>
            <TD WIDTH=75>sparse</TD>
            <TD WIDTH=75>none</TD>
            <TD WIDTH=75>none</TD>     
        </TR>
    </TABLE>
</TD></TR>
<TR><TD>
    <TABLE BGCOLOR="WHITE" BORDER=0 CELLPADDING=0 CELLSPACING=0>
        <TR ALIGN="CENTER">
            <TH WIDTH=150>Redbud</TH>
            <TD WIDTH=75>none</TD>
            <TD WIDTH=75>frequent</TD>
            <TD WIDTH=75>frequent</TD>
            <TD WIDTH=75>none</TD>
            <TD WIDTH=75>none</TD>
            <TD WIDTH=75>none</TD>     
        </TR>
    </TABLE>
</TD></TR>
<TR><TD>
    <TABLE BGCOLOR="WHITE" BORDER=0 CELLPADDING=0 CELLSPACING=0>
        <TR ALIGN="CENTER">
            <TH WIDTH=150>Dogwood</TH>
            <TD WIDTH=75>none</TD>
            <TD WIDTH=75>none</TD>
            <TD WIDTH=75>sparse</TD>
            <TD WIDTH=75>none</TD>
            <TD WIDTH=75>none</TD>
            <TD WIDTH=75>none</TD>     
        </TR>
    </TABLE>
</TD></TR>
<TR><TD>
    <TABLE BGCOLOR="WHITE" BORDER=0 CELLPADDING=0 CELLSPACING=0>
        <TR ALIGN="CENTER">
            <TH WIDTH=150>Bluebonnet</TH>
            <TD WIDTH=75>none</TD>
            <TD WIDTH=75>none</TD>
            <TD WIDTH=75>sparse</TD>
            <TD WIDTH=75>heavy</TD>
            <TD WIDTH=75>heavy</TD>
            <TD WIDTH=75>sparse</TD>     
        </TR>
    </TABLE>
</TD></TR>
<TR><TD>
    <TABLE BGCOLOR="#E0E0E0" BORDER=0 CELLSPACING=0 CELLPADDING=0>
        <TR ALIGN="CENTER">
            <TH WIDTH=150>Paintbrush</TH>
            <TD WIDTH=75>none</TD>
            <TD WIDTH=75>none</TD>
            <TD WIDTH=75>sparse</TD>
            <TD WIDTH=75>heavy</TD>
            <TD WIDTH=75>frequent</TD>
            <TD WIDTH=75>sparse</TD>     
        </TR>
    </TABLE>
</TD></TR>
(...pattern repeats...)
</TABLE>

Overseer: Monty Northrup ...

... leave e-mail ...