Monday, February 12, 2007

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.

No comments:

Post a Comment