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.

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.

Linda's How-Do-I Series? How Do I Add Clickable Text Links To My Table With Centered, Padded, and Spaced Clickable Images?

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 padding and spacing around your clickable banners and/or images.

Now, let's say you want to add the clickable website or blog text names back to their individual cell boxes. 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 wanted to do a combination of cell spacing and cell padding. We wanted the cell padding to be "30" and we wanted the cell spacing to still be "20." How did we combine the two?

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"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/NEWLWOButton125.png" /><***/a><***/td><***td align="center"><***a href="http://lindawalshoriginalsepatterns.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LWOEpatterns125x125.jpg" /><***/a><***/td><***/tr><***tr><***td align="center"><***a href="http://lindawalshoriginals.blogspot.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButtonBanner125x125.jpg" /><***/a><***/td><***td align="center"><***a href="http://tipsforcraftersontheweb.blogspot.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/TipsforcraftersButton125x125-2.jpg" /><***/a><***/td><***/tr><***/tbody><***/table>

That produced this:


My Websites




Now, let's say we want to add the text names for our websites and blogs back to the individual cells in the example above with cell padding and cell spacing. We would have to add a line break <***br/> after the images and I know we would have to break the text name" Linda Walsh Originals E-Patterns" into two lines as it would be too wide and destroy our nice table spacing.

Also, for these purposes we are going to add the website and blog text names back but do it in a manner that includes them within the clickable link for the image. If you remember back to our previous article when we removed them we had made the images themselves and the text itself independently clickable back to their respective website and blog. We can add them back in the same manner here except it would mean a little more coding. For these purposes and to show you how you can combine both the clickable image and clickable text under one clickable command we are adding it back combined. So, 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" bgcolor="#ffff00" border="4"><***tbody><***tr><***td align="center"><***a href="http://lindawalshoriginals.com">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 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


That looks nice but the boxes aren't the same size because the text for Linda Walsh Originals E-Patterns is too large. We could fix that in several different ways. You could break the text into two different lines using a <***br/> (minus the 3 ***'s) command after Linda Walsh or you could reduce the font size for that particular text. Keep in mind that you are dealing with a row. So, whatever you do for one cell within that row you might need to do for the other cell within that row. In this instance because the banners are the same size we willl need to insert the <***br/> commands for both cells within that row. So, how would we break the text into two different lines?

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 produces this:

My Websites


Linda Walsh Originals

Linda Walsh
Originals E-Patterns

Linda's Blog
Tips For Crafters On The Web



You can run into all sorts of problems when you try to combine banners and/or images with text in your table. Especially if you want your tables to be evenly spaced. Generally you have to provide a lot more vertical space within your cells for text. For that reason I tend to favor just tables with clickable banners and/or product pictures. It's just easier. Or, just build you tables with one column and it won't matter what the text is as your would just keep increasing it vertically for whatever space is required for your text for that one cell.

Hopefully, you now know how to build a centered table with clickable centered banners and clickable centered text names. Plus, you've learned how to add cell spacing, cell padding, background color to your table, colors to your banners cell borders, and color to your tables borders.

What's left? Well, what if you wanted the background to be an image instead of a color. That's in our next article.

Linda's How-Do-I Series? How Do I Add Padding and Spacing to The Images Within My Table?

In our "Linda's How-Do-I Series? How Do I Center Images Within A Table And Make Those Images Clickable?" article we showed you how to center banners and/or images within a table and make those banners and/or images clickable back to their respective websites or blogs two different ways?

Now, what if we want to add padding and spacing (i.e. margins) around the images. First we will do it without the clickable website text names and then in our next post we will show you how to do it with the clickable website text names added back. But, how would we do the former?

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 make your centered banners and/or images and centered website or blogs text names clickable back to their respective websites or blogs two different ways. How did we do that?

To review, there are two ways you could do this. You could just move the <***/a> (minus the 3 ***'s) command ending to just after the banner and/or image <***/p> (minus the 3 ***'s) command ending for each image or just add a separate <***a><***/a> (minus the 3 ***'s) command URL line for each of the images.

Here's how the html coding would look if you moved the <***/a> command ending (minus the ***'s which are there so you can view the HTML in this article):

<***center><***h4>My Websites<***/h4><***/center><***table bordercolor="#000069" align="center" bgcolor="#ffff00" border="4"><***tbody><***tr><***td align="center"><***a href="http://lindawalshoriginals.com">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 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" /><***/a><***/p><***/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" /><***/a><***/p><***/td><***/tr><***/tbody><***/table>

And, that produced this:

My Websites

Linda Walsh Originals
Linda Walsh Originals E-Patterns
Linda's Blog
Tips For Crafters On The Web


Or, you could have the text and banner and/or images have separate clickable URL's back to their respective websites. The html coding looked like this (minus the ***'s which are there so you can view the HTML in this article):

