Table Background Images

By Björgvin Guðmundsson

Introduction

If you are using background images in your tables you have probably noticed that Netscape displays them in a pretty eccentric way. For example, the images repeat themselves in every single cell rather then continuing behind the table area, and if you nest another table within, the image repeats itself there in every cell too. There is a way to fix this; I'm going to show you how.

Step 1.

Make a transparent 1x1 pixel image in Photoshop. Save the image as "spacer.gif". Or you can save time and use mine. (Right click and "save target as")

Step 2.

Make a single cell table in Dreamweaver and use the Inspector to select your background image. Be sure to set your table width according to your image. (If your background image is not supposed to repeat itself set the height of the table the same as the image height). In my case I set the width to 150 pixels and the height to 199 pixels. If you need a background image, check out our Free Photos.

Warning: Do not select a background colour for the table.



The table will now look like this.



Step 3.

Now make a new 100 per-cent table inside the first table and select "spacer.gif" as its background image. This will be the table that you use for text or other things you want to display above the background. (A good rule is to set the cell pad and cell space to 2 before you go any further. Otherwise your text will be squeezed against the table border)



Conclusion

This is indeed another good step forward to make your page more accessible for your visitors.

Internet Explorer Netscape- Before Netscape After

Note: If you are going to add more than one table inside the main table, be sure to select "spacer.gif" as the background image in all of them.

You can find more Dreamweaver tutorials at tutorialvault.net