A Table-Less Product Grid

Since switching from the written content-heavy world of academia to the more photo and data-driven world of retail, I’ve been inundated with tables. There’s really nothing new about this— tables have been the web designer’s best friend since 1996. But as the web matures, we’re realizing that tables needn’t be (and shouldn’t be) used for layout purposes, but rather for the tabular data that the W3C had intended them to be used.

Alas, retail websites are littered with layout tables, and since most are driven by the all ighty ollar, if the page looks like the comp, then it’s good to go. Most of those comps involve some sort of grid of products. whether it’s a search results page, or a category of products, chances are, to save real estate, the designer has gone ahead and made a grid of the products.

That’s all fine and good. From a visual standpoint, a grid is great. It’s easy on real estate and it can present a logical grouping of products in a logical order. But from a markup standpoint, this grid of products certainly isn’t tabular data. It is, more meaningfully, a list of products. That said, since we’ve already got a great mechanism for defining lists, we might as well use it here.

View a screenshot of what we’re going to put together, or view a live working demo. As you can see, we’ve got 3 rows by 3 columns of 130px wide images with a product name and a price for each one.

Here’s the markup:

<ul id="product_grid">
	<li><img src="prod_img.gif" /><br />
		Product Name 1<br />
		$Price
	</li>
	<li><img src="prod_img.gif" /><br />
		Product Name 2<br />
		$Price
	</li>
	<li><img src="prod_img.gif" /><br />
		Product Name 3<br />
		$Price
	</li>
	<li><img src="prod_img.gif" /><br />
		Product Name 4<br />
		$Price
	</li>
	<li><img src="prod_img.gif" /><br />
		Product Name 5<br />
		$Price
	</li>
	<li><img src="prod_img.gif" /><br />
		Product Name 6<br />
		$Price
	</li>
	<li><img src="prod_img.gif" /><br />
		Product Name 7<br />
		$Price
	</li>
	<li><img src="prod_img.gif" /><br />
		Product Name 8<br />
		$Price
	</li>
	<li><img src="prod_img.gif" /><br />
		Product Name 9<br />
		$Price
	</li>
</ul>

Pretty straight forward; 9 items lined up in a plain old unordered list, which is actually what we want with a product list like this. Notice that we’ve given the whole UL an ID of “product_grid” so that our other lists won’t get confused. The trick to making it look nice is in the CSS, displayed below:

#product_grid {
	list-style-type: none;
	width: 438px;
	font-size: 1.2em;
	padding: 0;
}

#product_grid li {
	display: block;
	float: left;
	margin: 0 10px 10px 0;
	width: 130px;
	border: 1px dashed #000;
	padding: 2px;
	text-align: center;
}

Let’s start with the individual product blocks: the LI tags. I’ve set each one to be 130px wide, with 2px of padding, 1px of border all around and 10px of margin on the right and bottom. This will give a little bit of white space inside the product box and some more between products. Additionally (and this is the important part), I’ve added two positioning declarations: display: block; and float: left. These will force each LI to line up next to one another, much as we would do with a horizontal menu bar.

Next, let’s turn our attention to the parent UL tag, simply identified in the CSS as #product_grid. The most important things to take away here are the width: 438px; and the list-style-type: none; declarations. The width is set to be something greater than or equal to the desired number of columns multiplied by the width (including any padding, margins and borders!) of each product. In our case, that’s 146 * 3 or 438px. Additionally, I’ve removed the default bullet and set the padding of the UL to 0. As a note about the width, keep in mind that for a 3-column grid, the width also needs to be LESS THAN 146 * 4, otherwise it’ll have 4 columns instead of 3.

That’s pretty much the nuts and bolts of it. As you can see, the key to making the “grid” is in the width of the UL. Therefore, you can easily scale back to 1 or 2 columns or scale up to 4, 5, 6, etc. If you want to have a fluid grid of products, you could easily set the UL’s width to auto and have it expand or contract with the window, but that’s beyond the scope of this article.

This is great for dynamically generated grids of products (or thumbnails in a photo gallery, etc.), and relieves someone (you?) from having to iterate through table rows and cells per row, looking for those empty TDs that need to get dealt with and handling the closing/opening TR tags. And when CSS isn’t available, the items fall into a single-file line, bringing order and meaning to this collection of products.

• Written on January 21, 2007
• Filed under Code; Web