<***center><***h4>My Websites<***/h4><***/center><***table bordercolor="#000069" align="center" bgcolor="#ffff00" border="4"><***tbody><***tr><***td align="center"><***a href="http://lindawalshoriginals.com">Linda Walsh Originals<***/a> <***p><***a href="http://lindawalshoriginals.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/NEWLWOButton125.png" /><***/p><***/a><***/td><***td align="center"><***a href="http://lindawalshoriginalsepatterns.com">Linda Walsh Originals E-Patterns<***/a> <***p><***a href="http://lindawalshoriginalsepatterns.com"><***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<***/a> <***p><***a href="http://lindawalshoriginals.blogspot.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButtonBanner125x125.jpg" /><***/a><***/p><***/td><***td align="center"><***a href="http://tipsforcraftersontheweb.blogspot.com">Tips For Crafters On The Web<***/a> <***p><***a href="http://dollsbylindawalshoriginals.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/TipsforcraftersButton125x125-2.jpg" /><***/a><***/p><***/td><***/tr><***/tbody><***/table>

That produced this, which is the same result as above:

My Websites

Linda Walsh Originals
Linda Walsh Originals E-Patterns
Linda's Blog
Tips For Crafters On The Web


Next we learned that if we just wanted to have the clickable banner inside our boxes and no text we would remove all of the text URL's and names. And, here's what our code looked like if we did (minus the ***'s which are there so you can view the HTML in this article):

<***center><***h4>My Websites<***/h4><***/center><***table bordercolor="#000069" bgcolor="#ffff00" border="4" align="center"><***tbody><***tr><***td align="center"><***a href="http://lindawalshoriginals.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/NEWLWOButton125.png" /><***/a><***/td><***td align="center"><***a href="http://lindawalshoriginalsepatterns.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LWOEpatterns125x125.jpg" /><***/a><***/td><***/tr><***tr><***td align="center"><***a href="http://lindawalshoriginals.blogspot.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButtonBanner125x125.jpg" /><***/a><***/td><***td align="center"><***a href="http://tipsforcraftersontheweb.blogspot.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/TipsforcraftersButton125x125-2.jpg" /><***/a><***/td><***/tr><***/tbody><***/table>

And, that produced this:

My Websites



Now, that doesn't look very good. It needs padding around the images. Let's say we want to add 20px for padding, which is the space in pixels between the edge of the table and the cell's contents. This is called "cellpadding". How would we code 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="20" align="center" bgcolor="#ffff00" border="4"><***tbody><***tr><***td align="center"><***a href="http://lindawalshoriginals.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/NEWLWOButton125.png" /><***/a><***/td><***td align="center"><***a href="http://lindawalshoriginalsepatterns.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LWOEpatterns125x125.jpg" /><***/a><***/td><***/tr><***tr><***td align="center"><***a href="http://lindawalshoriginals.blogspot.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButtonBanner125x125.jpg" /><***/a><***/td><***td align="center"><***a href="http://tipsforcraftersontheweb.blogspot.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/TipsforcraftersButton125x125-2.jpg" /><***/a><***/td><***/tr><***/tbody><***/table>

And, that produces this:

My Websites



That looks much better. Now, what if we wanted to add spacing between the cells. Say 20px? We would use "cellspacing" which is basically the margins between the cells themselves. How would we code 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" cellspacing="20" align="center" bgcolor="#ffff00" border="4"><***tbody><***tr><***td align="center"><***a href="http://lindawalshoriginals.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/NEWLWOButton125.png" /><***/a><***/td><***td align="center"><***a href="http://lindawalshoriginalsepatterns.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LWOEpatterns125x125.jpg" /><***/a><***/td><***/tr><***tr><***td align="center"><***a href="http://lindawalshoriginals.blogspot.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButtonBanner125x125.jpg" /><***/a><***/td><***td align="center"><***a href="http://tipsforcraftersontheweb.blogspot.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/TipsforcraftersButton125x125-2.jpg" /><***/a><***/td><***/tr><***/tbody><***/table>

And, that produces this:

My Websites



Do you see the difference? Now, let's say we want to do a combination of cell spacing and cell padding. Let's say we want the cell padding to be "30" and we want the cell spacing to be "20." How would we combine the two?

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"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/NEWLWOButton125.png" /><***/a><***/td><***td align="center"><***a href="http://lindawalshoriginalsepatterns.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LWOEpatterns125x125.jpg" /><***/a><***/td><***/tr><***tr><***td align="center"><***a href="http://lindawalshoriginals.blogspot.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButtonBanner125x125.jpg" /><***/a><***/td><***td align="center"><***a href="http://tipsforcraftersontheweb.blogspot.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/TipsforcraftersButton125x125-2.jpg" /><***/a><***/td><***/tr><***/tbody><***/table>

That produces this:

My Websites



Hopefully, you now know how to add padding and spacing around your clickable banners and/or images. In the next article we will add the clickable website text names back to the individual cell boxes and see what happens.