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>

誰かが二分木や樹状図を表現する方法を知っているか、よりスマートなコードを思いついた場合は、私に知らせてください！

Answer 1

@HugoDelsingのようなdivを使用して、このようなことをしました。私が行を処理する方法は、各ペアを4つの垂直にスタックされたdivに分割することでした。

1. 最初のプレーヤー（ボーダーボトム）
2. 1人目と2人目のプレーヤーの間のスペーサー（境界線-右）
3. 2番目のプレーヤー（border-bottomおよびborder-right）
4. 次のペアの前のスペーサー（境界線なし）

これらはそれぞれペアの高さの1/4*になり、右に移動するとペアの合計の高さが2倍になります。2の累乗がない場合は、スロットをプレースホルダーで埋めて、すべてを適切な量だけ押し下げます。

*下の境界線は高さを1だけずらすので、行をスタイリングするときはそれを考慮に入れてください。

その他の注意事項
スペーサーdivは必要ないかもしれませんが、私にとっては、間隔を簡単に処理し、さまざまな列を正しく整列させることができました。

高さにはPHPで入力されたインラインスタイルを使用したため、CSSにハードコードされた任意の深さ制限や計算はありませんでした。

これが例です。

編集
OK、ここにcodezがあります：

<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

もうすぐそこにいるようです。よくやった！あなたが望む中心の配置はCSSにあると思います

td {
    vertical-align: middle;
}

境界線を使用して線を機能させることはできないと思います。代わりに、背景画像を試してみてください。

Answer 3

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

• 各列に固定幅（例：200px）の相対/絶対位置を持つ列コンテナーdivを作成します。
• 各列コンテナには、前の列コンテナの2倍の高さと行の高さの内部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>