Drawing a tournament bracket (CSS/HTML based on PH

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!

回答1:

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.

回答2:

I have a project (TournamentsApi) that was made for tracking and rendering tournaments. You should take a look at it.

On my site, I'm rendering the brackets to SVG and embedding them in the HTML. I'd be happy to share the code I use for the SVG generation / embedding, if you were inclined to use my implementation.

Of course, mine is written in C#, so it may not suit you uses. However, the source code was released under the MIT license, and you are free to use the data structures I have created for your own project

回答3:

If you are up for a quick and dirty solution with No CSS or java needed. try this:

https://dl.dropboxusercontent.com/u/43939704/TournamentBrackets.7z

It's just HTML DIV's and a few .png files for the lines (see the 7Z file for pics).

Grtz, Theo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<meta http-equiv="refresh" content="1" >
<head>
  <title>Boom16 - dubbele afvalling </title>
</head>
<body>

<!-- Div info -->

    <div id="DivInfo"  style="position:absolute; top:10px; left:930px; width:300px; height:60px; "><FONT SIZE="10" COLOR="000000">DIVISIE 1</FONT></div>

<!-- Scheiding -->

    <div id="Scheiding"  style="position:absolute; top:604px; left:0px; width:926px; height:2x; border:2px solid #000; "></div>
    <div id="ST1"        style="position:absolute; top:585px; left:10px; width:200px; height:60px; "><FONT SIZE="3" COLOR="000000">Normale races<br>Herkansings races</FONT></div>


<!-- Lijnen -->

    <div id="H"    style="position:absolute; top:606px; left:1132px;width:24px; height:2x;     border:2px solid #000; "></div>
    <div id="HL2"  style="position:absolute; top:315px; left:900px; width:130px; height:260px; background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL3"  style="position:absolute; top:635px; left:900px; width:130px; height:260px; background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL4"  style="position:absolute; top:145px; left:670px; width:130px; height:110px; background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL5"  style="position:absolute; top:785px; left:670px; width:130px; height:110px; background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL6"  style="position:absolute; top:315px; left:670px; width:130px; height:110px; background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL7"  style="position:absolute; top:955px; left:670px; width:130px; height:110px; background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL8"  style="position:absolute; top:75px;  left:440px; width:130px; height:40px;  background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL9"  style="position:absolute; top:715px; left:440px; width:130px; height:40px;  background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL10" style="position:absolute; top:175px; left:440px; width:130px; height:40px;  background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL11" style="position:absolute; top:815px; left:440px; width:130px; height:40px;  background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL12" style="position:absolute; top:355px; left:440px; width:130px; height:40px;  background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL13" style="position:absolute; top:995px; left:440px; width:130px; height:40px;  background-image: url(Rood1.png);  background-size:100% 100%;"></div>
    <div id="HL14" style="position:absolute; top:455px; left:440px; width:130px; height:40px;  background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL15" style="position:absolute; top:1095px;left:440px; width:130px; height:40px;  background-image: url(Blauw1.png); background-size:100% 100%;"></div>
    <div id="HL16" style="position:absolute; top:30px;  left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL17" style="position:absolute; top:670px; left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL18" style="position:absolute; top:105px; left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL19" style="position:absolute; top:745px; left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL20" style="position:absolute; top:170px; left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL21" style="position:absolute; top:810px; left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL22" style="position:absolute; top:245px; left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL23" style="position:absolute; top:885px; left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL24" style="position:absolute; top:310px; left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL25" style="position:absolute; top:950px; left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL26" style="position:absolute; top:385px; left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL27" style="position:absolute; top:1025px;left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL28" style="position:absolute; top:1090px;left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL28" style="position:absolute; top:450px; left:210px; width:130px; height:15px;  background-image: url(Rood3.png);  background-size:100% 100%;"></div>
    <div id="HL30" style="position:absolute; top:525px; left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>
    <div id="HL31" style="position:absolute; top:1165px;left:210px; width:130px; height:15px;  background-image: url(Blauw3.png); background-size:100% 100%;"></div>

<!-- Blokken -->

    <div id="H0"  style="position:absolute; top:575px; left:1160px;width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H0  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H1"  style="position:absolute; top:575px; left:930px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H1  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H2"  style="position:absolute; top:255px; left:700px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H2  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H3"  style="position:absolute; top:895px; left:700px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H3  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H4"  style="position:absolute; top:115px; left:470px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H4  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H5"  style="position:absolute; top:755px; left:470px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H5  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H6"  style="position:absolute; top:395px; left:470px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H6  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H7"  style="position:absolute; top:1035px;left:470px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H7  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H8"  style="position:absolute; top:45px ; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H8  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H9"  style="position:absolute; top:685px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H9  R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H10" style="position:absolute; top:185px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H10 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H11" style="position:absolute; top:825px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H11 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H12" style="position:absolute; top:325px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H12 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H13" style="position:absolute; top:965px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H13 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H14" style="position:absolute; top:465px; left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H14 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H15" style="position:absolute; top:1105px;left:240px; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H15 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H16" style="position:absolute; top:10px;  left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H16 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H17" style="position:absolute; top:650px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H17 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H18" style="position:absolute; top:80px;  left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H18 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H19" style="position:absolute; top:720px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H19 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H20" style="position:absolute; top:150px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H20 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H21" style="position:absolute; top:790px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H21 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H22" style="position:absolute; top:220px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H22 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H23" style="position:absolute; top:860px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H23 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H24" style="position:absolute; top:290px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H24 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H25" style="position:absolute; top:930px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H25 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H26" style="position:absolute; top:360px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H26 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H27" style="position:absolute; top:1000px;left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H27 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H28" style="position:absolute; top:1070px;left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H28 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H28" style="position:absolute; top:430px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Flying dutch 1<br>H28 R: 19,11 B: 20,01<br>Brabo TD 1    </FONT></div>
    <div id="H30" style="position:absolute; top:500px; left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H30 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>
    <div id="H31" style="position:absolute; top:1140px;left:10px ; width:200px; height:60px; border:1px solid #000; "><FONT SIZE="2" COLOR="000000">Brabo TD 1    <br>H31 R: 19,11 B: 20,01<br>Flying dutch 1</FONT></div>


</body>
</html>