Challenge: Marking up the world cup
It’s at the end of the world cup and it’s everywhere (fotball for those that live in a cave :). It might be that I spend too much time with thinking about the web but I got this little markup issue on my mind. I’m not entirely sure how I would solve it but I have some ideas.
How would you mark up the FIFA World cup 2006 single elimination bracket? If you don’t know what it is, have a look at the page linked to. It’s basically 16 teams that play against eachother, one to one so half of the teams get kicked out in each step. Next step is with 8 teams, 4 teams ans so on. Pretty straight forward.
Now. Say you got contacted by FIFA to make that chart to put up on the web. Very skilled in Web Standards like you are, you start to think about what kind of data this really is. Is it a list? Ordered, unordered, nested? Is it a table, with the rounds as headers? Is it perhaps a definition list, mapping games played to teams? I don’t have any 100% true answers, I’m hoping for your help there.
The second problem is of course the style. What methods would you use? There’s quite a lot of boxes to place. Percentages? Can you make it zoom well?
Pasting code in comments to this blog is a bad idea (they just get messed up), so put it up on your own site instead an link to it by leaving a comment. Add a little explaination of your thinking of you wish. Can you do it?
[Update: Here’s my suggestion of markup and CSS for the world cup bracket.]