Menu
Community /Pin to ProfileBookmark
@NogDogDec 29.2004 — #I have no problem with considering it tabular data and using a table, but you could do it as a list, too:
@NogDogDec 29.2004 — #
It was an interesting exercise trying to make it work with a <ul> list, though. ? Personally, I'd opt for the table solution.
Meaningfully marking up a tree-like knock-out diagram structure?
Ok. I’m starting the design phase of a tournament knock-out diagram page and for the life of me, I can’t think of a way to mark it up which would properly convey the data with its proper meaning and structure. Y’know, like starting with 16 people, 8 are kocked out and 8 go foward, then 4 are knocked out and 4 go foward and so on like the play-offs in the NHL.
Div’s would be pointless because they convey no meaning, lists (I suppose ) are half way there, but can’t convey that one thing is the child/result of two other elements ( you can have it the opposite way round, but that’s no good to me ) and as far as I can see, using anything else… is just plain wrong.
Any ideas folks?
Sign in
to post a comment7 Comments(s) ↴
0
@NogDogDec 29.2004 — #I have no problem with considering it tabular data and using a table, but you could do it as a list, too:[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Tournament</title>
<style type="text/css">
li {
list-style-type: none;
width: 5em;
line-height: 1em;
text-decoration: underline;
}
.r2,.r3,.r4 {
position: relative;
}
.r2 {
top: -1.5em;
left: 4em;
}
.r3 {
top: -3em;
left: 4em;
}
.r4 {
top: -4.5em;
left: 4em;
}
table {
border-collapse: collapse;
border: solid thin black;
}
td,th {
width: 6em;
border: solid thin black;
padding: 3px;
vertical-align: middle;
}
</style>
</head>
<body>
<h1>8 Team Tournament</h1>
<h2>List Style</h2>
<ul>
<li>Team 1</li>
<li>Team 8
<ul>
<li class=r2>1 / 8</li>
</ul>
</li>
<li>Team 4</li>
<li>Team 5
<ul>
<li class=r2>4 / 5
<ul>
<li class=r3>1 / 4 / 5 / 8</li>
</ul>
</li>
</ul>
</li>
<li>Team 2</li>
<li>Team 7
<ul>
<li class=r2>2 / 7</li>
</ul>
</li>
<li>Team 3</li>
<li>Team 6
<ul>
<li class=r2>3 / 6
<ul>
<li class=r3>2 / 3 / 6 / 7
<ul>
<li class=r4>WINNER</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2>Table Style</h2>
<table>
<tr><th>Round 1</th><th>Round 2</th><th>Round 3</th><th>Winner</th></tr>
<tr><td>Team 1</td><td rowspan=2>1 / 8</td><td rowspan=4>1/4/5/8</td><td rowspan=8>Winner</td></tr>
<tr><td>Team 8</td></tr>
<tr><td>Team 4</td><td rowspan=2>4 / 5</td></tr>
<tr><td>Team 5</td></tr>
<tr><td>Team 2</td><td rowspan=2>2 / 7</td><td rowspan=4>2/3/6/7</td></tr>
<tr><td>Team 7</td></tr>
<tr><td>Team 3</td><td rowspan=2>3 / 6</td></tr>
<tr><td>Team 6</td></tr>
</table>
</body>
</html>
[/code]0
@NogDogDec 29.2004 — #[i]Originally posted by MstrBob [/i]
[B]If you're going to go with HTML, which probably makes the most sense considering the browsers currently in use, I think NogDog's table would make the most logical sense, and probably better represents the relationships than the list does, methinks. [/B][/QUOTE]
It was an interesting exercise trying to make it work with a <ul> list, though. ? Personally, I'd opt for the table solution.