如何在 HTML 表格中呈现树？答案

【问题标题】：How do I present a tree in an HTML table?如何在 HTML 表格中呈现树？
【发布时间】：2010-10-31 00:50:54
【问题描述】：

我正在尝试在 HTML 表格中显示树结构。它基本上是您推荐的网站的人员列表，但您可以展开每个人并查看他们所推荐的人员（只有 2 或 3 个级别）。我还显示了每个人的许多信息，因此我使用了一个包含几列的表格。

我想知道显示此内容的最佳方式是什么，以便较低级别的人看起来“缩进”，但要避免数据内容与显示每个数字含义的标题之间的不匹配......

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

编辑：感谢您迄今为止的所有回答。

我想我没有正确解释我想要做什么。这是一份人员名单，但这份报告存在的原因是附在每个人身上的数字，而不是名单本身。
对于此“列表”中的每个人，我将在其右侧显示需要对齐的数据，例如，底部有“总计”等。

如果你愿意的话，有 Windows 资源管理器，左边有树，所以你可以打开和关闭文件夹，但是，在每个文件夹的右边，你有数据，比如里面有多少文件，什么种类的信息等。就像您在 Windows 资源管理器的右侧窗格中找到“文件”（在详细信息视图中）一样，只是我为左侧的树执行此操作。（这不是我在做的，但这是我能想到的最接近的类比）

这就是我倾向于制作表格而不是列表的原因。如果这些只是人名或文件夹树，我完全同意嵌套

是要走的路。在这种情况下，我的问题是，我需要为每个项目显示的额外数据是整个报告中最重要的部分。

【问题讨论】：

可以用其他html结构代替table吗？
是的，我可以，当然，我对想法持开放态度。
这听起来像是一个表格列表，如果我理解你的话。基本上，您列表中的每个人都有与该人相关的数据，这些数据被组织成一个表格。是这个，还是您列表中的人的名字实际上是名为“名称”的列中的数据值，还是什么？
也许您不能认为它不是嵌套表，而是具有“向下钻取”功能的大表？在您的情况下，高层次行的总数是低层次行的累积吗？
unix qps（可视化进程管理器）使用这样的树/表和树视图选项

标签： html layout tree html-table

【解决方案1】：

我没有答案，但我为那些难以想象 OP 需求的人提供了一个说明。

树视图中的 Unix QPS（可视化进程管理器）仅显示这样的树/表。

Google 图片搜索会找到一些示例图片。

就个人而言，很想知道如何在浏览器中实现这一点。

编辑：添加示例图像：

_{（来源：nada.kth.se）}

编辑：粗略实现

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

【讨论】：

