¿Cómo representar un árbol binario con tablas (html)?

Question

Aquí hay un rompecabezas para los valientes. He estado en esto durante días y simplemente no puedo venir con la solución.

Yo quería salir con algo como esto:

El uso de html, css y php solamente.

Me acerqué, pero no exactamente lo que esperaba. Here is the code in PHP y 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> 

Si alguien sabe cómo representar un árbol binario o un dendrograma o viene con un código más inteligente por favor hágamelo saber!

Answer 1

He hecho algo como esto, usando divs como @HugoDelsing. La forma en que manejé las líneas era dividir cada par en 4 divs apilados verticalmente:

1. El primer jugador (border-bottom)
2. un espaciador entre 1 y 2 jugadores (border-right)
3. el segundo jugador (border-bottom y border-right)
4. Un espaciador antes de que el siguiente par (sin fronteras)

Cada uno de ellos obtiene 1/4 de la altura del par *, y la altura total de un par se duplica a medida que te mueves hacia la derecha. Si no tiene una potencia de dos, llene las ranuras con marcadores de posición para empujar todo por la cantidad correcta.

* Los bordes inferiores arrojarán las alturas en 1, así que tenlo en cuenta al diseñar tus filas.

Otras Notas
Los divs espaciadores pueden no ser necesario, pero para mí que se maneja fácilmente el espacio y conseguir las diferentes columnas para alinear correctamente.

Utilicé estilos en línea rellenos por PHP para las alturas, por lo que no tenía un límite de profundidad arbitrario ni cálculos codificados en CSS.

Here's an example.

EDITAR
OK, aquí es teh 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

No utilizaría una tabla sino divs.

• crear un div contenedor de columna con posición relativa/absoluta con un ancho fijo (p. Ej .: 200px) para cada columna.
• Cada contenedor de columna tiene divisores internos con una altura y altura de línea del doble del contenedor de columna anterior
• crea una imagen de línea vertical negra larga (longitud al menos la mitad del tamaño de la mayor altura de divisiones internas en cualquier columna. alinee con una línea horizontal de 200px de ancho a la izquierda (para rotar una L con 180degrees). Deje aproximadamente la mitad de la altura del texto del espacio libre sobre la línea horizontal en la imagen, para que la línea quede debajo del texto.
• conjunto esta imagen como fondo para el div interno de cada contenedor de columna y colocarlo en el centro izquierdo; repeat = none;

Algunos código de muestra (sin imágenes)

<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

Parece que ya casi está allí. ¡Buen trabajo! Creo que el centro de la alineación que desea está en CSS

td { 
    vertical-align: middle; 
} 

No creo que se puede obtener de las líneas de trabajar usando fronteras. Puede intentar una imagen de fondo para ellos en su lugar.