How do I present a tree in an HTML table?

Question

I'm trying to show a tree structure in an HTML table. It's basically a list of people you referred to a site, but you can expand each and see the people they referred too (only 2 or 3 levels). I'm also showing a number of pieces of information on each person, so I'm using a table, with several columns.

I'm wondering what's the best way to display this so that people in lower levels look "indented", but avoiding a mismatch between the data contents and the headers showing what each number means...

I'm mostly looking for stealing ideas here :-) Have you ever seen or done a site that has something like this?

---

Edit: Thank you for all the answers so far.

I think I failed to correctly explain what I'm trying to do. This is a list of people, but the reason of existence of this report is the numbers attached to each person, not the list itself.
For each person in this "list", I'm going to show data to their right, that needs to be aligned, for example, to have "totals" at the bottom, etc.

Picture, if you will, having Windows Explorer, with the tree on the left, so you can open and close folders, but then, to the right of each folder, you have data like how many files are in there, what kind of information, etc. Just like you get in the right pane in Windows Explorer for "files" (in Details view), only that I do it for the tree on the left. (This is not what i'm doing, but it's the closest analogy I could think of)

This is why I'm leaning towards making a table rather than a List. If these where just the people's names, or a tree of folders, I totally agree than nesting <ul>'s is the way to go. My problem in this case is that the extra data that I need to show for each item is the most important part of the whole report.

Answer 1

I'd try something using nested divs. I think it would be pretty hard to have it look like one big table with column headings only at the top, so you might be better off considering a new table for each level of nesting, or pivoting it round so you show the data as rows rather than columns.

Answer 2

Just convert tree data structure to one dimensional array with relationship of child and parents and then use this 1-D array to show your data in table.

Answer 3

So you have lists of people and groups of people. Arrange this as nested lists.

Then you have tabular information about each person. Present this as a series of tables.

Next, link the people to the table. This can be done with <a href="#table_about_person_a"> and <table id="table_about_person_a">

If JavaScript is enabled, load a stylesheet that sets all the tables to display: none;

Attach event handlers to each link in the list that read the href to get the id of the table associated with that user. Set the JS to make the table display: table (or block in IE <= 7).

Due to the issues with Internet Explorer, this is best done by assigning a class to all the tables to hide them, and then removing it to reveal them.

Then add CSS to position the tables beside the list.

Without JS, it should degrade cleanly so that clicking a name will scroll the browser to the table associated with it.

Answer 4

The names of such a layout are:

• tree grid / treegrid (ex: Ajax)
• tree list view / treelistview (ex: Microsoft .Net)
• tree model / treemodel (ex: Qt Framework)

Searches on "treegrid" and "tree grid html5" seem to give the best results for html implementations.

Answer 5

...It's basically a list of people...

You don't - this is not tabular data, it's a list (<ul>)

Answer 6

Certainly a table is the wrong tool to use I think. Usually, trees are defined as a list of subtrees (plus potentially some data), and thus, I think a semantic transformation into html should use some nested lists (and if you want that dynamicness in there, make sure that you keep all the lists open and CLOSE them with javascript, so they are open if the user has javascript disabled).

In fact, you also said, that you have a LIST of people who accessed the site, so it looks far more like list than a table.

Furthermore, nested lists can be easily formatted using CSS to look pretty nice. At least the effort to make such a nested list look nice is far, far less than trying to get a table to look that nice (I've tried both).

So overall: use a nested list. It fits the datastructure you represent better and it also fits your intuition better and also it can be formatted better in an easier way.