サブアイテムを含むデータのテーブルを最もよく表示するにはどうすればよいですか？
「データシート」に多くのデータを表示するWebアプリケーションがあります。これの一部として、一部のデータ値には、他の値を関連付けることができます。より複雑にするために、すべてのアイテムは複数の値を持つことができます。
例えば （これはおそらくもっと複雑な例ですが、少し単純ではありますが、類似した多くのデータがあります）
アイテム1の値 サブアイテム1の値 サブアイテム2の値1 値2 値3 サブアイテム3の値 サブアイテム4値 サブアイテム5値 アイテム2値1 値2 値3 サブアイテム1値 サブアイテム2値1 値2 値3 サブアイテム3値 アイテム3値
これらの値がデータシートに表示される場合、サブアイテムの値とその値がメインのデータシート自体の一部ではなく、メインの値に関連付けられていることを明確にする必要があります。
Webページに表示されたときにこのデータを明確にするためにどのような視覚的手法を採用できますか？
編集：
以下は、社内で生成された2つのモックアップです。最初のものは、個人的には恐ろしいと思いますが、いくつかの人々に好まれています。 2つ目は私の推奨バージョンです。
この情報を区別するより良い方法はありますか？
これはうまくいくでしょうか？値をインデントして垂直方向にスタックする必要があるのはなぜですか。
したがって、以下の設計には次の変更点があります。
- 列ヘッダー
- データ値は左揃えで、フィールド名に非常に近くなります。
- コンマで区切られた値。 （折り返すことができます。）
「偶数」や「奇数」などのメソッドを使用して、サブアイテムを他のサブアイテムから分離できます。各偶数アイテムは、次の奇数アイテムとわずかに異なる色合いまたは色を持つことができます。
たとえば、次のようなものを採用できます。 
タブ付きデザインは確かに乱雑さを減らしますが、アイテムを相互に比較する必要がある場合、データでうまく機能しない可能性があります。必要に応じて、これを適合させることができます。
CSSがお役に立てば幸いです。