CODEWITHSUNDEEP
htmlcss
AndyS
AndyS

Reputation: 11

Table replacement. Should I?

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:

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.

Upvotes: 1

Views: 218

Answers (3)

kapa
kapa

Reputation: 78681

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 */
 }

Upvotes: 0

Symen Timmermans
Symen Timmermans

Reputation: 907

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.

Upvotes: 0

lpd
lpd

Reputation: 2337

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.

Upvotes: 3

Related Questions