Attribute for <TABLE ...>
BACKGROUND = "URL"
BACKGROUND sets a background image for the table. Suppose, for example, that you want to set this image as the background image for your table:
Set BACKGROUND to the URL of the image:
<TABLE CELLPADDING=8 CELLSPACING=0 BACKGROUND="deepsea.gif">
which gives us this table:
| blah blah | yeah yeah |
| groovy dude | right on |
Notive that we run into the classic problem with background images: the letters don't show up against the background. To fix this you
could go to a lot of trouble using the
<FONT ...> tag to set the letters to white in every table cell, but that's a lot of messy work. Instead let's do it the easy way and just use styles. First, we'll put a set of style rules in the <HEAD> section of the document:
<STYLE TYPE="text/css">
<!--
.deepsea, .deepsea TD, .deepsea TH
{
background-image: url('deepsea.gif');
background-color:blue;
color:white;
font-family: sans-serif;
font-weight:600;
}
-->
</STYLE>
These rules state that for any element with its class set to
deepsea, or any
<TD ...> or
<TH ...> within a deepsea element, there are several rules:
- the background image is
deepsea.gif
- the background color is blue
- the font color is white
- the font style is sans-serif (which shows up better against dark backgrounds)
- the font weight is 600 (which makes it bolder to show up against the dark background)
Now we set the table to the
deepsea class. Notice in the following code that we don't need to set the font colors for each individual cell:
<TABLE CELLPADDING=8 CELLSPACING=0 CLASS="deepsea">
<TR> <TD>blah blah</TD> <TD>yeah yeah</TD> </TR>
<TR> <TD>groovy dude</TD> <TD>right on</TD> </TR>
</TABLE>
which gives us this table:
| blah blah | yeah yeah |
| groovy dude | right on |
For more information about table background colors and images see
Table Background Colors and Images.
