How to markup a ladder/draw

Question

I need to markup a ladder for upcoming tournaments, and I can't find any way to mark it up semantically. The only way I've seen so far is to mark it up as a table, and I'd like to avoid that at all costs.

Any ideas?

Why avoid using a table? It is tabular data. Semantically, a table would be the best choice. — Matthew Schinckel, Dec 16 '09 at 02:06
Just coz it looks basically like a table it doesn't mean it's tabular data. The horizontal relationships are a bit trickier than just table rows, and I think a list of matches is a more accurate way to think of the matches than as a column of data in a table. Though maybe a combination of tables and lists woudl be best — wheresrhys, Dec 16 '09 at 11:14

score 1 · Answer 1 · answered Dec 16 '09 at 02:02

1

I've found one example at Accessible NCAA Tournament Bracket which uses a mix of ul/li to achieve it. It's far from perfect (it could uses li + li instead of the "top/bottom" classes, but it's a start.

answered Dec 16 '09 at 02:02

fserb

3,443
2
23
22

What exactly do you mean by '`li + li` instead of the "top/bottom" classes'? The list does use `li` tags for that. Great example though, thanks! – Ryan McCue Dec 16 '09 at 02:24
I meant you could have css rules for `li` with `li` sibling to separate the first li from the second, instead of having to mark them `
` as they do on the example.

fserb

Dec 16 '09 at 13:35

score 0 · Answer 2 · answered Dec 16 '09 at 11:11

I'd do it like this, although would also maybe add title attributes to the list items also in order to make the horizontal relationship more accessible

eg <li class="gameThree" title="winner of round One game 2 vs winner of round one game 5">

<ol id="tournamentLadder">
<li id="roundOne">
<ul class="matches">
    <li class="gameOne>
        <ol class="teams">
            <li class="home">Teamname1</li>
            <li class="visitors">Teamname2</li>  
        </ol> 
    </li>
</ul>

</li>
<li id="roundTwo">

</li>


<li id=final">
</li>

</ol>

I disagree with using a `ul` for `.matches`, as it should be ordered. Thanks though! — Ryan McCue, Dec 17 '09 at 12:28

How to markup a ladder/draw

2 Answers2