トーナメントブラケットの意味がよくわからない場合は、http： //baseballguru.com/bracket1.gifを参照してください。
そうは言っても、私はデータセットを作成し、ラウンド数（ceil（log（$ numPlayers、2）））を計算し、各ラウンドのプレーヤー数などを快適に見つけることができます。
ここで行う必要があるのは、各ラウンドの一致の配列を角かっこに移動することです。CSSであろうとテーブルであろうと、私は自分でデザインを試すことができます。これを視覚的なものに構築する方法（トーナメントのラウンド数は可変であると考えてください）をどうすればよいのか疑問に思っています。
ありがとう！
トーナメントの追跡とレンダリングのために作成されたプロジェクト（TournamentsApi ）があります。あなたはそれを見てみるべきです。
私のサイトでは、ブラケットをSVGにレンダリングし、HTMLに埋め込みます。私の実装を使用したい場合は、SVGの生成/埋め込みに使用するコードを共有できれば幸いです。
もちろん、私のものはC＃で書かれているので、あなたの用途には合わないかもしれません。ただし、ソースコードはMITライセンスの下でリリースされており、私が自分のプロジェクト用に作成したデータ構造を自由に使用できます。
あなたはテーブルと一緒に行きrowspan、ブラケットを並べるために適切なsを設定することができます。これはより簡単な方法ですが、意味的に正しくないと言う人もいます。例。
また、CSSのレイヤーを使用して、適切な位置を計算し、絶対位置のdivを使用してブラケットのように見せることもできます。このアプローチは、javascriptで移動しない限り、流動的ではないことに注意してください。これについての詳細。
最後に、このトピックで説明されているように、ネストされたリストを使用してそれを行うことができますが、それはかなり厄介に見えます。
CSSやJavaを必要としない、迅速で汚いソリューションを求めている場合。これを試して：
https://dl.dropboxusercontent.com/u/43939704/TournamentBrackets.7z
これは、HTML DIVとその行のいくつかの.pngファイルです（写真については7Zファイルを参照してください）。
グルツ、テオ
<!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>