link to hitmill.com home page


text:Happy New Year


HTML Table Tutorial Lesson 2b
Background Attribute of the Table Element




Background is a nonstandard attribute supported by Netscape Navigator (NN), Microsoft Internet Explorer (MSIE), and Web TV. The value is the URL of the background image. If the image dimensions are smaller than the table dimensions and there is enough space in the table, the image will tile.

Browsers vary in handling table backgrounds. The results will not always be what you had anticipated. MSIE places background images behind the entire table. Netscape Navigator 4.x tries to place the background image into each table cell. If BACKGROUND and BGCOLOR are both coded with appropriate values the BACKGROUND will take precedence if the image can load. If for some reason the image fails to load, the browser will use the value of BGCOLOR.

Try not to get carried away with background images in tables. Rarely are they effective and download time increases with the use of images. Sometimes users will not wait for images to download. If you have to code BACKGROUND for a table try to use a very subtle image, such as a watermark. Tables with background images are often difficult to read. Following is an example of a table with BACKGROUND and BGCOLOR both coded with values. I will make two rows with two columns each and place regular text into each of the four table cells.

Cell one text goes here.This is cell two.flower icon
The third cell begins row two.This is cell four, the last cell of row two.

The above table demonstrates that you can code text, images, background image all into the same area of a table. (The background was not displayed in Netscape Navigator 3, so the BGCOLOR Value color was displayed instead.)  Following is an example of the code used for this table. Please recall that a TR tag begins a table row but cannot hold any data, just holds one or more <TH></TH> heading (title) pairs or one or more <TD></TD> pairs, which are the table data cells, or simply table cells. Only the TH or the TD cells in a table can hold text, images, sound, forms, and so forth but the table still needs the structure of its other elements, to tell the browser how the table is built, how it looks.

 BACKGROUND="../../graphics/oakwood.gif" BORDER="3"  CELLPADDING="8"
     <TD WIDTH="150">Cell one text goes here.</TD>
     <TD WIDTH="150"
        <IMG SRC="../../images/flower5.gif" BORDER="0"         ALT="flower icon">
     <TD>The third cell begins row two.</TD>
     <TD>This is cell four, the last cell of row          two.</TD>

Practice changing values for various properties in one of your own coded tables and see the resulting changes in the table. The way you will remember the table attributes is by playing with the tables in your own code, changing values, seeing what happens when each value changes.

A table cannot have an "irregular shape" but must be square or rectangular. Each table must begin with <TABLE> to let the browser know that you are building a table. The <TR></TR> tags tell the browser where to begin and end a row. The row tags do not hold data themselves but must use either the <TH></TH> heading tags or the <TD></TD> table data tags to hold the data (text, images, media). Every row must end with the </TR> tag and every table must end with the </TABLE> close table tag. A BACKGROUND image may be included in the <TABLE> table tag, in the <TR> row tag, in the <TH> heading tag, or in the <TD> table data tag. It is possible to code each cell of the table to hold a different background image. Next, read about background color using the BGCOLOR attribute.

Top | Beginning of lesson #2
Search Tutorial | Web Services
Top | News | Travel | Computers
Internet | HTML
Dynamic HTML | XML | Home


Updated 29 December 2006
© hitmill.com
All Rights Reserved