Table replacement. Should I? - html

Question

Suppose we have an old-style six to eight products which enclosed in a table with borders (so called leaders or special products). Is it tabular data? Is it worth to replace this with div? If yes then how can I do this?
Thank you.
I think about the following:
These products are not correlated. And from this point of view this is NOT tabular data.
And also this table has borders which I cannot simulate with div (or maybe don't know) because of a liquid layout (width in %).
This table is on the main page. And I want to be more accessable for those devices like mobile gadgets.
So I should use div but don't know the best way. By the way, I think is it the main cause modern sites do not use borders but "blockes" with no border collapsing.
Thank you everybody.
Added: Simply put we have a table with two rows, six cells, and border=1. This is an old-scool design which I want to keep.
There are problems:
- borders
- border collapsing
I just wanna know how seasoned designers work around this. What an approach?
Sorry for so many words. And yes I know about screenshot but there is nothing special just table that has an image in each cell.

Answer 1

There is nothing wrong with using tables for real tables, just set up the table structure in your code and format it how you like using pure css. (Tabular data essentially must have at least two rows and columns inclusive of headings.) You only need to avoid tables when structuring your [entire] page layout.

Answer 2

If you want to highlight some products, by showing them as 'blocks' instead of table rows, I would put them in divs, yes.
<div class="product">some product<br /><img src="product.jpg" /></div>
<div class="product">some other product<br /><img src="product.jpg" /></div>
<div class="product">yet some other product<br /><img src="product.jpg" /></div>
CSS:
div.product {
width: 100px;
height: 100px;
float: left;
}
To 'clear' the floating of the divs, you need something like this just below the last product div.
<div style="clear: both;"></div>
Otherwise, your next element will be positioned under/over your products.

Answer 3

It is possible that I misunderstood (you could give a link or screenshot), but this sounds like NOT tabular data. What you are describing is a LIST of products, so it should be placed either in an <UL> unordered list or <OL> ordered list (latter if order matters a lot).
So your products would look like:
<ul id="lead-products">
<li>
Amazing Product - $10.65
...
</li>
...
</ul>
Then with CSS you could give it some style:
#lead-products { //the list
list-style: none; /* make it not display list markers */
overflow: hidden; /* used to clear up floats */
margin: 0;
}
#lead-products li { /* these are your elements/products */
margin: 5px; /* some space around it */
float: left; /* float them to the left so they are besides each other */
border: 1px solid black; /* border around the products */
width: 20%; /* dynamic width as you needed */
}