Printable Version of Topic

Posted by: gooder Mar 10 2011, 05:30 PM

Hello I am trying to figure out the best way to make a table that shows a product then under the product has a small description, link to get details and then an add to cart link/image.

an example of what I ma trying to do is the table they have built here;
http://www.cabothillsmaple.com/order_syrup.htm

What is the best way to do this?

Thanks for your help

Posted by: Darin McGrew Mar 10 2011, 06:38 PM

Well, that site has a table. Each cell has a product image with a short description and a link. The link goes to the product page.

What part of that are you having trouble with?

Posted by: gooder Mar 10 2011, 10:19 PM

I'm having trouble making the the Add to cart image display under the description. I also don't know how to space the table so every column isn't' beside the other.

my code;
<table border="1">
<tr><td>Extra Light</td><td>Light</td><td>Amber</td></tr>
<tr><td><img src="image01" alt="product image"/><p>this is the description</p><img src="add-to-cart" alt="add to cart"/></td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td>Row 3 Cell 1</td><td>Row 3 Cell 2</td><td>Row 3 Cell 3</td></tr>
</table>

Posted by: pandy Mar 10 2011, 10:35 PM

With that markup the image MUST be below the description. Where does it end up for you?



Use cellspacing and/or cellpadding or if you do it with CSS use padding (or border-spacing, but that's a little more complicated).
.