A TABLE exercise

This discussion started with a complaint that a table was too wide to be comfortably displayed in a normal browser window.

(The original for this has now disappeared from its site, sorry.)

In that version of the table, the top contestants' names were listed down the page, and each individual event shown in a vertical column. But there were so many individual events that the table was too wide for a normal browser window.

My first reaction was to interchange columns and rows, putting the names across the page and one row per individual event, producing a result like this (the original showed about two dozen individual events, there are only a few shown here for illustration).

  1 2 3 4 5 6 7 8 9 10
Geri Mewitt Frank Matthews Paul Wallace Byron Brown James Kirkpatrick Richard Heishman Steve Bacon Greg Miller Mark Beck Alan Rigby
Total points 40 15 12 9 8 7 7 6 5 4
3/7 TT x1 10 - - - 8 7 - 6 5 4
5/9 RR x3 30 15 - - - - - - - -
5/10 CR x2 - - 12 - - - 2 - - -
and lots more events like that

However, the widths of the columns are being dominated by the competitors' names, which are of very differing lengths, leading to a visually messy appearance. I had an idea that produced quite a serviceable visual effect, and after discussing it on usenet and got some suggestions to make it even better, here's what we came up with.

  Geri Mewitt
1 Frank Matthews
2 Paul Wallace
3 Byron Brown
4 James Kirkpatrick
5  
Total points 40 15 12 9 8 7 7 6 5 4
3/7 TT x1 10 - - - 8 7 - 6 5 4
5/9 RR x3 30 15 - - - - - - - -
5/10 CR x2 - - 12 - - - 2 - - -
and lots more events like that
    6 7 8 9 10
Richard Heishman
Steve Bacon
Greg Miller
Mark Beck
Alan Rigby

OK, there's two things wrong with this. One is the structural one, that the table markup no longer clearly reflects the structure of the underlying data, so that speaking browsers and robots would have a hard time dealing with it; the relationships are exhibited more by the visual effect than by the actual markup. Two is that there are risks (depending on browser and version, and user preferences settings) involved with colouring table cell backgrounds via BGCOLOR.

However, sometimes one has to compromise, and in this case the replacement seemed to give sufficient visual benefit to be worth the effort: the colour strips help the eye to follow the assignment of names to data columns. If a machine-readable version was wanted, then maybe the first version could be made available separately.

(Well, in the end the author didn't want to use this design, due to the effort required in updating it manually. But if the HTML was to be created by a script, deriving its input from a spreadsheet or database, that problem would solve itself.)