Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 2 down vote favorite

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?

share|improve this question
I'm struggling a bit because I realize that English is not your first language. Are you asking "How do I describe the relationships between D1 and D2, and D2 and D3"? Or "How do I visually represent those relationships"? – Lauren Ipsum Jan 22 at 19:44
Ok, yes, my english is not that proper. Sorry for that. And yes, I'm asking just that. How do I represent those relationships? Other than putting the tables on a stair-like form. – Xanathos Jan 22 at 19:46
I have edited your post into clearer English (no apologies necessary :) ). Did I understand you correctly? Feel free to roll back anything I have misinterpreted. – Lauren Ipsum Jan 22 at 20:33
Yes, It is ok like that. Thank you, by the way. So, if you know of any way to represent it other like that stair arrangement, please let me know. =) – Xanathos Jan 22 at 20:39

2 Answers

up vote 1 down vote accepted

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

share|improve this answer
This solutions seems good, but your comment has given me a lot to think about. Thanks =) – Xanathos Jan 30 at 14:34
up vote 3 down vote

A little color coding might simplify the presentation for you. Sometimes all that extra indenting just makes things more confusing.

I also made subtle adjustments to the type style of each header to reinforce the hierarchy.

enter image description here

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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