Monday, February 12, 2007

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.


No comments:

Post a Comment