如何用表(html)表示二叉树?
Posted
技术标签:
【中文标题】如何用表(html)表示二叉树?【英文标题】:How to represent a binary tree with tables (html)? 【发布时间】:2011-11-25 09:11:39 【问题描述】:这是勇敢者的脑筋急转弯。我已经用了好几天了,只是无法提供解决方案。
我想拿出这样的东西:
我接近了,但并不完全符合我的预期。 Here is the code in PHP 和 here is the output。
<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>
如果有人知道如何表示二叉树或树状图或提出更智能的代码,请告诉我!
【问题讨论】:
【参考方案1】:我做过类似的事情,使用类似于@HugoDelsing 的 div。我处理线条的方式是将每一对分成 4 个垂直堆叠的 div:
-
第一个玩家(border-bottom)
第一名和第二名玩家之间的间隔(右边框)
第二个玩家(下边框和右边框)
下一对之前的间隔(无边框)
这些中的每一个都将获得一对高度的 1/4*,并且当您向右移动时,一对的总高度会加倍。如果您没有 2 的幂,请用占位符填充插槽,以将所有内容向下推到适当的数量。
*底部边框会使高度偏离 1,因此在设置行样式时要考虑到这一点。
其他说明 间隔 div 可能不是必需的,但对我来说,它们很容易处理间距并让不同的列正确排列。
我使用由 PHP 填充的内联样式作为高度,因此我没有任意深度限制或将计算硬编码到 CSS 中。
Here's an example.
编辑 好的,这里是代码:
<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;"> </div>
<div class="secondTeam" style="height:29px;"><div class="team">Team Two</div></div>
<div class="secondSpacer" style="height:30px;"> </div>
</div>
<div class="matchup">
<div class="firstTeam" style="height:29px;"><div class="team">Team Three</div></div>
<div class="firstSpacer" style="height:30px;"> </div>
<div class="secondTeam" style="height:29px;"><div class="team">Team Four</div></div>
<div class="secondSpacer" style="height:30px;"> </div>
</div>
<div class="matchup">
<div class="firstTeam" style="height:29px;"><div class="team">Team Five</div></div>
<div class="firstSpacer" style="height:30px;"> </div>
<div class="secondTeam" style="height:29px;"><div class="team">Team Six</div></div>
<div class="secondSpacer" style="height:30px;"> </div>
</div>
<div class="matchup">
<div class="firstTeam" style="height:29px;"><div class="team">Team Seven</div></div>
<div class="firstSpacer" style="height:30px;"> </div>
<div class="secondTeam" style="height:29px;"><div class="team">Team Eight</div></div>
<div class="secondSpacer" style="height:30px;"> </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;"> </div>
<div class="secondTeam" style="height:59px;"><div class="team">Team Three</div></div>
<div class="secondSpacer" style="height:60px;"> </div>
</div>
<div class="matchup">
<div class="firstTeam" style="height:59px;"><div class="team">Team Five</div></div>
<div class="firstSpacer" style="height:60px;"> </div>
<div class="secondTeam" style="height:59px;"><div class="team">Team Eight</div></div>
<div class="secondSpacer" style="height:60px;"> </div>
</div>
</div>
<div class="round">
<div class="matchup">
<div class="firstTeam" style="height:119px;"> </div>
<div class="firstSpacer" style="height:120px;"> </div>
<div class="secondTeam" style="height:119px;"> </div>
<div class="secondSpacer" style="height:120px;"> </div>
</div>
</div>
<div class="round">
<div class="matchup">
<div class="firstTeam" style="height:239px;"> </div>
</div>
</div>
【讨论】:
您能否粘贴代码示例或 jsfiddle 以便于可视化?看起来正是我想要的,谢谢【参考方案2】:我不会使用表格而是使用 div。
为每个列创建具有相对/绝对位置和固定宽度(例如:200 像素)的列容器 div。 每个列容器都有内部 div,其高度和行高是前一个列容器的两倍 创建一个长的黑色垂直线图像(长度至少为任何列中内部 div 最大高度的一半。从左侧 200 像素宽的水平线开始该行(因此将 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>
【讨论】:
有趣的方法。我做了一个小提琴here,但仍然看不到如何管理图像中的线条。【参考方案3】:看起来你快到了。干得好!我认为你想要的居中对齐在 CSS 中
td
vertical-align: middle;
我认为您无法使用边框使线条正常工作。您可以尝试为它们添加背景图片。
【讨论】:
是的,行不行,所以这不是解决方案(♫ niau niau niau,下次好运!♫)实际上,它比表面上看到的更多。我有几篇带有表示和公式的论文,可以很好地近似,但有些东西丢失了,目前无法继续。也许有一个更简单的近似值。以上是关于如何用表(html)表示二叉树?的主要内容,如果未能解决你的问题,请参考以下文章
c++如何用非递归的算法去创建二叉树,有没有分层建立二叉树的方法