The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to make a Table, Making a table that has images and is centered
gooder
post Mar 10 2011, 05:30 PM
Post #1





Group: Members
Posts: 2
Joined: 10-March 11
Member No.: 14,101



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Mar 10 2011, 06:38 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
gooder
post Mar 10 2011, 10:19 PM
Post #3





Group: Members
Posts: 2
Joined: 10-March 11
Member No.: 14,101



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 10 2011, 10:35 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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).
.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 09:44 AM