Monday, February 12, 2007

Linda's How-Do-I Series? How Do I Center Images Within A Table And Make Those Images Clickable?

In our "Linda's How-Do-I Series? How Do I Add Images To A Simple Table?" article we showed you how to add the same size images to a table.

This time we want to center the images and make them clickable back to their respective websites.

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 add advertising button banners sized 125x125px to each of our data cells for each of the websites shown. How did we do it?

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

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



Now, let's say that first we want to center (i.e. align="center") our table and then we want to center the banners and text within their respective boxes.

First we would need to center the title, then we would need to center the table and then we would need to center each of the individual cells. We're going to use the <***center><***/center> (minus the 3 ***'s) for centering the title which is outside the table and the align="center" for centering inside the table. 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" align="center" bgcolor="#ffff00" border="4"><***tbody><***tr><***td align="center"><***a href="http://lindawalshoriginals.com">Linda Walsh Originals<***/a> <***p><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/NEWLWOButton125.png" /><***/p><***/td><***td align="center"><***a href="http://lindawalshoriginalsepatterns.com">Linda Walsh Originals E-Patterns<***/a> <***p><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LWOEpatterns125x125.jpg" /><***/p><***/td><***/tr><***tr><***td align="center"><***a href="http://lindawalshoriginals.blogspot.com">Linda's Blog<***/a> <***p><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButtonBanner125x125.jpg" /><***/p><***/td><***td align="center"><***a href="http://tipsforcraftersontheweb.blogspot.com">Tips For Crafters On The Web<***/a> <***p><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/TipsforcraftersButton125x125-2.jpg" /><***/p><***/td><***/tr><***/tbody><***/table>

And, that produces 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 make those images clickable back to their respective websites. How would we do that?

First of all there are two ways you can do this. You can 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 produces this:


My Websites

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



Now, if you wanted to have the text and banner and/or images have separate clickable URL's back to their respective websites the html coding would look 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 produces 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



So, you can go either way. I tend to like to keep the clickable commands for the text and the clickable commands for the banners and/or images separate in the event you want to easily remove one or the other.

For example, 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 would look 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 would produce this:


My Websites




Now, that doesn't look very good. It needs padding and spacing around the images and, maybe, a border around the images themselves. That's for next time.

Hopefully, you now know how to center images within a table and make those banners and/or images clickable two different ways?

Next time we will add padding, spacing, and a border around the banners and/or images. First we will do it without the clickable website text names and then we will show you how to do it with the clickable website text names added back.

No comments:

Post a Comment