Formular mit oder ohne Tabelle?

[Montekar]

Hallo,

ich habe da ein Formular auf meiner Seite, bei dem die Eingabefelder alle schön untereinander sein sollen. Soll ich das ganze mit einer Tabelle lösen (wäre ja das einfachste) oder gibt es auch eine elegante CSS-Lösung?

[Dynamite]

Hi,
handelt es sich um tabellarische Daten?
Wohl eher NEIN.
Es gibt viele Wege dies mit CSS zu lösen.

Mein bevorzugter weg ist es mit einer http://de.selfhtml.org/html/text/listen.htm#definition@title=Definitionsliste zu lösen. Dann hast Du genug Möglichkeiten es mit CSS zu gestalten, und hast trotzdem keine "DIV-Suppe".

Gruß
Dynamite

[Gunnar Bittersmann]

@@Dynamite:

nuqneH

Mein bevorzugter weg ist es mit einer http://de.selfhtml.org/html/text/listen.htm#definition@title=Definitionsliste zu lösen. Dann hast Du genug Möglichkeiten es mit CSS zu gestalten

Nein, hast du nicht, weil das gruppierende Element für zusammengehörende 'dt'/'dd'-Paare fehlt. [http://forum.de.selfhtml.org/archiv/2007/10/t160872/#m1046502]

Qapla'

Gunnar

[Gunnar Bittersmann]

@@Montekar:

nuqneH

ich habe da ein Formular auf meiner Seite, bei dem die Eingabefelder alle schön untereinander sein sollen.

?? Und was ist noch in dem Formular? Labels?

<form action="foo">  
  <p><label for="bar">bar:</label> <input type="text" id="bar"/></p>  
  <p><label for="baz">baz:</label> <input type="text" id="baz"/></p>  
</form>

Die Auszeichnung könnte schon genügen, wenn man die Labels Inline-Blöcke sein lässt (oder sie floaten lässt – float macht aber immer irgendwelchen Ärger) und ihnen feste Breite gibt.

Soll ich das ganze mit einer Tabelle lösen (wäre ja das einfachste)

Bietet sich auch an:

<form action="foo">  
  <table>  
    <tbody>  
      <tr>  
        <th>bar:</th>  
        <td><input type="text" id="bar"/></td>  
      </tr>  
      <tr>  
        <th>baz:</th>  
        <td><input type="text" id="baz"/></td>  
      </tr>  
    </tbody>  
  </table>  
</form>

Qapla'

Gunnar

[EKKi]

Mahlzeit Gunnar Bittersmann,

Bietet sich auch an:

Dann aber auch richtig ...

<tr>
        <th>bar:</th>
        <td><input type="text" id="bar"/></td>
      </tr>

... nämlich eher so:

      <tr>  
        <th><label for="bar">bar:</label></th>  
        <td><input type="text" id="bar"/></td>  
      </tr>

:-)

MfG,
EKKi