Help - Search - Members - Calendar
Full Version: How to make a Table
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
gooder
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
Darin McGrew
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?
gooder
QUOTE(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?


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>
pandy
QUOTE
I'm having trouble making the the Add to cart image display under the description.


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

CODE
I also don't know how to space the table so every column isn't' beside the other.


Use cellspacing and/or cellpadding or if you do it with CSS use padding (or border-spacing, but that's a little more complicated).
.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2024 Invision Power Services, Inc.