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.]

17 responses to “Challenge: Marking up the world cup

  1. Well, your question isn’t that easy to answer. In fact, I’m not sure whether I can do something like that…
    Tables, either they experienced markup or are viewn in plain text mode, they look ordered anyhow. And, well, it actually is some kind of tabular data, I think.
    Lists would be semantically stronger (?) but have to be written in the wrong order. One would have to nest them, therefore the final round is at the very beginning and the “round of 16” is the deepest level of all available. That might be strange, but with ordered lists the meaning could be clarified a bit (curse FIFA for giving away a third place as well, because that doesn’t fit well into the hierarchy).
    The problem is the brackets. Final rounds have to be on the very right of the page so every new level has to be positioned farther left (relative to its parent). Inserting bracket image things makes my head smoke now. That’s really a hard task! Maybe I can figure out something during the day :S

  2. I’m thinking a table with one row and a column for each round, then a definition list within each column. Each DT contains the date, time & location, followed by 2 DDs, one for each team.

    To actually format the thing, I think I’d highly recommend absolute or relative positioning.. or put a class on each round and try to set the padding, margins and backgrounds to line everything up okay, maybe even using em or % if you are very patient and talented.

  3. This is actually a pretty common type of data that the HTML spec doesn’t seem to account for… There is a ton of sports data, geneology, etc out there on the web. Maybe we need to notify the w3c?

  4. @Just-A-Lurker: I don’t think so. HTML in its simplicity can be used to mark up a lot of complex things. You just need a little imagination.

  5. Tried to make this by just using defintion lists, for fun.
    But I couldn’t find a way to get the round titles at the right position.
    So I ended up with, basicly, the layout Jesse describes.
    Right now, the only problem is getting the matches evenly distributet vertically…
    Also, of course, IE compatibility if one wants that.

  6. Ok, I’m very new with this so there’s probably some problems with the semantics.
    Anyway I made one basicly in the way Jesse describes it, but I didn’t like it, too much scrolling, empty space and it got cluttered without CSS on, so I made a new one using only definition lists.
    I personally think that the new one is much easier to read and friendlier for small screens and the like and hopefully the markup makes more sense :)

    The links
    dl only

    I will probably try and throw something better togheter, the dl+table one is just a try to make it look like the Wiki one. Which you hopefully noticed.

  7. Nested tables, anyone? This is the first time I see a valid use case for nesting tables.

    My reasoning is simple. The overall structure is best marked up using a table, because it has columns and headers for each column. Then rowspan can be used to achieve the “tree” relation.

    The inner tables are tables because they have a caption. They could even have column headers as well (“Country”, “Results”), but that would be too verbose.

    The Third place table is a bit tricky. Structurally, it has the same “parents” as Final, but there are only so many dimensions a table can have. (I’ve thought about the axis attribute, but I’m not sure how it helps.)

    I’ve only addressed one problem here. I’ll hand over the styling to someone else.

  8. @exe: That, my friend, is a damn good example. Well done! I’m not fully sure about the table there, just because it has headers doesn’t mean a table is needed right? None the less, I’m really impressed, thanks!

    @zcorpan: Interesting idea! Certainly makes styling easy, does it? ;) I’m not fully sure about representing a match as a table but I guess it could be thought of as having a “team” and “score” header like you say. Well done!

    I’ll try to wrap something up later tonight and post about it.

  9. Thanks :), though mostly it’s based on what Jesse said.Well, I wasn’t too sure about the tables myself, not even so sure about the rest either, but I couldn’t think of any other markup that would allow me to style it like the Wiki version, without restricting scaleability.Maybe left floated or inline headers, followed by 4 floated lists with definition lists in them could work too?
    I’ve updated the pages a bit so it should render more nicely in IE now, probably

  10. Ok, I finally got the time to sit down and play with this :)

    Here’s my world cup bracket markup and CSS suggestion.

    I focused on the tree-like relationships of the data instead of the “vertical” relationship of “matches belonging to semi-finals” like the examples above did. Which one you want to use it up to you.

  11. I’ve created an unlayered, regular <table> version.

    This approach places each match on its own row, with columns for the properties of each match.

    Each stage is grouped into a <tbody> with a row heading that spans all the rows in that stage.

    The matches are ordered by the time and date they were played on, like a timetable.

    The scope attribute is used on heading cells to make their relationships clearer to software.

    I think some of the other attempts may have been a bit too interested in how the result looks in their browser and creating weird markup to make it look right?

    Emil, your list example is interesting…like a reversed-chronological heirarchy. It is difficult to understand without the CSS, although it looks nice with it. c{:¬)

    (A preview button would be very helpful!)

  12. That site that you have made about the worldcup is very good as the ingo and the statistics.But the visitors of your site want design.Real design.They can find the statistics about WC 2006 anywhere in web sites with a good design. So give the customers what they want – design.

  13. @Haralan Dobrev: this article is not about design, only the code behind :) But sure, for these solutions to be worth anything in the real world you need a good design.

  14. I follow this discussion from the beginning. Al ideas so far so good, but what about the “lines” or “connections” between the single data’s as on the original site? I think position of data is not the problem, more the “absolute original layout”, you know what I mean? Greetings from Amsterdam

Comments are closed.