En lite mer strukturerad form

Jag håller på att sätta upp en sida med ett tipp-form. Det jag undrar hur ni skulle gå tillväga för att strukturera upp formuläret på ett xhtml/css-vänligt sätt.

Ska man använda bara form elements (lables/fieldset/etc.), kompletterat med div/span/p eller är det tables som gäller?

Alla idéer är välkommna, bifogar en skiss på strukturen.

Här skulle jag troligen använda tabeller. Jag har svårt att se en mer semantisk uppmärkning eftersom "label" för dina kryssrutor är kolumnrubriken. Sätter du den med <th> och raderna med <th scope="row">lag ett - lag två</th> så torde också talsyntes funka.

Sedan tror jag att innan webbläsarna stödjer tabell-CSS (vi väntar på MSIE 8) så finns det inget smidigt sätt att skapa denna tabell-struktur med CSS.

Mmm. nej det är nog så desvärre. Jag testade dock och gjorde ett relativt bra xhtml lösning (tror jag :P) med thead/tbody/th/td.

<table summary="...">
  <caption>Grupp A</caption>
  <thead>
    <tr>
      <th scope="col">&nbsp;</th>
      <th scope="col">&nbsp;</th>
      <th scope="col">1</th>
      <th scope="col">X</th>
      <th scope="col">2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="6" scope="row"><h5>Matchresultat</h5>
      <span>(6p / r&auml;tt)</span></th>
      <th scope="row">Schweiz - Tjeckien</th>
      <td><input type="radio" name="radioSet1" value="1" /></td>
      <td><input type="radio" name="radioSet1" value="x" /></td>
      <td><input type="radio" name="radioSet1" value="2" /></td>
    </tr>
    <tr>
      <th scope="row">Portugal - Turkiet</th>
      <td><input type="radio" name="radioSet2" value="1" /></td>
      <td><input type="radio" name="radioSet2" value="x" /></td>
      <td><input type="radio" name="radioSet2" value="2" /></td>
    </tr>
    <tr>
      <th scope="row">Tjeckien - Portugal</th>
      <td><input type="radio" name="radioSet3" value="1" /></td>
      <td><input type="radio" name="radioSet3" value="x" /></td>
      <td><input type="radio" name="radioSet3" value="2" /></td>
    </tr>
    <tr>
      <th scope="row">Schweiz - Turkiet</th>
      <td><input type="radio" name="radioSet4" value="1" /></td>
      <td><input type="radio" name="radioSet4" value="x" /></td>
      <td><input type="radio" name="radioSet4" value="2" /></td>
    </tr>
    <tr>
      <th scope="row">Schweiz - Portugal</th>
      <td><input type="radio" name="radioSet5" value="1" /></td>
      <td><input type="radio" name="radioSet5" value="x" /></td>
      <td><input type="radio" name="radioSet5" value="2" /></td>
    </tr>
    <tr>
      <th scope="row">Turkiet - Tjeckien</th>
      <td><input type="radio" name="radioSet6" value="1" /></td>
      <td><input type="radio" name="radioSet6" value="x" /></td>
      <td><input type="radio" name="radioSet6" value="2" /></td>
    </tr>
	</tbody>
	<tbody>
    <tr>
      <th rowspan="2" scope="row"><h5>Till kvartsfinal</h5><span>Vilka l&auml;nder kommer vidare till kvartsfinal (12p / r&auml;tt)</span></th>
      <td colspan="4" scope="row"><select name="select1"><option value="#">Land 1...</option><option value="FRA">Frankrike</option><option value="GRE">Grekland</option><option value="NED">Holland</option><option value="ITA">Italien</option><option value="CRO">Kroatien</option><option value="POR">Portugal</option><option value="ROU">Rum&auml;nien</option><option value="RUS">Ryssland</option><option value="SUI">Schweiz</option><option value="SPA">Spanien</option><option value="SWE">Sverige</option><option value="CZE">Tjeckien</option><option value="TUR">Turkiet</option><option value="GER">Tyskland</option><option value="AUT">&Ouml;sterrike</option></select></td>
    </tr>
    <tr>
      <td colspan="4" scope="row"><select name="select2"><option value="#">Land 2...</option><option value="#">Land 1...</option><option value="FRA">Frankrike</option><option value="GRE">Grekland</option><option value="NED">Holland</option><option value="ITA">Italien</option><option value="CRO">Kroatien</option><option value="POR">Portugal</option><option value="ROU">Rum&auml;nien</option><option value="RUS">Ryssland</option><option value="SUI">Schweiz</option><option value="SPA">Spanien</option><option value="SWE">Sverige</option><option value="CZE">Tjeckien</option><option value="TUR">Turkiet</option><option value="GER">Tyskland</option><option value="AUT">&Ouml;sterrike</option></select></td>
    </tr>
	</tbody>
</table>