Best way to show nested tree-model data in HTML tables
I'm making a webapp, that will mostly be used on desktop, is not intended to be used in mobile (at least, the dashboard area) - so that's no problem for me...
Let's say I have some data-model that is like to "territoy subdivision" - Please forgive my way to write English.
To simplify, let's say I have some users and some countries, but countries have states and states have cities!
One user can have a relation with N countries (but not necessarily all).
One countries can have N states (but not necessarily all).
One state can have N cities (but not necessarily all).
So, when I display a user information I got a very big trouble, because, is probably to get that:
e.g.:
Phillip has two countries assigned The first country has only one state that has only one city. The second country has three (3) states and in mean, each state has 30 cities...
My first try was to display the information this way:
COUNTRIES ASSIGEND:
Country1 | State1 | City1
Country2 | State2 | City2
Country2 | State2 | City3
Country2 | State2 | ...
Country2 | State2 | City32
Country2 | State3 | City33
Country2 | State3 | City34
Country2 | State3 | ...
Country2 | State3 | City63
Country2 | State4 | City64
Country2 | State4 | City65
Country2 | State4 | ...
Country2 | State4 | City94
But this is horrible, in matters of "redundancy" and "order", btw the title says "Countries assigned and instead of showing 2 records, I'm showing almost 100...
My second try was to make nested tables, I will try to ASCCIfy my idea below:
Please note that this one is another example, not related to previes example, to simplify...
|-----------|----------|--------|
| | | |
| COUNTRY1 | STATE1 | CITY1 |
| | | |
|-----------|----------|--------|
| | | CITY2 |
| | STATE2 |--------|
| | | CITY3 |
| COUNTRY2 |----------|--------|
| | | CITY4 |
| | STATE3 |--------|
| | | CITY5 |
|-----------|----------|--------|
Here looks very pretty, but the problem goes when you got more a considerable number of cities, so you will get lost in which state or country belongs to.
My last try (not implemented) was thinking about accordeon, but I really don't know. I would love to hear the recommendations of expert designers as the people of this community.
Thanks!
Note: Please feel free of re-tag this question.