Jag gissar att du är ute efter en layout i stil med
Förnamn: |input-fält|
Efternamn: |input-fält|
E-post: |input-fält|
På "a list apart" finns det en artikel som heter "Practical CSS Layout Tips, Tricks & Techniques":
http://www.alistapart.com/articles/practicalcss/
Under avsnittet "FORM(s) and Function" visar de hur man kan få något liknande ovan nämnda uppställning (fast med högerjusterade namn på fälten) utan att använda en tabell.
Deras kod ser ut så här:
<form action="">
<div class="row"><span class="label">Name:</span>
<span class="formw"><input size="25" type="text"></span></div>
<div class="row"><span class="label">Age:</span>
<span class="formw"><input size="25" type="text"></span></div>
<div class="row"><span class="label">Shoe size:</span>
<span class="formw"><input size="25" type="text"></span></div>
<div class="row"><span class="label">Comments:</span>
<span class="formw"><textarea cols="25" rows="8">Go ahead - write something...</textarea></span></div>
<div class="spacer"> </div>
</form>
Det finns en del att klaga på deras kod:
1. Det ska inte behövas något "spacer"-element (sista div-elementet). Genom att stoppa in ett sådant frångår man från principen att skilja innehåll från layout.
2. De använder <span class="label"> för att märka upp namnet på fältet, men det finns ett alldeles utmärkt label-element för det, som dessutom har lite funktionalitet eftersom man kan binda det till ett input-fält.
3. De skriver <span class="formw"><input size="25" type="text"></span>, men input-elementet är ett inline-element och behöver inte ha något container-element av det slaget.
<input size="25" type="text" class="formw"> räcker gott och väl.
4. Det avgörande för att man inte ska behöva skämmas för att använda en tabell i ditt fall är när de skriver
<div class="row">
De märker alltså tydligt upp ett div-element till en "rad", där label och input-element sedan är celler, även om de inte skriver det någonstans.
Att använda andra element än table-element för att skriva en tabell är helt fel, anser jag.
Men om man inte bryr sig om deras kod kan man titta på följande:
<style type="text/css">
form p { width: 300px; margin: 0.3em; clear: both; }
form label { float: left; }
form input { float: right; }
</style>
...
<form>
<p><label for="namn">Namn:</label>
<input size="25" type="text" id="namn" /></p>
<p><label for="efternamn">Efternamn:</label>
<input size="25" type="text" id="efternamn" /></p>
<p><label for="epost">E-post:</label>
<input size="25" type="text" id="epost" /></p>
</form>
Nu talar jag inte på något sätt i HTML-koden om hur jag vill att layouten ska vara - det lämnar jag helt och hållet till CSS-koden.