Comments on: Challenge: Marking up the world cup

By: Emil Stenström

Emil Stenström — Fri, 21 Jul 2006 22:24:15 +0000

@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 :)

By: Joachim

Joachim — Fri, 21 Jul 2006 20:53:24 +0000

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

By: Emil Stenström

Emil Stenström — Tue, 18 Jul 2006 23:59:39 +0000

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

By: Haralan Dobrev

Haralan Dobrev — Tue, 18 Jul 2006 19:19:55 +0000

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.

By: Ben Millard

Ben Millard — Mon, 17 Jul 2006 03:49:39 +0000

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 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!)

By: Emil Stenström

Emil Stenström — Sun, 16 Jul 2006 21:00:18 +0000

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.

By: exe

exe — Sat, 15 Jul 2006 08:06:13 +0000

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

By: Emil Stenström

Emil Stenström — Fri, 14 Jul 2006 05:12:57 +0000

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

By: zcorpan

zcorpan — Thu, 13 Jul 2006 23:13:25 +0000

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.

By: exe

exe — Fri, 07 Jul 2006 23:12:10 +0000

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.

By: Emil Stenström

Emil Stenström — Fri, 07 Jul 2006 16:45:28 +0000

exe: keep on working, no one has posted their attempt yet, so I’m still waiting :)

By: exe

exe — Fri, 07 Jul 2006 14:19:05 +0000

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.

By: Emil Stenström

Emil Stenström — Thu, 06 Jul 2006 21:04:27 +0000

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

By: Just-A-Lurker

Just-A-Lurker — Thu, 06 Jul 2006 20:07:54 +0000

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?

By: Jesse Skinner

Jesse Skinner — Wed, 05 Jul 2006 08:00:49 +0000

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.