5

Is there a website I can create an HTML final four bracket?

Or is there just HTML out there that will create it automatically and I can just fill in the specifics?

antonjs
  • 14,060
  • 14
  • 65
  • 91
Brad
  • 12,054
  • 44
  • 118
  • 187

3 Answers3

8

Stumbled upon this HTML code, this did the trick. I will post it just in case anyone down the road has the same question.

table.bracket {
    border-collapse: collapse;
    border: none;
}

.bracket td {
    vertical-align: middle;
    width: 40em;
    margin: 0;
    padding: 10px;
}

.bracket td p {
    border-bottom: solid 1px black;
    margin: 0;
    padding: 5px 5px 5px 5px;
}

.bracket th{
    text-align:center;
}

<table summary="Tournament Bracket" class="bracket">
<tr>
    <th>National Semi-Finals<br>Saturday November 8th</th>
    <th>National Championship<br>Sunday November 9th</th>
    <th>NJCAA National Champion</th>
</tr>
<tr>
    <td><p>#1 Manchester CC (17-2-1)</p></td>
    <td rowspan="2"><p></p></td>
    <td rowspan="4"><p></p></td>
</tr>
<tr>
    <td><p>#4 Triton College (13-4-0)</p></td>
</tr>
<tr>
    <td><p>#2 Herkimer County CC (18-3-0)</p></td>
    <td rowspan="2"><p></p></td>
</tr>
<tr>
    <td><p>#3 County College of Morris (17-3-0)</p></td>
</tr>
</table>

edit, fiddled: http://jsfiddle.net/4KZ6T/

sxv
  • 33
  • 6
Brad
  • 12,054
  • 44
  • 118
  • 187
5

I don't really know what you need from the question but from the looks of it try out:

http://www.bracketmaker.com/

bmeck
  • 426
  • 2
  • 4
5

This NBA Playoff bracket built with html/css and the blog post about it may provide some inspiration.


EDIT: This answer is nearly 12 years old. The links are dead, and HTML and CSS have evolved a lot since then. Here's a nice roundup of HTML/CSS tournament brackets collected in 2018 by Chris Coyier (founder of CSS Tricks and Codepen) https://blog.codepen.io/2018/02/16/need-make-tournament-bracket/

Andy Ford
  • 8,410
  • 3
  • 26
  • 36
  • 4
    The blog post here is no longer available. Do you have an alternative link? – xan Nov 01 '11 at 16:45
  • link to the bracket is also not valid anymore – RWC Sep 27 '20 at 11:41
  • 1
    Some internet archives captures: https://web.archive.org/web/20081222161333/http://www.breathingfire.com/nba/playoffs/2009/bracket2009.php & https://web.archive.org/web/20081207025920/http://www.breathingfire.com/2008/03/nba-playoffs-bracket-hows-it-work/ ... But if you want to do a bracket in HTML/CSS, you're probably much better off using an approach that is not from 2008/2009 since HTML and CSS have evolved quite a lot since then. Here's a quite nice roundup from 2018 by Chris Coyier (found of CSS Tricks and Codepen) https://blog.codepen.io/2018/02/16/need-make-tournament-bracket/ – Andy Ford Sep 29 '20 at 14:26