Learn HTML Code Tutorial Reference Guide

Attribute for <TABLE ...>
BACKGROUND = "URL"

Usage Recommendation
Moving to Styles
This effect is done better with styles. See Table Background Colors and Images

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:

deep sea background

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.




 

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   Privacy Policy   |   About
Copyright ©1997-2002 Idocs and ©2002-2014 HTML Code Tutorial