Challenge: Marking up the world cup

Comments

1. Jul 4, 2006

   By: Christian Tietze (#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. Jul 4, 2006

   By: Emil Stenström (#2)

   @Christian: Good luck :)
3. Jul 5, 2006

   By: Jesse Skinner (#3)

   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.
4. Jul 6, 2006

   By: Just-A-Lurker (#4)

   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?
5. Jul 6, 2006

   By: Emil Stenström (#5)

   @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.
6. Jul 7, 2006

   By: exe (#6)

   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.
7. Jul 7, 2006

   By: Emil Stenström (#7)

   exe: keep on working, no one has posted their attempt yet, so I'm still waiting :)
8. Jul 8, 2006

   By: exe (#8)

   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+table
   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.
9. Jul 14, 2006

   By: zcorpan (#9)

   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.
10. Jul 14, 2006

    By: Emil Stenström (#10)

    @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.
11. Jul 15, 2006

    By: exe (#11)

    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
12. Jul 16, 2006

    By: Emil Stenström (#12)

    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.
13. Jul 17, 2006

    By: Ben Millard (#13)

    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!)
14. Jul 18, 2006

    By: Haralan Dobrev (#14)

    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.
15. Jul 19, 2006

    By: Emil Stenström (#15)

    @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.
16. Jul 21, 2006

    By: Joachim (#16)

    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
17. Jul 22, 2006

    By: Emil Stenström (#17)

    @Joachim: I would say that's design. I could have added that to my example with a background image, but it would be a mess to position :)