这就是答案 :-) 我的问题是设计问题，而不是实现问题（我知道如何实现）要在浏览器中执行此操作，您只需使用表 :-) 您展示并像 dalbaeb 建议的那样隐藏行，然后使用 CSS 和类进行缩进并放置背景以显示树线。不过，嵌套缩进部分变得很棘手...... :-(我不认为你可以优雅地做到这一点。要么你为不同的级别定义了不同的类（这很糟糕并且有限制），或者你只是生成的（很烂）
或者你可以使用
- 标签来实现它们的设计目的。您可以使用“列表样式”系列的 CSS 属性来隐藏项目符号。
我同意 Samir 的观点，我觉得您使用 table 元素是因为它的外观，这是错误的方法。使用元素是因为它们的含义，而不是默认样式在 Web 浏览器中的外观；可以随时使用 CSS 进行更改。
不错。太糟糕了，我们可能在嵌套表上有不同的标题，否则在我的情况下也很好。
@Samir, Andrew：不想争论（或生气：P），很明显丹尼尔已经决定了一张桌子，因为我不确定 这个 answer is 一个答案，也许最好的方法是提供一些解决这个问题的实际代码。

【解决方案2】：

对列表使用语义适当的标签：<ul>。简单地嵌套它们。您可以隐藏部分结构，或者动态创建它。

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

等等。项目的命名由你决定，我通常会反映结构（如这里）或数据库 ID。

【讨论】：

加上一个语义方法...您可以使用 CSS 设置样式，使用 javascript 添加交互性...

【解决方案3】：

这种布局的名称是：

树形网格/树形网格（例如：Ajax）
树列表视图/树列表视图（例如：Microsoft .Net）
树模型/树模型（例如：Qt 框架）

搜索“treegrid”和“tree grid html5”似乎可以为 html 实现提供最佳结果。

【讨论】：

【解决方案4】：

...它基本上是一个人的列表...

你不知道 - 这不是表格数据，它是一个列表 (<ul>)

【讨论】：

这是评论，不是答案
我不同意。我的回答是不应该这样做，并提出替代方案。
嗯，不是真的，因为我在每个人的名字旁边显示数字。所以它在概念上是一个表格，不管我是否将它呈现为一个表格（到目前为止我认为这是最简单的方法）
这只是一个注释，借口是可以接受扩展定义良好的语义 HTML 元素的定义，但事实并非如此。
无论如何，即使您在人员姓名旁边显示一个表格，该人员也应该在列表中，因为这是人员列表。在您的列表中，您可以有表格，在这种情况下，您可能希望选择定义列表之类的东西，尽管跨浏览器设置样式可能会很棘手。无论如何，它认为这将是语义上最合适的方法。

【解决方案5】：

我们使用一堆 DIV 来显示类似的结构。奇数（第 1 位、第 3 位、第 5 位等）每个都有一个单行表，偶数位（第 2 位、第 4 位等）最初通过 CSS 设置为 'display:none'。每个表的第一个单元格包含一个链接，该链接触发它下面的 DIV 填充通过 AJAX 调用从服务器返回的数据。返回的数据可能具有与第一级内容相同的结构（许多“可扩展”行），或者只是有关记录的“详细信息”。它没有任何语义，但它看起来像客户想要的那样并且它可以工作。以下是截图：

展开前的初始列表： alt text http://img26.imageshack.us/img26/5986/28656041.png

点击最后一个链接 (70036720) 后： alt text http://img15.imageshack.us/img15/7455/40596280.png

点击第二级 (70036720-1) 中的链接后： alt text http://img197.imageshack.us/img197/4588/37964248.png

【讨论】：

非常有趣，这在某种程度上类似于我正在做的事情。那个红色的东西是实际桌子的一部分吗？看起来像那样吗？或者那是你后来添加的东西来标记我改变了什么？因为这可能是我正在寻找强调缩进的内容。谢谢！
包裹在桌子周围的DIV上的填充，与DIV上的背景色一起产生“红色的东西”效果。你也可以用边框来做，这只是简单的 CSS 调整。如果您想出一个简洁的技术或示例，如果您在这里分享，我将不胜感激，因为我们正在寻找一种更清晰的方式来强调缩进，这不是最终的。

【解决方案6】：

我会尝试使用嵌套的divs。我认为让它看起来像一个只在顶部有列标题的大表是非常困难的，所以你最好考虑为每个嵌套级别的新表，或者将它旋转以便将数据显示为行而不是列。

【讨论】：

所以您建议在每次扩展后在每个“较低级别”再次设置标题？这可以工作，但如果可以的话，我会尽量避免它，因为它看起来不会很整洁。

【解决方案7】：

当然，我认为使用表格是错误的工具。通常，树被定义为子树的列表（可能还有一些数据），因此，我认为到 html 的语义转换应该使用一些嵌套列表（如果你想要那里的动态性，请确保保留所有列表用javascript打开和关闭它们，所以如果用户禁用了javascript，它们就会打开。

事实上，您也说过，您有一个 LIST 访问该网站的人，所以它看起来更像是列表而不是表格。

此外，嵌套列表可以使用 CSS 轻松格式化，看起来非常漂亮。至少让这样一个嵌套列表看起来不错的努力远远低于试图让一个表格看起来那么漂亮（我都尝试过）。

总的来说：使用嵌套列表。它更适合您所代表的数据结构，也更适合您的直觉，并且可以以更简单的方式更好地格式化。

【讨论】：

【解决方案8】：

所以你有人员和人员组的列表。将其排列为嵌套列表。

然后你有关于每个人的表格信息。将其呈现为一系列表格。

接下来，将人员链接到表格。这可以通过<a href="#table_about_person_a"> 和<table id="table_about_person_a"> 完成

如果启用了 JavaScript，则加载设置所有要显示的表格的样式表：无；

将事件处理程序附加到列表中读取 href 以获取与该用户关联的表的 ID 的每个链接。设置 JS 使表格显示：表格（或 IE

由于 Internet Explorer 的问题，最好为所有表分配一个类以隐藏它们，然后将其删除以显示它们。

然后添加 CSS 以将表格放置在列表旁边。

如果没有 JS，它应该完全降级，以便单击名称会将浏览器滚动到与其关联的表。

【讨论】：

【解决方案9】：

Daniel，要获得类似于 Windows 资源管理器中文件夹层次结构的树形结构，您需要有表格、div、图像（能够展开折叠）等。你的 div 应该有自动生成的或增量的 id。当用户单击展开/折叠图标时，您的 div 可见性应设置为阻止或无。这应该在 javascript 中完成。

我做过类似的事情，我的数据是 xml 格式，包含部门、部门内的项目、项目内的资源等。我已应用 xslt 生成树结构的 reqd html 输出。让我知道您的要求是否相同。所以我可以给你发布示例 xml，xslt。

【讨论】：

【解决方案10】：

只需将树数据结构转换为具有孩子和父母关系的一维数组，然后使用这个一维数组在表格中显示您的数据。

【讨论】：

【解决方案11】：

每当您从树中构建表格时，请使用 <table>、<tr>、<td> 标记或其 CSS 等效项 table、table-row 和 table-cell 并将 display:contents 应用于元素您可以与表格进行整合以保留您的树结构，而不会破坏表格布局。

有关工作示例，请参阅 this fiddle。

【讨论】：