Tablolarla ikili bir ağaç nasıl temsil edilir (html)?

Question

İşte

cesur bir beyin teaser. Günlerdir süredir çalışıyorum ve çözümle gelemiyorum.

böyle bir şey ile gelmek istedi:

sadece html, css ve php kullanma.

Ben yakın var, ama tamamen değil beklediğim. Here is the code in PHP ve 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> 

birisi bir ikili ağaç veya dendrogramında temsil bilen ve daha akıllı bir kodla gelirse lütfen bana bildirin!

Answer 1

@HugoDelsing gibi div'leri kullanarak böyle bir şey yaptım.

1. ilk oyuncu (border-bottom) 1. ve 2. oyuncular (border-right)
2. arasında
3. bir ayırıcı: Ben hatları ele yolu 4 dikey yığılmış div içine her çifti bölmek oldu ikinci oyuncu (border-bottom ve sınır-sağ)
4. sonraki çifti önce bir boşluk (hiçbir sınırın)

bunların her biri 1/4 çiftinin * yüksekliği alır ve toplam yüksekliği sağa ilerlerken bir çift iki katına çıkar. İki gücünüz yoksa, her şeyi doğru miktarda itmek için yuvaları yer tutucularla doldurun.

* Alt kenarlıklar yükseklikleri 1'e atacak, bu nedenle satırlarınızı şekillendirirken hesaba katın.

Diğer Notlar
ayırıcı div'ler gerekli olmayabilir, ama benim için onlar kolayca aralık ele ve farklı sütunlar alma düzgün sıraya.

Yükseklik için PHP tarafından doldurulmuş satır içi stiller kullandım, bu nedenle isteğe bağlı bir derinlik sınırına veya CSS'ye kodlanmış hesaplamalara sahip değildim.

<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

Ben bir masa ama div'leri cekti'kullanma.

• Her sütun için sabit genişlikli (ör: 200px) göreceli/mutlak konumlu bir sütun konteyner divı oluşturun.
• Her sütun kabı, bir yükseklikte ve önceki sütun konteynerinin
• iki katına sahip iç boşluklara sahip olup, herhangi bir sütunda en uzun boylu iç div boyunun yarısı kadar uzun bir siyah dikey çizgi resmi oluşturur. 200px yatay bir çizgi ile çizgi (böylece 180 derece ile bir L döndürün) çizgi.Yalnın altında metin satırının yaklaşık yarısı metin boşluğunun altında olacak, böylece satırın metnin altında olacaktır. Bu görüntü, her bir sütun kapsayıcısının iç divine arka plan olarak ve sol merkezde konumlandırılır = 0 =

Bazı örnek kod (resim olmadan)

<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

Neredeyse bulunduğunuz gibi görünüyor. İyi iş! Sana sınırları kullanarak çalışmak için çizgiler alabilirsiniz sanmıyorum istediğiniz hizalama CSS

td { 
    vertical-align: middle; 
} 

olduğunu düşünüyorum. Bunun yerine onlar için bir arka plan görüntüsü deneyebilirsiniz.