Daniel Magliola Daniel Magliola - 2 months ago 7
HTML Question

How do I present a tree in an HTML table?

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

I don't have an answer, but I have an illustration for those who have trouble visualizing OP's need.

Unix QPS (visual process manager) in Tree View shows just such a tree/table.

Google image search finds a few sample images.

Personally, would love to know how to implement this in a browser.

Edit: Added a sample image:

alt text

Edit: Crude implementation

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html>
    <head>
    	<style>
    		.removed
    		{
    			display:none;
    		}

    		.expands
    		{
    			cursor:pointer; cursor:hand;
    		}

    		.child1 td:first-child
    		{
    			padding-left: 1em;
    		}

    		.child2 td:first-child
    		{
    			padding-left: 2em;
    		}
    	</style>
    	<script>
    		function toggle()
    		{
    			for(var i=0; i<arguments.length; i++)
    			{
    				with(document.getElementById(arguments[i]))
    				{
    					if(className.indexOf('removed') > -1)
    					{
    						className = className.replace('removed');
    					}
    					else
    					{
    						className += ' removed';
    					}
    				}
    			}
    		}
    	</script>
    </head>
    <body>
    <table>
    	<thead>
    		<tr>
    			<th>Person</th>
    			<th>Prop 1</th>
    			<th>Prop 2</th>
    			<th>Prop 3</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr id="p1" class="expands" onclick="toggle('p2','p3')">
    			<td>P1</td>
    			<td>a</td>
    			<td>b</td>
    			<td>c</td>
    		</tr>
    		<tr id="p2" class="removed child1">
    			<td>P2</td>
    			<td>a</td>
    			<td>b</td>
    			<td>c</td>
    		</tr>
    		<tr id="p3" class="removed child2">
    			<td>P3</td>
    			<td>a</td>
    			<td>b</td>
    			<td>c</td>
    		</tr>
    	</tbody>
    	<tfoot>
    		<tr>
    			<td>Totals:</td>
    			<td>x</td>
    			<td>y</td>
    			<td>z</td>
    		</tr>
    	</tfoot>
    </table>
    </body>
</html>