Table or UL and LI using CSS?

I am an old school table user and trying to migrate a new site using strictly CSS. I have some data to present products. The rows would be name, image, price, description and features. In tables it would be one product per column and this would be multiple columns.

This is what a table outline would look like


<table>
	<tr><td>Name</td></tr>
	<tr><td>Image</td></tr>
	<tr><td>Price</td></tr>
	<tr><td>Description notes go here.  Many sentences or pargraphs long</td></tr>	
	<tr><td>
			<ul>
			<li>Feature 1</li>
			<li>Feature 2</li>
			<li>Feature 3</li>			
			</ul>
		</td>
	</tr>
</table>
..... Duplicate per each product (could be many all side by side)

If doing it in CSS I would imagine I would do the following:


<div id="products">
	<ul class="product_one">
	<li>Name</li>
	<li>Image</li>
	<li>Price</li>
	<li>Description notes go here.  Many sentences or pargraphs long</li>
	<li>
		<ul>
		<li>Feature 1</li>
		<li>Feature 2</li>
		<li>Feature 3</li>			
		</ul>
	</li>
	</ul>
	<ul class="product_two">
..... Duplicate per each product (could be many all side by side)
</div>

Is this correct and then edit and style accordingly? Would using tables a better idea than using strictly CSS? Do I have to use some box model method of floats or anything like that if using CSS method?

Can you provide a example of what the page should appear like. Do you mean a product per row or x amount of products per row? The context is what matters and at the moment that is somewhat ambiguous.

Products should be side by side on the page with the features below them.

In a table it would be three columns (or four or five, but for this example, three) and 5 rows.


Product A	Product B		Product C
A-1			B-1			C-1
A-2			B-2			C-2
A-3			B-3			C-3
A-4			B-4			C-4

For example, I can easily do this with tables. But when I try to do it with CSS, I get the description over lapping and into Product Bs column information using float left on Product A/B/C DIVs.

I’d probably opt for something like this:


<ul class="products">

	<li>		
		<h2>Product Name Two</h2>
		<p>$500.00</p>		
		
		<ul>
			<li>Feature One</li>
			<li>Feature Two</li>
			<li>Feature Three</li>
		</ul>
			
		<img src="/img/prod.jpg" width="50" height="50" alt="Image of Product One">
			
		<p>Text Description of Product Para 1</p>
		<p>Text Description of Product Para 2</p>
		<p>Text Description of Product Para 3</p>
				
	</li>
	
	<li>		
		<h2>Product Name Two</h2>
		<p>$200.00</p>		
		
		<ul>
			<li>Feature One</li>
			<li>Feature Two</li>
		</ul>
			
		<img src="/img/prod2.jpg" width="50" height="50" alt="Image of Product Two">
			
		<p>Text Description of Product Para 1</p>
		<p>Text Description of Product Para 2</p>
		<p>Text Description of Product Para 3</p>
				
	</li>

</ul>

You can use this technique to easily create that three column layout that will consistent across browsers.

oddz - And then it is a matter of styling with CSS?

Using the route you explained above, you can have multiple, even unlimited amount of products side by side, given that there isnt any container it is in for width?

You can apply a class called first to each list item that is the first of its row that clears left.

3 col layout:


<ul class="products">

	<li class="first"></li>
	<li></li>
	<li></li>
	<li class="first"></li>
	<li></li>
	<li></li>
	<li class="first"></li>
	<li></li>
	<li></li>
	<li class="first"></li>
	<li></li>
	<li></li>

</ul>

Alternatively you could do this:


<ul class="products">

	<li>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</li>
	
	<li>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</li>
	
	<li>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</li>

</ul>

I believe the previous example to be more semantic though because what your actually creating is a list of products. A column is by nature presentational so introducing nesting lists to achieve that effect is mixing mixing presentation with structure in my opinion. However, either way is “appropriate” really just depends how anal you are.

Would the below example work? and then have each productList1/productList2 etc all float left with specified width and margin?


<div class="productList1">
	<ul>
	<li>Name</li>
	<li>Image</li>
	<li>Price</li>
	<li>Description notes go here.  </li>
	<li>
		<ul>
		<li>Feature 1</li>
		<li>Feature 2</li>
		<li>Feature 3</li>			
		</ul>
	</li>
	</ul>
