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

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

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

Answer 3

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.

Answer 4

Use the semantically appropriate tag for lists: <ul>. simply nest them. you can hide part of the structure, or maybe create it on the fly.

<ul id='n0>
  <li id='n1'>One guy</li>
  <li id='n2'>Second guy
    <ul id='n2.0'>
      <li id='n2.1'>first one of second guy</li>
      <li id='n2.2'>last of second</li>
    </ul>
  </li>
  <li id='n3'>Third one</li>
</ul>

and so on. the naming of items is up to you, i usually do it either reflect the struture (as here), or the DB ids.

Answer 5

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 6

Daniel, to get a tree structure like the folder hierarchy in windows explorer you will need to have tables, divs, images (to be able to expand collapse), etc . Your divs should hav auto generated or incremental ids. Your div visibility should be set to block or none when the user clicks on the expand/ collapse icon. This should be done in javascript.

I have done a similar thing, where my data was in an xml format containing divisions, projects within the divisions, resources within the projects, etc. I had applied xslt to generate the reqd html output for tree structure. Let me know if your req is the same. So tht I can post you the sample xml, xslt.