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.
Is there a better way of distinguishing this information?