Layout with Tables – Hierarchy

In this fiddle there’s a markup and style I’m doing for a website:

http://jsfiddle.net/UvJmP/

I am trying to represent data in this way:

  • D2’s table data is contained in D1
  • D3’s table data is contained in D2

If we were to think of D1 as an entity, it would be said that each D1 has a D2, and each D2 has a D3. In a hierarchy, these would be “sub-tables.”

Is there a better way to represent a hierarchy of subtables than the stair arrangement I have right now?

Answer

From a usability point of view, the staircase or indentation layout is probably better, because it’s quite easy to see the difference in the levels just at a glance. I like the option of colors too, but I think it’s a little more difficult to see.

Here’s how I’d recommend to do it, specially if you can collapse some of the sub-tables:

enter image description here

enter image description here

Attribution
Source : Link , Question Author : Xanathos , Answer Author : Yisela

Leave a Comment