How to make a grid for images / products

Hi everyone. I was hoping someone could help me figure out how to make a grid similar to the one at this site - http://www.coffeerocket.com/Default.asp

Under their "Featured Products" they have a pretty nifty looking table with dividers that span horizontally and vertically that nicely separates their images.

Can someone please tell me how I can go about getting that same effect?

I know that I will need to create a table and do some styling with CSS, and I have tried to add a background image to the <td> with no-repeat, etc.. but it does not give me the effect I am looking for.

How can I make my image go vertically the length of the image and description, and also have a line going horizontally that spans the width of both cells like they do at the above website?

Would really appreciate and help or guidance with this. I know a little about HTML/CSS but I just can't figure out how to get this to look right.

Well first off, Im pretty sure they are using a database to populate that table with their products and everything else you see, using asp.

Have you tried viewing their source code and finding that particular table and copying the source? Firebug for firefox is great for finding specific code in a webpage.

Hey Teed.. yeap, I have looked at their source code and have copied it, but there is so much in there that I'm not sure how to go about doing it.

Yeap, I do know that they have some code that is rotating their products, but all I'm interested in right now is just getting the layout - i.e. the vertical and horizontal line, and then I will just add images and descriptions manually within the cells to get the similar look of their site.

Umm, bump? :(

<style type="text/css">
#wrap-main {
width: 500px;
margin: auto;
background: #C2C2C2;
padding: 5px;
}
.clear-all {clear: both; }
.row {
margin: 5px 0 5px 0;
padding: 5px 0 5px 0;
border-bottom: 1px #000000 solid;
}
.row-last {
margin: 5px 0 5px 0;
padding: 5px 0 5px 0;
border-bottom: 0;
}
.col-left {
width: 50%;
border-right: 1px #000000 solid;
float: left;
padding: 3px;
}
.col-right {
width: 50%;
float: left;
padding: 3px;
}
</style>

<div id="wrap-main">

<div class="row">
<div class="col-left">
<!--Product 1-->
<strong>Product 1</strong><br />
<span>Lorem Ipsum lorem ipsum</span>

</div>

<div class="col-right">
<!--Product 2-->
<strong>Product 2</strong><br />
<span>Lorem Ipsum lorem ipsum</span>

</div>
<div class="clear-all"></div>
</div>

<div class="row">
<div class="col-left">
<!--Product 3-->
<strong>Product 3</strong><br />
<span>Lorem Ipsum lorem ipsum</span>

</div>

<div class="col-right">
<!--Product 4-->
<strong>Product 5</strong><br />
<span>Lorem Ipsum lorem ipsum</span>

</div>
<div class="clear-all"></div>
</div>

<div class="row-last">
<div class="col-left">
<!--Product 5-->
<strong>Product 5</strong><br />
<span>Lorem Ipsum lorem ipsum</span>

</div>

<div class="col-right">
<!--Product 5-->
<strong>Product 6</strong><br />
<span>Lorem Ipsum lorem ipsum</span>

</div>
<div class="clear-all"></div>
</div>

</div>


Something like this maybe?