Table Backgrounds: Image
Setting the background image of a table can be done easily with styles. In this page we'll look at how to set the background image of the entire table. Later we'll set the background image of
individual cells.
Suppose we want to use this image as the background:
As in the previous example we'll first create a set of style rules. The following code goes in the
<HEAD> section of the page:
<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: always set a comparable background color when setting a background image
- the font color is white
- the font style is sans-serif (which usually shows up better against dark backgrounds)
- the font weight is 600 (that makes it bolder to show up against the dark background)
To apply the style to a table we simply set the table to the deepsea class with a
CLASS attribute:
<TABLE CELLPADDING=8 CELLSPACING=0 CLASS="deepsea">
which gives us this table
| blah blah | yeah yeah |
| groovy dude | right on |
Copyright 1997-2002 Idocs, Inc. Written by Miko Sullivan.
| 
Current Users : 18 (Member 0)
Write for us and get publicity, link to your website, and best of all get
paid. Please visit our 
