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

Attribute for <TABLE ...>

Usage Recommendation
thumbs upRecommend using for all modern browsers including Chrome, Firefox, Safari, and Internet Explorer. As well as all responsive and mobile browsers, but recommend doing this in CSS.

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:


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');
font-family: sans-serif;

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:

<TR> <TD>blah blah</TD>   <TD>yeah yeah</TD> </TR>
<TR> <TD>groovy dude</TD> <TD>right on</TD>  </TR>

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.

<TABLE ...>