テーブル（html）でバイナリツリーを表現するには？

Question

ここでは、勇敢のための脳のお誘いです。私は数日間それをしてきただけで解決策に来ることはできません。

私はこのようなもので出てくると思った：唯一のHTML、CSSとPHPを使用して

。

私は近くにいましたが、私が期待したものではありません。 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> 

誰かがバイナリツリーまたは系統樹を表現する方法を知っているか、よりスマートなコードを思い付く場合は私に知らせてください！

Answer 1

@HugoDelsingのようなdivを使用して、これを実行しました。

1. 最初のプレーヤー（縁下）1番目と2番目のプレーヤー（ボーダー右）
2. 間
3. スペーサー：私はラインを扱う方法は、4垂直に積み重ねられたdiv要素に各ペアを分割することでしたこれらの各々は1/4対の高さ*、及び全体の高さを取得次の対（無罫線）

前に第2プレイヤ（ボーダー底部との境界右）

スペーサ右に移動するとペアが2倍になります。 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> 

Answer 2

私はテーブルを使用しますが、divを使用しません。

• 各列の固定幅（例：200px）の相対/絶対位置で列コンテナdivを作成します。
• 各列コンテナには、前の列コンテナの高さと線高の2倍の内側divがあります。
• 長い黒い縦線イメージを作成します（任意の列の内部divの最大高さの半分以上）。水平線が200ピクセル幅の左に180度回転します（Lを180度回転させます）。画像の水平線より上の空きスペースのテキストの高さの約半分を残してテキストの下に表示します。
• このイメージを各列コンテナの内側のdivの背景として、左の中央に配置します; repeat = none;

一部サンプルコード（画像なし）

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

Answer 3

ほとんどあなたのように見えます。よくやった！私はあなたがしたい中心アライメントがCSSであると思う

td { 
    vertical-align: middle; 
} 

私はあなたが境界線を使用して作業するようになるとは思わない。代わりに、それらのために背景画像を試してみてください。