Both Netscape and Internet Explorer support the concept of background images within HTML tables. Unfortunately this is not in the HTML 4 standard, which allowed each browser vendor to implement this functionality in their own way. Needless to say, they are handled in different ways. For this tutorial, we will concentrate on how Netscape chose to implement this feature.
For starters, we need a background image. For this tutorial, I will be using an image used in the EddieSoft title page. Note, the edges are transparent in order to demonstrate the effects below.
The first example consists of an HTML table with a 1 x 1 dimension. To this table, I added the BACKGROUND="background.gif" attribute to the <TABLE> tag. The following displays the expected results.
 |
As pretty as that may look, normally we don't create single dimension tables unless we want to put a cheap border on an image by increasing the border width through the BORDER attribute. For example purposes, I will increase the table to a dimension of 2 x 2. The results are displayed below.
|
|
|
|
Notice anything unusual about this table? If your like me, you expected to have the background image applied to the overall table and the individual cells simply sitting on top of the image. Instead, Netscape chose to apply the background to each cell individually. This causes the background image to essentially be copied to each cell which is only able to display a quarter of the full image. At this time, I should point out that Microsoft actually chose to implement this in the expected manner.
Warning, clever self satisfying lead in coming! Now you may be thinking that if you combine HTML tables, you might be able to out think those clever Netscape programmers. Funny you should be thinking that since that is the exact scenario I wanted to show next (see, I warned you). Now I have a single dimension HTML table with the background attribute set to our pretty image. I then added another table with a 2 x 2 dimension. As you can see, our plan failed. Sure enough, the first table has the proper background, but the second table inherited that background and applied it to each cell as in the previous example.
|
There is a way around this, but it requires a little trickery. For convenience, I will point out that Netscape provides the BACKGROUND attribute on the <TR> and <TD> tags in addition to the <TABLE> tag. Now the trickery. By simply adding an invalid background to the table row, the desired results will be achieved. The following was created by simply adding BACKGROUND="" to the two <TR> tags. Put a few drapes along the side and you will have a very pretty window!
|
Since I pointed out the BACKGROUND attribute can be added to the <TR> tag, I might as well demonstrate that the implementation is consistent. The background image will be applied to each cell in the row.
|
|
|
|
Hopefully this provided some insight into Netscape's implementation of table background images. Now if windows start popping up on everyone's homepages, remember you saw it here first 8^)
See you next tutorial, till then, watch your step, the dog's been out 