Is a product feature list suitable to display in a table?

Question

On an ecommerce site (say selling T-Shirts) each product has its own page, and the page will have information about the product.

Aside from unique things like photos, descriptions and reviews etc there will be some standard pieces of information appearing on all product pages, so I'm wondering if a table is the appropriate container for this information.

^{download bmml source – Wireframes created with Balsamiq Mockups}

The main pro for this is:

It will be standard across all products, making it theoretically easier for a user to jump to a product and immediately know where to look to find the Fabric of that item.

However:

It's not really tabular data, is it? There is only one column of data. So would this work better as a list of items? That's certainly what sites like Amazon do for product information. But such an approach removes the positive element of consistency.

What is the correct way to deal with the display of such data? I can't really decide if it is tabular data or not in the traditional sense.

Answer 1

You shouldn't need to rely on something as rigid as a table to have consistency in a UI. How to present non-tabular content (which I agree this is) is a design problem, and can be solved with layout positioning, typography, background colors, and fixed-width elements.

I think the Amazon example doesn't feel consistent because the heights of the sections above are often irregular, and the Product Details section is the full width of the page, which leads to visual inconsistencies when text strings of different length stretch across the page.

A container that maintained its location, layout, and styling would allow you to present data in a tabular-esqe and consistent way, without having to resort to boxes and grids.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

From a ux perspective there isn't a reason to avoid a tabular layout if it's appropriate. If you're concerned about it from a semantic web perspective then use divs to achieve your layout.

EDIT: I, as have many people, have come to expect tabular data. It's quick and easy to scan information. For a clothing website that may not have every size and color for each item it would be useful to be able to quickly glance at at table and have everything neatly laid out.

The more items on the site the more I would consider the table layout to make sense. That being the case - why did Amazon abandon it? The use cases are different. People do not chose books based on the Product Details but they would choose one t-shirt over another if it doesn't come in the color or size they're looking for.

Answer 3

@JonW, please refer to the official HTML5 Specification.

My personal opinion, and one that many have is that if it looks like a spreadsheet, then it belongs in a table.

The HTML5 table page says this:

Contexts in which this element can be used: Where flow content is expected.

Precise rules for determining whether this conformance requirement is met are described in the description of the table model

Unfortunately, that's the best that I can come up with. There doesn't appear to be any real explicit yes or no as to when we should or can use a table.

Answer 4

I think what you're looking for is a "definition list" or <dl>. Those are for just this kind of scenario where you have a series of heading / text pairs.

The attributes like "color" and "size" would be <dt> and the "blue" and "XL" would be <dd>.

Answer 5

@JonW the content you want to display fits exactly with the structure of table content - headers on the left, and content on the right, so yes, it is appropriate to use a table to display this information.

To illustrate the point, try using vanilla html with this content and you'll see that the pattern which most closely matches your content is a table.

Having said that, the sketch that @denislees posted - without the grid lines - is easier to scan, so I would tend to go in that direction.