Advanced Tables

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
      Fancy Lists
      Forms
      Advanced Tables
         Color tables
         Background images
         Nested tables
         Formatting with tables
         You try it
      Frames
      Style Sheets
      Image Maps
Section 5 - Publishing
Section 6 - Extras
Appendices

The ability to add color to tables brings up an interesting question. Is it possible to add background images to a table? Absolutely!

Adding background images is done in a similar fashion to adding color to the table or adding backgrounds to a page. Also, like color, the picture can either be added to an individual cell or to the entire table.

Adding a picture to a table: <table background="image.jpg">
Adding a picture to a cell: <td background="image.jpg">

Let's look at two different tables and what code was used for each. We will be using an image called "smilest.gif " for the background.

Code:
<table border=2 background="smilest.gif " cellpadding="7"> <tr> <td>Upper left cell</td> <td>Upper right cell</td> </tr> <tr> <td>Lower left cell</td> <td>Lower right cell</td> </tr> </table>

What You See

Upper left cell	Upper right cell
Lower left cell	Lower right cell

Now you can see why most tables don't have picture backgrounds. Let's try the same thing with a picture called "smilest2.gif" instead.

Upper left cell	Upper right cell
Lower left cell	Lower right cell

That's a trifle bit better. If you use a picture as the background of a table, it needs to be subtle so that the text shows up on top of it. You can also make this same table without a border:

Upper left cell	Upper right cell
Lower left cell	Lower right cell

Individual cells can also have backgrounds. To do this, you will modify the <td> to read <td background="image.gif"> or <td background="image.jpg"> Here's an example of this in action. In one cell of this table we'll use "smilest2.gif" and in another an image called "underwatert.jpg."

Code:
<table border=2 cellpadding="7"> <tr> <td background="smilest2.gif">Upper left cell</td> <td>Upper right cell</td> </tr> <tr> <td>Lower left cell</td> <td background="underwatert.jpg">Lower right cell</td> </tr> </table>

What You See

Upper left cell	Upper right cell
Lower left cell	Lower right cell

And once again, if you really have to, these can be combined. Let's see the table above with a table background called "cloth119.jpg."

Upper left cell	Upper right cell
Lower left cell	Lower right cell

If you know the exact dimensions of a picture, this allows you to frame the picture within a table and put words over it. Let's look closer at "underwatert.jpg" and it's size. This picture is 144 pixels wide and 107 pixels high. What if we put this in a table with a border of 1 and put a link over it AND a picture over it? Here's what you see:

Code:
<table border="1" cellpadding="0" width="144" height="107"> <tr> <td background="underwatert.jpg" valign="top"> <img src="smilest.gif" align=right> <a href="dive.html">Visit the Dive Shop</a> </td> </tr> </table>

What You See

Visit the Dive Shop

A reminder about pictures - make sure that the picture tiles correctly and the picture is the right colors and shades to be used as a background. The same rules apply to tables as they do to pages.