We have a web application where we show lots of data in "datasheets". As part of this, some data values can have other values associated with them. To make it more complicated, every item can have multiple values.

e.g. (this is probably a more complicated example, but we have lots of data that is similar, albeit a bit simpler)

Item 1        Value
  Sub Item1     Value
  Sub Item2     Value 1
                Value 2
                Value 3
  Sub Item3     Value
  Sub Item4     Value
  Sub Item5     Value

Item 2        Value 1
              Value 2
              Value 3
  Sub Item1     Value
  Sub Item2     Value 1
                Value 2
                Value 3
  Sub Item3     Value

Item 3        Value

When these values are displayed in the datasheet, we need to make it obvious that the sub items values and their values are associated with the main value, instead of being part of the main datasheet themselves.

What visual techniques can we employ to make this data clear when presented in a web page?


Below are tow mockups that have been generated in-house. The first one is preferred by several people, although personally I think it is horrid. The second is my preferred version.

Stripes within stripes

Lines within stripes

Is there a better way of distinguishing this information?

  • 1
    Are any of these values editable, or is this read-only? Commented Mar 20, 2012 at 14:34
  • @MonicaCellio In this view, they are read only. Commented Mar 20, 2012 at 15:37

2 Answers 2


Would this work? I wasn't why the Values needed to be indented and vertically stacked in your design?

So the below design has the following changes:

  1. column headers
  2. data values aligned left, and much closer to the field names.
  3. values separated by commas. (which can wrap.)

enter image description here

  • I've gone with something similar to this in the end, but without the column headers. Commented Mar 21, 2012 at 14:55

You could use a method like "even" and "odd" to separate sub items from other sub items. Each even item could have a slightly different shade or colour to the next odd item.

For example, you could adopt something similar to this: enter image description here

The tabbed design certainly reduces clutter but may not work well with your data if Items need to be compared to one another. It can be adapted to suit this if need be.

I hope you have a CSS whiz handy!

  • We have some mockups using colour (which I may add as an edit to the question), but the approach doesn't work well. We can't really use the tabbed route, as some datasheet have lots of items (> 50) which would translate into lots of tabs. Commented Mar 20, 2012 at 15:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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