The Transparent GIF Trick...
Here's some code to add a stripe to Alice's page:
<HTML>
<HEAD>
<TITLE>restaurant</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" BACKGROUND="images/stripe.gif">
<TABLE BORDER=0 CELLPADDING=5 CELLSPACING=0>
<TR>
<TD><IMG SRC="images/pixel.gif" WIDTH=70 HEIGHT=1 BORDER=0></TD>
<TD><H1>Alice's Restaurant</H1></TD>
</TR>
<TR>
<TD> </TD>
<TD><P><IMG SRC="images/hamburgt.gif" ALIGN="right" WIDTH=84 HEIGHT=87 BORDER=0>Alice Cooper lived in the Rockies in the middle of the last century and was one of the pioneering women of the region. She was respected, and sometimes feared, by those who knew her. Alice was hard working and determined to make something of her harsh surroundings. She didn't suffer fools gladly. The country at that time was just opening up and lawlessness was commonplace.</P></TD>
</TR>
<TR>
<TD> </TD>
<TD><P><IMG SRC="images/mealt.gif" ALIGN="left" WIDTH=142 HEIGHT=99 BORDER=0>Alice made her home in a small town where two trails, both heading west, converged. Travellers from all parts came through the town as they headed towards the west coast in search of a new life. A railway was being built and would bring new trade. It was the perfect place to set up a new business. And so Alice's Restaurant was born...</P>
</P></TD>
</TR>
</TABLE>
</BODY>
</HTML>
- edit your file and view the result in your browser
This is what you should see:
Now, look carefully at the code - did you notice this line?
<TD><IMG SRC="images/pixel.gif" WIDTH=70 HEIGHT=1 BORDER=0></TD>
This has the effect of putting a picture, pixel.gif, into the top left cell of the table...but can you see one? No, but read on to find out why...
We have said before that different browsers will render tables in different ways. Added to that is the fact that people will view at different screen resolutions and may have their browser windows set at different widths...it was never going to be easy!
Well the long and short of this tale is that you, as the page designer, know exactly where the stripe is to appear - you can edit the stripe.gif file to check. So if you know how many pixels it is from the left margin you must ensure that any text does not overlap the stripe. One way to do this is to put a 'fixed width' image in the top left cell which forces the cell to be at least as wide as the image...and that is what we've done.
The image that we've used, pixel.gif, is actually only a single pixel...not only that, but it's transparent so, all in all, it's not surprising that you can't see it! Although it's only a single pixel, you can force that browser to make space for it by specifying WIDTH=70 in the image tag.
Neat, huh? It's called the transparent GIF trick...