如何在HTML表格中呈现树？

我试图在 HTML表中显示树结构.它基本上是一个你引用一个网站的人的列表,但是你可以扩展每个人,并且看到他们提到的人(只有2或3个级别).
我还在每个人上显示了一些信息,所以我正在使用一个表,有几列.

我想知道什么是最好的方法来显示,以便下层的人看起来“缩进”,但避免数据内容和标题之间的不匹配,显示每个数字意味着什么…

我主要是在这里窃取想法:-)你有没有看过或做过一个这样的网站？

编辑：谢谢你到目前为止所有的答案.

我想我没有正确地解释我正在做什么.
这是一个人的列表,但是这个报告的存在的原因是每个人附加的数字,而不是列表本身.
对于这个“列表”中的每一个人,我要显示数据到右边,需要对齐,例如在底部有“总计”等.

图片,如果你有Windows资源管理器,左边的树,所以你可以打开和关闭文件夹,然后,在每个文件夹的右侧,你有数据,如在那里有多少个文件,什么样的信息等等,就像您在Windows资源管理器中的“文件”(在“详细信息”视图中)中的右窗格中,只有我在左侧的树中执行此操作.
(这不是我在做什么,但这是我能想到的最接近的比喻)

这就是为什么我倾向于制作桌子而不是列表.
如果这些仅仅是人们的名字,或者一堆文件夹,我完全同意嵌套< ul>是必须要走的路.在这种情况下,我的问题是我需要为每个项目显示的额外数据是整个报告中最重要的部分.

解决方法

我没有答案,但是对于那些无法想象OP的需要的人来说,这是一个例证.

树视图中的Unix QPS(可视化进程管理器)只显示了这样的树/表.

Google图片搜索会找到几个示例图片.

就个人而言,很想知道如何在浏览器中实现.

编辑：添加了一个示例图像：

alt text http://www.student.nada.kth.se/~f91-men/qps/tree.png

编辑：粗体实现

<!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>

如何在HTML表格中呈现树？

解决方法

相关文章