---
title: "Skapa snygga formulär med CSS istället för TABLE?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/187120-skapa-snygga-formulär-med-css-istället-för-table"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "erciz"
published: "2011-06-10T12:08:57.000Z"
updated: "2011-06-10T17:39:43.000Z"
replies: 9
views: 1924
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/187120-skapa-snygga-formulär-med-css-istället-för-table"
---
# Skapa snygga formulär med CSS istället för TABLE?
## #1 — erciz, 2011-06-10T12:08Z
Jag vill ha ett formulär med texten (högerjusterad) framför textfältet. Men samtidigt så vill jag att alla textfält ska ligga i en rak kolumn. Det enklaste att få till detta är genom att använda en HTML TABLE. Men man ska ju helst inte använda tabeller för layout. Men går detta verkligen att lösa med CSS?
Här är min tabellbaserade layout:
```
```
Permalänk: https://www.webforum.nu/p/187120
## #2 — Danne V, 2011-06-10T12:37Z
osv.
Permalänk: https://www.webforum.nu/p/2279854
## #3 — jawbreaker, 2011-06-10T14:42Z
```
Formulär
```
Permalänk: https://www.webforum.nu/p/2279857
## #4 — erciz, 2011-06-10T15:31Z
> **[jawbreaker skrev:](https://www.webforum.nu/p/1536013)**
>
> HTML-kod
Tack, den verkar funka helt okej. Nackdelen är ju att man måste sätta en fast bredd för texten. Men det går nog inte att lösa helt i CSS.
Permalänk: https://www.webforum.nu/p/2279858
## #5 — erciz, 2011-06-10T15:34Z
> **[Danne V skrev:](https://www.webforum.nu/p/1536010)**
>
>
>
> osv.
Nja, t.ex. den första innebär att man måste ta en kolumn i taget, då blir HTML-koden ganska ologisk framförallt om man kollar utan CSS. Sen bygger den på att texten och formulärfälten har samma höj men så är sällan fallet i fomulär och man använder t.ex. textarea eller liknande komponenter.
Permalänk: https://www.webforum.nu/p/2279859
## #6 — Quid, 2011-06-10T15:35Z
> **[erciz skrev:](https://www.webforum.nu/p/1536015)**
>
> Nackdelen är ju att man måste sätta en fast bredd för texten. Men det går nog inte att lösa helt i CSS.
Eller så tar du bort "width: 100px;" så är det ingen fast bredd längre...
Permalänk: https://www.webforum.nu/p/2279860
## #7 — erciz, 2011-06-10T15:47Z
> **[Quid skrev:](https://www.webforum.nu/p/1536017)**
>
> Eller så tar du bort "width: 100px;" så är det ingen fast bredd längre...
Men då blir det pannkaka, eftersom alla textfälten hamnar huller om buller eftersom texterna är olika långa.
Alternativet är väl att placera texterna ovanför formulärfälten.
Permalänk: https://www.webforum.nu/p/2279861
## #8 — Quid, 2011-06-10T16:25Z
> **[erciz skrev:](https://www.webforum.nu/p/1536018)**
>
> Men då blir det pannkaka, eftersom alla textfälten hamnar huller om buller eftersom texterna är olika långa.
Sätt en bredd dom matchar det längsta då?
Permalänk: https://www.webforum.nu/p/2279864
## #9 — jawbreaker, 2011-06-10T17:09Z
Precis som Quid skriver får du i så fall sätta en bredd som matchar den längsta texten. Kan vara knepigt när man har flerspråkiga formulär och liknande, men är det bara på svenska så kan du ju testa dig fram lite.
Det \_går\_ att skapa "css-tabeller" i modernare webbläsare (Firefox, Chrome, Opera, IE8+) också. Du kan använda samma kod som ovan i princip, men får förmodligen lägga till en span runt input-taggarna. I så fall kan du göra typ:
```
form {
display: table;
}
form > div {
display: table-row;
}
form > div > label,
form > div > span {
display: table-cell;
}
form > div > label {
text-align: right;
}
```
Med reservation för att detta är otestat + att jag dricker öl i skrivande stund :)
Permalänk: https://www.webforum.nu/p/2279865
## #10 — erciz, 2011-06-10T17:39Z
> **[jawbreaker skrev:](https://www.webforum.nu/p/1536023)**
>
> Det \_går\_ att skapa "css-tabeller" i modernare webbläsare (Firefox, Chrome, Opera, IE8+) också. Du kan använda samma kod som ovan i princip, men får förmodligen lägga till en span runt input-taggarna.
>
> Med reservation för att detta är otestat + att jag dricker öl i skrivande stund :)
Wow, tackar! Det fungerar utmärkt.
Permalänk: https://www.webforum.nu/p/2279866
---
Tråden på webben: https://www.webforum.nu/amne/html-css/187120-skapa-snygga-formulär-med-css-istället-för-table