Here is a brain-teaser for the brave. I’ve been at it for days and just can’t come with the solution.
I wanted to come out with something like this:
Using html, CSS and PHP only.
I got near, but not quite what I expected. Here is the code in PHP and 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>
If someone knows how to represent a binary tree or a dendrogram or comes up with a smarter code please let me know!
I’ve done something like this, using divs kinda like @HugoDelsing. The way I handled the lines was to divide each pair into 4 vertically-stacked divs:
Each of these gets 1/4 the height of the pair*, and the total height of a pair gets doubled as you move to the right. If you don’t have a power of two, fill slots with placeholders to push everything down the right amount.
*The bottom borders will throw the heights off by 1, so take that into account when styling your rows.
Other Notes
The spacer divs may not be necessary, but for me they easily handled the spacing and getting the different columns to line up correctly.
I used inline styles filled-in by PHP for the heights, so I didn’t have an arbitrary depth limit or calculations hard-coded into CSS.
Here’s an example.
EDIT
OK, here is teh codez: