HTML 表：通过 rowspan 渲染水平二叉树？

Question

我想通过 HTML

table

元素创建以下二叉树表示（下图是在图像编辑器中生成的，而不是实际的 HTML）：

鉴于我之前使用

colspan

属性成功制作类似垂直树的经验，似乎使用

rowspan

属性和类似以下代码的代码是完全可能的：

<!DOCTYPE html>
<html>
<body>
<table border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="4">1</td>
        <td rowspan="2">2</td>
        <td rowspan="1">4</td>
    </tr>
    <tr>
        <td rowspan="2">3</td>
        <td rowspan="1">5</td>
    </tr>
    <tr>
        <td rowspan="1">6</td>
    </tr>
    <tr>
        <td rowspan="1">7</td>
    </tr>
</table>
</body>
</html>

但是，上面代码的结果在我尝试过的每个现代浏览器（Chrome、Safari、Firefox、Brave）的任何最新版本中都没有按预期显示：

我做错了什么吗？这可以用 HTML 表格实现吗？看起来应该是这样，但它不起作用......

备注：

如果可能的话，我非常希望使用 HTML 表格来完成。
我实际上想将这棵树扩展到更多代（甚至可能达到 10 或 12 代左右），所以理想情况下任何解决方案都适合。
我已经尝试了新的（-ish）“CSS 网格”功能——一个不错的工具，但 CSS 网格似乎不太适合将这样的树扩展到很多代，因为似乎每个网格单元都需要一个显式的 CSS
```
grid-row-start
```
规范将其正确放置在树中的正确行中（而不是像 HTML 表那样仅仅浮动到下一个可用的自然位置）。如果我将此树图扩展到包含数百或数千个单元格的世代，那么为每个单元格声明显式
```
grid-row-start
```
值似乎不切实际（或者至少非常不可取）。

Answer 1

典型：制定并重新阅读问题使我意识到 HTML 代码中的错误。

以下（稍作修改）代码按预期/期望工作：

<!DOCTYPE html>
<html>
<body>
<table border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="4">1</td>
        <td rowspan="2">2</td>
        <td rowspan="1">4</td>
    </tr>
    <tr>
        <td rowspan="1">5</td>
    </tr>
    <tr>
        <td rowspan="2">3</td>
        <td rowspan="1">6</td>
    </tr>
    <tr>
        <td rowspan="1">7</td>
    </tr>
</table>
</body>
</html>

Answer 2

也许你可以试试这个。它将树状数据转换为表格。从树到表

HTML 表：通过 rowspan 渲染水平二叉树？

问题描述投票：0回答：2

2个回答

最新问题

HTML 表：通过 rowspan 渲染水平二叉树？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2