Как представить двоичное дерево с таблицами (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

Я сделал что-то вроде этого, используя divs вроде @HugoDelsing.То, как я справлялся со строками, состояло в том, чтобы разделить каждую пару на 4 вертикальных стека:-право)

Второй игрок (border-bottom и border-right) Проставка перед следующей парой (без границ)

Каждый из них получает1/4 высоты пары *, а общая высота пары удваивается при перемещении вправо.Если у вас нет степени двойки, заполните слоты местозаполнителями, чтобы выровнять все на нужную величину.

* Нижние границы уменьшат высоту на 1, поэтому учитывайте это при стилизации строк.

Другие примечания
Возможно, разделительные разделители не нужны, но для меня они легко обрабатывают интервалы и приводят различные столбцы в правильное расположение.

Я использовал встроенные стили, заполненные 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

Похоже, ты почти у цели.Хорошо сделано!Я думаю, что выравнивание по центру вы хотите в CSS

td {
    vertical-align: middle;
}

Я не думаю, что вы можете заставить линии работать, используя границы.Вместо этого вы можете использовать для них фоновое изображение.

Answer 3

Я бы не использовал таблицу, но дел.

• создать контейнер столбца div с относительной / абсолютной позицией с фиксированной шириной (например, 200 пикселей) для каждого столбца.
• Каждый контейнер столбца имеет внутренние 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>