Monday, February 12, 2007

Linda's How-Do-I Series? How Do I Add Images To A Simple Table?

In our "Linda's How-Do-I Series? How Do I Build A Simple Table?" article we showed you how to build a simple table, add a colored border, and add background to the cells. Plus, we showed you how to make the content within your cells clickable.

This time we want to add images (i.e. button banners, pictures, etc) to our table. How do 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 build a simple table and add color to the borders, as well as color to the background. 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>Linda Walsh Originals<***/td><***td>Linda Walsh Originals E-Patterns<***/td><***/tr><***tr><***td>Linda's Blog<***/td><***td>DOLLS Blog<***/td><***/tr><***/tbody><***/table>

That produced this:


My Websites

Linda Walsh OriginalsLinda Walsh Originals E-Patterns
Linda's BlogDOLLS Blog



Then, we decided to make our website names clickable back to our websites within the table. How did we do that?

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><***/td><***td><***a href="http://lindawalshoriginalsepatterns.com">Linda Walsh Originals E-Patterns<***/a><***/td><***/tr><***tr><***td><***a href="http://lindawalshoriginals.blogspot.com">Linda's Blog<***/a><***/td><***td><***a href="http://dollsbylindawalshoriginals.blogspot.com/">DOLLS Blog<***/a><***/td><***/tr><***/tbody><***/table>

And, that produced this:


My Websites

Linda Walsh OriginalsLinda Walsh Originals E-Patterns
Linda's BlogDOLLS Blog




Now, let's say we want to add advertising button banners sized 125x125px to each of our data cells for each of the websites shown. We want the clickable text to be on top and we want the images to start on a separate line. So, we would use the <***p><***/p> (minus the 3 ***'s) new paragraph commands to tell our html code to start the images on a separate line. How would we do that?

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


My Websites

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


Now you could have just as easily have started with the banners and/or images and had the clickable text underneath. In that instance you would use the <***P><***/p> (minus the 3 ***'s) for the text to tell the html coding to start your text on a separate line. And, you could have included the banners and images within the clickable text <***a> <***/a> (minus the 3 ***'s) section so the images would be clickable at this point back to their website or blog. For these purposes, however, we want to show them separately.

Hopefully, you now know how to add the same size images to a table. Next time we will center them within their respective cells and make them clickable back to their respective website.


No comments:

Post a Comment