php - 如何用表（html）表示二叉树？

Question

这是勇敢者的脑筋急转弯。我已经做了好几天了，只是无法提供解决方案。

我想拿出这样的东西：

在此处输入图像描述

仅使用 html、CSS 和 PHP。

我接近了，但并不完全符合我的预期。这是 PHP 中的代码，这是输出。

<table border="0">
<thead>
    <tr>
        <th>Cientoveintiochavos</th>
        <th>Seseintaicuatravos</th>
        <th>Treintaidosavos</th>
        <th>Dieciseisavos</th>
        <th>Octavos</th>
        <th>Cuartos</th>
        <th>Semifinales</th>
        <th>Final</th>
    </tr>
</thead>
<tbody>
<?php for($i=0;$i<256;$i++): ?>
    <tr>
        <?php for($n=0,$c=2;$n<8;$n++,$c*=2): ?>
            <?php 
            /*
            if(false){//$i == 0) {
                $rwspn = $c/2+1; 
                $iter = 0;
            } else {
                $rwspn = $c; 
                $iter = $c;//-$c/2+1;
            } 
            */
            $class = ($i%($c*2))?'par':'impar winner';
            if($i%$c==0):?>
                <td rowspan="<?=$c;?>" class="<?=$class;?>"><span><?php echo genRandomString();?></span></td>
            <?php endif; ?>
        <?php endfor; ?>
    </tr>   
<?php endfor; ?>
</tbody>
</table>

如果有人知道如何表示二叉树或树状图或提出更智能的代码，请告诉我！

score 3 · Accepted Answer

我做过类似的事情，使用类似于@HugoDelsing 的 div。我处理线条的方式是将每一对分成 4 个垂直堆叠的 div：

第一个玩家（border-bottom）
第一名和第二名球员之间的间隔（右边界）
第二个玩家（border-bottom 和border-right）
下一对之前的间隔（无边框）

这些中的每一个都得到一对高度的 1/4*，并且当您向右移动时，一对的总高度会加倍。如果您没有 2 的幂，请使用占位符填充插槽，以将所有内容向下推到适当的数量。

*底部边框会将高度降低 1，因此在设置行样式时要考虑到这一点。

其他注意事项
间隔 div 可能不是必需的，但对我来说，它们很容易处理间距并让不同的列正确排列。

我使用由 PHP 填充的内联样式作为高度，因此我没有任意深度限制或硬编码到 CSS 中的计算。

这是一个例子。

编辑
好的，这里是代码：

<style type="text/css">
    .round{
        float:left;
        width:200px;
    }
    .firstTeam, .secondTeam{
        border-bottom:1px solid #ccc;
        position:relative;
    }
    .firstSpacer, .secondTeam{
        border-right:1px solid #ccc;
    }
    .team{
        position:absolute;
        bottom: 4px;
        left: 8px;
    }
</style>
<div class="round">
    <div class="matchup">
        <div class="firstTeam" style="height:29px;"><div class="team">Team One</div></div>
        <div class="firstSpacer" style="height:30px;">&nbsp;</div>
        <div class="secondTeam" style="height:29px;"><div class="team">Team Two</div></div>
        <div class="secondSpacer" style="height:30px;">&nbsp;</div>
    </div>
    <div class="matchup">
        <div class="firstTeam" style="height:29px;"><div class="team">Team Three</div></div>
        <div class="firstSpacer" style="height:30px;">&nbsp;</div>
        <div class="secondTeam" style="height:29px;"><div class="team">Team Four</div></div>
        <div class="secondSpacer" style="height:30px;">&nbsp;</div>
    </div>
    <div class="matchup">
        <div class="firstTeam" style="height:29px;"><div class="team">Team Five</div></div>
        <div class="firstSpacer" style="height:30px;">&nbsp;</div>
        <div class="secondTeam" style="height:29px;"><div class="team">Team Six</div></div>
        <div class="secondSpacer" style="height:30px;">&nbsp;</div>
    </div>
    <div class="matchup">
        <div class="firstTeam" style="height:29px;"><div class="team">Team Seven</div></div>
        <div class="firstSpacer" style="height:30px;">&nbsp;</div>
        <div class="secondTeam" style="height:29px;"><div class="team">Team Eight</div></div>
        <div class="secondSpacer" style="height:30px;">&nbsp;</div>
    </div>
