Maddog's HTML Primer for Real People

Chapter 10, Lesson 9

Ch 10, L 9 - Background Color for Tables

If you already know how to specify the background color for an HTML table, you can skip this lesson.

A really neat way to enhance your tables is by using color. You can use any colored text in your table, in the same way as you use regular text, by using the '<FONT> </FONT>' tag pair with the 'COLOR' attribute (covered in an earlier chapter).

You can also specify the BackGround COLOR for the table (apart from that specified for the HTML 'body'). To do this, use the 'BGCOLOR' attribute of the 'TABLE' tag, as follows:

Let's see this demonstrated:

<TABLE BGCOLOR="YELLOW" BORDER=5 WIDTH=40%>
<TR>
    <TH COLSPAN=2>famous last words</TH></TR>
<TR ALIGN="CENTER">
    <TD>eenie</TD>
    <TD>meenie</TD></TR>
<TR ALIGN="CENTER">
    <TD>miney</TD>
    <TD>moe</TD></TR>
</TABLE>
<P>
<TABLE BGCOLOR="GREEN" BORDER=5 WIDTH=40%>
<TR>
    <TD COLSPAN=2>
    <TABLE BGCOLOR="AQUA" CELLPADDING=0 CELLSPACING=0
            BORDER=0 WIDTH=100%>
        <TR ALIGN="CENTER">
            <TH>famous last words</TH></TR>
    </TABLE>
    </TD>  
</TR>
<TR ALIGN="CENTER">
    <TD><FONT COLOR="SILVER">eenie</FONT></TD>
    <TD><FONT COLOR="SILVER">meenie</FONT></TD></TR>
<TR ALIGN="CENTER">
    <TD><FONT COLOR="SILVER">miney</FONT></TD>
    <TD><FONT COLOR="SILVER">moe</FONT></TD></TR>
</TABLE>

famous last words

eenie meenie

miney moe

famous last words
eenie	meenie
miney	moe

The first table is a simple table, much like other tables we have built, except that the opening '<TABLE>' tag specifies the 'BGCOLOR="YELLOW"' attribute. By the way, in earlier chapters, we had recommended using "RGB" codes for color-based attributes, but we'll stick our neck out here and use color names. Why? Browsers that support color in tables, also support color names; so we're pretty safe in specifying them inside tables.

In the second table, we put on our fancy-pants. We decided that we wanted a different color for the background in the heading cell than for the rest of the table. In order to do this, we had to nest an entire table inside the first data of the first row of the top-level table. In order to get the nested table to fill the entire space of the table-data in the first row, we had to specify the cellspacing, cellpadding, and border (of the nested table) equal to zero. Also, we had to set the width of the nested table to 100%. In this case, 100% is interpreted as 100% of the available space (instead of the screen width), and the available space was the cell width of the data element we nested in, which happens to span two columns. Whew! (...we're bad...)

Also notice that some of the text in the table-data in the second table was embedded in the '<FONT> </FONT>' tag pair, and that font's 'COLOR' was specified to provide light gray text on a green background. It makes for an colorful table.

Keep in mind that if you use nested tables (as we did in the second table), and if the browser reading the file does not support these advanced features, you risk unpredictable results and possibly even a truncated (cut-off) web page at the receiving end.

Overseer: Monty Northrup ...

... leave e-mail ...