---
title: "En lite mer strukturerad form"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/169887-en-lite-mer-strukturerad-form"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "jahadesign"
published: "2008-03-13T16:56:29.000Z"
updated: "2008-03-13T18:34:25.000Z"
replies: 2
views: 413
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/169887-en-lite-mer-strukturerad-form"
---

# En lite mer strukturerad form

## #1 — jahadesign, 2008-03-13T16:56Z

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.

Bilagor:

- [bet.png](https://www.webforum.nu/a/17395.png)

Permalänk: https://www.webforum.nu/p/169887

## #2 — itpastorn, 2008-03-13T17:29Z

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.

Permalänk: https://www.webforum.nu/p/2087985

## #3 — jahadesign, 2008-03-13T18:34Z

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>
```

Permalänk: https://www.webforum.nu/p/2088001

---

Tråden på webben: https://www.webforum.nu/amne/html-css/169887-en-lite-mer-strukturerad-form