Monday, February 12, 2007

Linda's How-Do-I Series? How Do I Handle Different Size Banners Within A Table?

In our "Linda's How-Do-I Series? How Do I Add Padding and Spacing To The Images Within My Table?" article we showed you how to add cell spacing, cell padding, background color to your table, colors to your banners cell borders, and color to your tables borders. Plus, in our "Linda's How-Do-I Series? How Do I Add Text Links To My Table With Centered, Padded and Spaced Clickable Images?" we showed you how to build a centered table with clickable centered banners and clickable centered text names. Then, in our "Linda's How-Do-I Series? How Do I Add Wallpaper Or An Image To The Background Of My Table?" we showed you how to change the background of the table to be wallpaper.

Now, what if two of our banners were 125x125 and two of our banners were 150x150. What would happen and how would we fix whatever did happen?

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



And, last time we wanted 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://i24.photobucket.com/albums/c47/LWOriginals/background12-1.jpg. 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" 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.jpgg" /><***/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 what happens if two of our banners are 125x125 and two are 150x150 and each row has one of each? Here's what would happen if we just added the different size banners without changing anything else.


My Websites


Linda Walsh Originals

Linda Walsh
Originals E-Patterns

Linda's Blog
Tips For Crafters On The Web



Because they are in a table and because we have centered all of the data (i.e. text and banners) within that data cell we don't have to do any further style coding as we had to do in some of our previous articles concerning rows of side-by-side banners and/or images. In those instances we had to adjust the image margins and padding in each image separately. Sometimes we had to adjust the top, bottom, left, and right side padding and the top, bottom, left, and right side margins independently. Because of the way the table is structured and the data centered within it we don't have to do all that extra coding.

Hopefully, now you know how to build a simple table with centered clickable banners and/or images and centered clickable text names. Plus, you know how to add cell padding, cell spacing, border colors, color to the borders around your table, color to the background, and wallpaper or images to the background.

No comments:

Post a Comment