4

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.

mockup

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.

  • 1
    I think the solution should be the one that provides best readability. A well displayed list can be best readable or a table can be. – Paul van den Dool Feb 5 '15 at 16:56
  • Do you ask if the HTML element table should be used, or if it should look like a table (no matter if table or some other element gets used)? – unor Feb 6 '15 at 17:31
2

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • dennislees; what you're suggesting is still essentially a table, but without the grid lines, meaning headers on the left, content on the right. Having said that, your more minimal design is certainly easier to scan. @JonW, yes I think it is appropriate here. – Steven Feb 6 '15 at 0:29
  • 1
    @shahar - in that case everything is just a table without the gridlines : ) Saying that, there was a time on the web when everything was actually tables. Surely it's the containment within a grid that makes something a table? That's what we've gotta be talking about here. Otherwise, anything(s) that have visual linear relationships could be called "tabular", and that doesn't sound right, does it? – dennislees Feb 6 '15 at 14:28
1

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.

  • That's what I'm wondering though. Is it appropriate in this instance? – JonW Feb 5 '15 at 15:55
1

@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.

  • I use the same thought process myself: Would I put this content in a spreadsheet if it weren't online. And to be honest I'm still not sure. – JonW Feb 6 '15 at 9:41
  • @JonW I'm not so sure either, but perhaps this perspective may help: If you chose the DIV/CSS route (instead of a table), did you plan on styling it to look like a table of sorts? I'd assume yes, based on the picture in the question. Also, how would you format this layout? If more items were to be added at a later date, would you add more DIV's? And would it be safe to say that, as it would be formatted, each DIV could be seen as a Row? I think that the only reason we're all stressing out about the use of tables these days is simply because people once relied on them as the only means of – Jase Feb 7 '15 at 8:10
  • 1
    layout. Personally I think that if you have data, data that needs a heading (Name: Jason, e.g.) then it is a good fit for a table. Even if it's just one row of data. – Jase Feb 7 '15 at 8:11
1

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>.

1

@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.

  • best not to use answers to reply to comments of unknown origin in the post – Toni Leigh Feb 8 '15 at 17:09
  • Hi Toni Leigh, I don't understand your comment, can you clarify? In my previous answer (which was kindly converted to a comment) I did answer the question which @JonW asked. This is a continuation of the conversation. – Steven Feb 8 '15 at 22:50
  • this isn't an answer, it's a response to comments, which we can't tie to the original comments – Toni Leigh Feb 9 '15 at 7:09
  • each answer needs to be a solution that would stand on it's own with the original question and still be completely understandable. Try taking what you are saying in the comments and framing as a full solution to the problem - answers aren't used for ongoing conversations (it's not like a forum) – Toni Leigh Feb 9 '15 at 7:19
  • SE does have a 50 point limit for commenting which is a bit frustrating (I've just had some jobsworth user on SO vote down a question I posted that's been closed for ages and now I can't comment on that site, so I feel that pain) however, all it takes is one good answer to get a few votes and you'll be up there – Toni Leigh Feb 9 '15 at 7:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.