</div>
<div class="round">
    <div class="matchup">
        <div class="firstTeam" style="height:59px;"><div class="team">Team One</div></div>
        <div class="firstSpacer" style="height:60px;">&nbsp;</div>
        <div class="secondTeam" style="height:59px;"><div class="team">Team Three</div></div>
        <div class="secondSpacer" style="height:60px;">&nbsp;</div>
    </div>
    <div class="matchup">
        <div class="firstTeam" style="height:59px;"><div class="team">Team Five</div></div>
        <div class="firstSpacer" style="height:60px;">&nbsp;</div>
        <div class="secondTeam" style="height:59px;"><div class="team">Team Eight</div></div>
        <div class="secondSpacer" style="height:60px;">&nbsp;</div>
    </div>
</div>
<div class="round">
    <div class="matchup">
        <div class="firstTeam" style="height:119px;">&nbsp;</div>
        <div class="firstSpacer" style="height:120px;">&nbsp;</div>
        <div class="secondTeam" style="height:119px;">&nbsp;</div>
        <div class="secondSpacer" style="height:120px;">&nbsp;</div>
    </div>
</div>
<div class="round">
    <div class="matchup">
        <div class="firstTeam" style="height:239px;">&nbsp;</div>
    </div>
</div>

score 0 · Accepted Answer

我不会使用表格，而是使用 div。

为每个列创建一个具有固定宽度（例如：200px）的相对/绝对位置的列容器 div。
每个列容器都有内部 div，其高度和行高是前一个列容器的两倍
创建一个长的黑色垂直线图像（长度至少是任何列中内部 div 最大高度的一半。从左侧 200px 宽的水平线开始该行（因此将 L 旋转 180 度）。留下大约一半图像中水平线上方可用空间的文本高度，因此该线将位于文本下方。
将此图像设置为每个列容器内部 div 的背景，并将其定位在左中心；重复=无；

一些示例代码（没有图像）

<style type="text/css">
div.col { position:absolute;border:1px solid #f00;width:200px;top:0px; }
div.col1 { left:0px; }
div.col1 div { height:20px; line-height:20px; }
div.col2 { left:200px; }
div.col2 div { height:40px; line-height:40px; }
div.col3 { left:400px; }
div.col3 div { height:80px; line-height:80px; }
div.col4 { left:600px; }
div.col4 div { height:160px; line-height:160px; }
div.col5 { left:800px; }
div.col5 div { height:320px; line-height:320px; }
</style>


<div class='col1 col'>
    <div>player1</div>
    <div>player2</div>
    <div>player3</div>
    <div>player4</div>
    <div>player5</div>
    <div>player6</div>
    <div>player7</div>
    <div>player8</div>
    <div>player9</div>
    <div>player10</div>
    <div>player11</div>
    <div>player12</div>
    <div>player13</div>
    <div>player14</div>
    <div>player15</div>
    <div>player16</div>
</div>
<div class='col2 col'>
    <div>player1</div>
    <div>player3</div>
    <div>player5</div>
    <div>player7</div>
    <div>player9</div>
    <div>player11</div>
    <div>player13</div>
    <div>player15</div>
</div>
<div class='col3 col'>
    <div>player1</div>
    <div>player5</div>
    <div>player9</div>
    <div>player13</div>
</div>
<div class='col4 col'>
    <div>player1</div>
    <div>player9</div>
</div>
<div class='col5 col'>
    <div>player1</div>
</div>

score 0 · Accepted Answer

看起来你快到了。干得好！我认为你想要的中心对齐在 CSS

td {
    vertical-align: middle;
}

我认为您无法使用边框使线条正常工作。您可以尝试为他们使用背景图片。

php - 如何用表（html）表示二叉树？

3 回答 3

Related

Reference