Search code examples
phphtmlcsstournament

Drawing a tournament bracket (CSS/HTML based on PHP Dataset)


If you're not familiar with what I mean by tournament bracket, see here: http://baseballguru.com/bracket1.gif

That said, I have built the dataset and figured out the number of rounds (ceil(log($numPlayers,2))) and I am comfortable finding the number of players in each round, etc.

What I need to do now is move my array of matches for each round into a bracket. Be it CSS, or tabled, I can play with the design myself, I'm just wondering how I should go about building this (consider the tournament can have a variable number of rounds) into something visual.

Thanks!


Solution

  • You could go with tables and set appropriate rowspans to line up the bracket. This is the easier way, but some will say not semantically correct. Example.

    You could also do it with CSS'd layers by simply calculating appropriate positions and using absolutely positioned divs to make it look like a bracket. Note that this approach won't be fluid unless you move it around by javascript. More on this.

    Finally, you could do it with nested lists, as described in this topic, but that looks quite messy.