Note:
You will probably need to go back and review the tables
tutorial before you attempt anything on this page. If your picture is a
transparent .gif file--for instance, let's use a festive picture of a wine bottle--your
background will show through unless you specify a background color or a background
image for the table. To provide a background image,
you use the BACKGROUND command. To affect an entire page, you put the BACKGROUND
command inside the BODY tag. To affect just a table, you put the BACKGROUND command
inside the TABLE tag. Here's an example.
<TABLE BORDER="2" BACKGROUND="purple.jpg"><TR><TD><IMG SRC="winebottle.gif"></TD></TR></TABLE>
|
Notice that the table to the left is aligned to the right of this text. Here's how:
<TABLE BORDER="2" ALIGN="right"><TR><TD><IMG SRC="winebottle.gif"></TD></TR></TABLE>
The border is only two pixels rather than five as I used on the larger photograph on the tables pages, because I think a five-pixel border looks too heavy on smaller tables.
Nesting Tables
Notice that in the example above I have nested the three tables inside a fourth one so I could show you the purple swirling background. I wanted to show the borders, too, so I didn't want to crowd the three little tables up against the outside of the edges of the big one I had to leave a little extra padding in the edges of the cell to create that effect. I decided that ten pixels would be plenty.
<TABLE BORDER="2" ALIGN="right" CELLPADDING="10"><TR><TD><IMG SRC="winebottle.gif"></TD></TR></TABLE>
The really neat thing about tables is that you can nest them indefinitely. It can get a little tricky if you lose track, though, because you need to remember to include the <TABLE> and the <TR> and the <TD> and you need to make sure they're all in order. I'll show you how this is done, using Arial font for the big surrounding table and italicized Times New Roman font for a smaller table nested inside:
<TABLE
BORDER="2" ALIGN="right" CELLPADDING="10"><TR><TD><TABLE
BORDER="2" ALIGN="right"
CELLPADDING="10"><TR><TD><IMG SRC="winebottle.gif"></TD></TR></TABLE></TD></TR></TABLE>
Here's all three of those tables nested side by side. Woo hoo! Note the different backgrounds:
<TABLE
BORDER="2" ALIGN="right" CELLPADDING="10" BACKGROUND="purple.jpg"><TR><TD>
<TABLE
BORDER="2" ALIGN="right"
CELLPADDING="10"><TR><TD><IMG SRC="winebottle.gif"></TD></TR></TABLE>
<TABLE
BORDER="2" ALIGN="right"
CELLPADDING="10" BGCOLOR="maroon"><TR><TD><IMG SRC="winebottle.gif"></TD></TR></TABLE>
<TABLE
BORDER="2" ALIGN="right"
CELLPADDING="10" BACKGROUND="green.jpg"><TR><TD><IMG SRC="winebottle.gif"></TD></TR></TABLE>
</TD></TR></TABLE>
As you can see, this code can get really complicated really fast. That's why you are better off creating multi-celled tables if you want to do something a little more elaborate.
Captions
To
add a caption, use this code: <TABLE ALIGN="left" BORDER="5"
BACKGROUND="purple.jpg"> <TR> <TD>
<IMG SRC="winebottle.gif">
</TD> </TR> <CAPTION ALIGN="bottom"> Bottoms up! </CAPTION>
</TABLE>
 |
The result will look like the picture to the left and your text will "follow" the image wherever you place the table. This works even if the user resizes a window or has a monitor of a different size from yours. Anyone who has ever tried to position a caption directly beneath an image by inserting spaces until it looks "right" on his or her screen knows what disastrous results that can have when it's viewed on somebody else's computer.
If your computer's default font is Times New Roman, you might have noticed that the caption beneath the bottle displays in Times New Roman rather than Arial, like the rest of this page. That's because I did not include a <FONT> tag along with my caption. I could have done so, and for the sake of consistency in your page design it's a good idea. Sometimes it's also useful to put the text of the caption into bold face or make it a little smaller than the rest of the page to make it more obvious that this is a caption and not part of the page's regular text.