</div>					

<div class="productList2">
	<ul class="productsUL">
	<li>Name</li>
	<li>Image</li>
	<li>Price</li>
	<li>Description notes go here.</li>
	<li>
		<ul>
		<li>Feature 1</li>
		<li>Feature 2</li>
		<li>Feature 3</li>			
		</ul>
	</li>
	</ul>
</div>


I like this. How would I structure the CSS to have the items side by side rather than original html without any styling where there are page breaks between products. When I use a float left for li it also does the li’s inside of a new list in there and cannot read it when output.

edit: I assume styling products to float left and a specific width and then setting products li with certain margin and less width? Is this the correct way of doing this or my other example better?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Prducts example</title>
	
	<style type="text/css">
	
	body {	
		background-color: #ccc;	
	}
	
	#container {	
		margin: 0 auto;
		width: 950px;
		background-color: #fff;	
	}
	
	.products {
		float: left;
		width: 100&#37;;
	}
	
	.products li {
		float: left;
		width: 33.3%;
	}
	
	.products li.first {
		clear:left;
	}
	
	.products ul, 
	.products ul li { 
		float: none;
		width: 100%;
	}
	
	.clear-left {
		clear: left;
	}
	
	</style>
	
</head>
<body>

<div id="container">

<ul class="products">

	<li class="first">		
		<h2>Product Name Two</h2>
		<p>$500.00</p>		
		
		<ul>
			<li>Feature One</li>
			<li>Feature Two</li>
			<li>Feature Three</li>
		</ul>
			
		<img src="/img/prod.jpg" width="50" height="50" alt="Image of Product One">
			
		<p>Text Description of Product Para 1</p>
		<p>Text Description of Product Para 2</p>
		<p>Text Description of Product Para 3</p>
				
	</li>
	
	<li>		
		<h2>Product Name Two</h2>
		<p>$200.00</p>		
		
		<ul>
			<li>Feature One</li>
			<li>Feature Two</li>
		</ul>
			
		<img src="/img/prod2.jpg" width="50" height="50" alt="Image of Product Two">
			
		<p>Text Description of Product Para 1</p>
		<p>Text Description of Product Para 2</p>
		<p>Text Description of Product Para 3</p>
				
	</li>
	
	<li>		
		<h2>Product Name Two</h2>
		<p>$200.00</p>		
		
		<ul>
			<li>Feature One</li>
			<li>Feature Two</li>
		</ul>
			
		<img src="/img/prod2.jpg" width="50" height="50" alt="Image of Product Two">
			
		<p>Text Description of Product Para 1</p>
		<p>Text Description of Product Para 2</p>
		<p>Text Description of Product Para 3</p>
				
	</li>
	
	<li class="first">		
		<h2>Product Name Two</h2>
		<p>$200.00</p>		
		
		<ul>
			<li>Feature One</li>
			<li>Feature Two</li>
		</ul>
			
		<img src="/img/prod2.jpg" width="50" height="50" alt="Image of Product Two">
			
		<p>Text Description of Product Para 1</p>
		<p>Text Description of Product Para 2</p>
		<p>Text Description of Product Para 3</p>
				
	</li>
	
	<li>		
		<h2>Product Name Two</h2>
		<p>$200.00</p>		
		
		<ul>
			<li>Feature One</li>
			<li>Feature Two</li>
		</ul>
			
		<img src="/img/prod2.jpg" width="50" height="50" alt="Image of Product Two">
			
		<p>Text Description of Product Para 1</p>
		<p>Text Description of Product Para 2</p>
		<p>Text Description of Product Para 3</p>
				
	</li>
	
	<li>		
		<h2>Product Name Two</h2>
		<p>$200.00</p>		
		
		<ul>
			<li>Feature One</li>
			<li>Feature Two</li>
		</ul>
			
		<img src="/img/prod2.jpg" width="50" height="50" alt="Image of Product Two">
			
		<p>Text Description of Product Para 1</p>
		<p>Text Description of Product Para 2</p>
		<p>Text Description of Product Para 3</p>
				
	</li>

</ul>

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

</div>

</body>
</html>

disclaimer: only tested in FF3

If only…


.products li:nth-child(3n) {
     clear:left;
}

huh…