Html Table Background Image

Html Table Background Image.

This short post (as it is fairly straightforward) explains the html needed to place a background image in a table.

The results of the first block of code below can be seen on this page (note that both the page and the table have backgrounds. The code below just relates to the table and as the image is small it is automatically repeated).

<table style="text-align: left; width: 75%;" background="http://lh4.ggpht.com/mjbmeister/SCFDguzwSJI/AAAAAAAAGoI/Elo-6KT8-vw/s288/greenhorn.gif" border="1" cellpadding="2" cellspacing="2">

The code for the table background image is highlighted in red. You can see that the code to be inserted is:

background=”URL of the image” (where URL = the location on a server of the saved image)

Here is another page where you can see the image in the header (the cat’s ears!): Maine Coon Cat ZAK

The code for the Maine Coon Cat header with the ears is (note that I am referring to the main table as there are several tables in the header):

<table style="text-align: left; width: 100%; height: 80px;" background="http://www.pictures-of-cats.org/images/ears.jpg" border="0" cellpadding="0" cellspacing="0">

The relevant part is highlighted in red and as can be seen the tag is “background” followed by the location (URL) of the image.

That means the image has to be stored (saved) on a server somewhere. In the first example it is saved on Google Picasa Web Albums. Anyone can sign up to Google Picasa Web Albums and share images there so that is good way for people who just have the Blogger blog to save images (it also produces the code for the image location). There is no reason why the background image couldn’t be saved to Blogger servers by uploading it using the compose window upload button and then getting the code from the Edit html window but you’ll need to remove the link as all uploaded images are by default linked to a separate image (click on the image and see what I mean). Although this can be removed easily.

In the second example, mentioned above, the image has been saved to a Site Sell SBI server that feeds my main website: Pictures of Cats org. Make sure that the image is not too heavy (file size should be reduced to the lowest level consistent with image quality) to ensure load times for the webpage is as fast as possible.

You should work with an image editor to do this such as Photoshop Elements or Paint.net (which is what I use – it is a free download).

Further reading on tables:

• Html Table Codes (nice looking tables with a fine border)
• Creating Tables with Google Docs (easy peasy)

From Html Table Background Image to Home Page