Monday, February 12, 2007

Linda's How-Do-I Series? How Do I Add Wallpaper Or An Image To The Background Of My Table?

In our "Linda's How-Do-I Series? How Do I Add Clickable Text Links To My Table With Centered, Padded and Spaced Clickable Images? article we showed you how to build a centered table with clickable centered banners and clickable centered text names. Plus, we showed you how to add cell spacing, cell padding, background color to your table and color to your tables borders.

Now, what if you wanted the background to be wallpaper or an image instead of a color. How would we do that?

Let's review a little first - Your table can contain one column and one row or multiple columns and multiple rows. The contents can be text, numbers, images, combinations of all, etc. Columns and rows can be of different heights and widths.

Last time we showed you how to create a table with two rows and two columns with individual cells that contained centered banners and centered text for their respective website or blog name. The banner images and text were combined and clickable back to the respective website or blog. How did we do that?

Here's how (minus the ***'s which are there so you can view the HTML in this article):


<***center><***h4>My Websites<***/h4><***/center><***table bordercolor="#000069" cellpadding="30" cellspacing="20" align="center" bgcolor="#ffff00" border="4"><***tbody><***tr><***td align="center"><***a href="http://lindawalshoriginals.com"><***br/>Linda Walsh Originals <***p><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/NEWLWOButton125.png" /><***/p><***/a><***/td><***td align="center"><***a href="http://lindawalshoriginalsepatterns.com">Linda Walsh<***br/>Originals E-Patterns <***p><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LWOEpatterns125x125.jpg" /><***/p><***/a><***/td><***/tr><***tr><***td align="center"><***a href="http://lindawalshoriginals.blogspot.com">Linda's Blog <***p><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButtonBanner125x125.jpg" /><***/p><***/a><***/td><***td align="center"><***a href="http://tipsforcraftersontheweb.blogspot.com">Tips For Crafters On The Web <***p><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/TipsforcraftersButton125x125-2.jpg" /><***/p><***/a><***/td><***/tr><***/tbody><***/table>

That produced this:

My Websites


Linda Walsh Originals

Linda Walsh
Originals E-Patterns

Linda's Blog
Tips For Crafters On The Web



Now, let's say we want to add a wallpaper image to the background of our table instead of the color yellow. For these purposes our wallpaper image URL is http://http://i24.photobucket.com/albums/c47/LWOriginals/background12-1.jpg. How would we do that?

Here's how (minus the ***'s which are there so you can view the HTML in this article):

<***center><***h4>My Websites<***/h4><***/center><***table bordercolor="#000069" cellpadding="30" cellspacing="20" align="center" background="http://i24.photobucket.com/albums/c47/LWOriginals/background12-1.jpg" border="4"><***tbody><***tr><***td align="center"><***a href="http://lindawalshoriginals.com"><***br/>Linda Walsh Originals <***p><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/NEWLWOButton125.png" /><***/p><***/a><***/td><***td align="center"><***a href="http://lindawalshoriginalsepatterns.com">Linda Walsh<***br/>Originals E-Patterns <***p><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LWOEpatterns125x125.jpg" /><***/p><***/a><***/td><***/tr><***tr><***td align="center"><***a href="http://lindawalshoriginals.blogspot.com">Linda's Blog <***p><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButtonBanner125x125.jpg" /><***/p><***/a><***/td><***td align="center"><***a href="http://tipsforcraftersontheweb.blogspot.com">Tips For Crafters On The Web <***p><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/TipsforcraftersButton125x125-2.jpg" /><***/p><***/a><***/td><***/tr><***/tbody><***/table>

That produces this:

My Websites


Linda Walsh Originals

Linda Walsh
Originals E-Patterns

Linda's Blog
Tips For Crafters On The Web


You know know how to change the background of a table to be a wallpaper or an image instead of a color. What's left? Well, what if your banners or images are of different sizes. What do you do? The answer to that is in our next article.

No comments:

Post a Comment