HTML: Tournament Brackets


There’s a lack of HTML code for tournament brackets out there that don’t use tables, so I decided to go ahead and create some. I have tested this across all major browsers. To get an idea of how it works, start with the 4 player tournament, as it does get a little messy when you reach 32 players.

Free to use/steal/copy.


22 Comments

Calvin on Sunday, May 15, 2011 (3:34AM)

thanks, this is very useful

[AA]Swifty on Wednesday, July 27, 2011 (2:34PM)

Thanks for this. it has been helpful!

AngelofDev on Monday, December 05, 2011 (7:30AM)

Thank you so much, you’re a legend.

ArcherSam on Monday, January 16, 2012 (9:27AM)

Thanks for the help!

Mvdelrosario on Tuesday, January 31, 2012 (2:44AM)

Thanks a lot!!! This is a lot of help…I’ve been searching for this for about a week!

Juan Delgado on Wednesday, February 22, 2012 (12:19PM)

Simple, Easy to Read, Easy to implement.

Thank you so much.

David on Friday, August 17, 2012 (8:34AM)

I’ve been looking long for such a thing, but I don’t understand the source: How come round1-top has a right and bottom border in CSS, but only the bottom border is displayed?

Nikola on Thursday, August 23, 2012 (12:45PM)

Thank you very much. Very useful!

DM on Sunday, December 23, 2012 (11:01AM)

What’s the best way to change the 8-team tournament to percentages instead of pixels?

Roy on Sunday, February 17, 2013 (6:45AM)

How do i get the HTML code ….

dgodfather on Monday, March 18, 2013 (1:48PM)

Roy,

Click the link and save the page. Open it with and text editor and you will see the html.

Justin on Thursday, April 11, 2013 (2:44PM)

Perfect. Very simple and clean. Good job.

Brian on Friday, August 16, 2013 (9:21AM)

This is awesome…thank you!

Avery Pettway on Monday, February 10, 2014 (3:36PM)

I know this may sound dumb but the code is not showing up as a bracket for me. Is there something that I am not doing correct?

HL on Wednesday, March 26, 2014 (4:42AM)

Thanks :D may god bless you :)

ACiDC0re on Wednesday, April 09, 2014 (3:38PM)

Hi, This is very helpful! Thanks alot!

But can someone help me for a 64-player bracket? :)

Thanks!

Erick on Sunday, September 14, 2014 (11:25PM)

Many thanks man!!! you save me a lot…
greetings :p

J Perry on Wednesday, December 03, 2014 (2:08AM)

I noticed that when I shortened my screen that the 16 jumbled up pretty bad. I corrected it by taking 10px off of each of the widths. I also took the font size down a bit, but I’m not sure that mattered. It can shrink to any size now. :) Thanks a ton!

Adam on Friday, March 20, 2015 (9:52AM)

Thanks for sharing! Saved me lots of time. Cheers

john templeton on Thursday, April 30, 2015 (9:15AM)

Is there a way to get 6 team brackets somehow?

Ken on Tuesday, October 27, 2015 (2:29PM)

What about displaying from the right side.
for example lets say I have 8 competitors, I would see 4 on the right and 4 on the left?

K on Sunday, November 15, 2015 (9:53PM)

Simple and solid. Exactly what I needed for my current project; thanks so much for sharing!