tabellarischen Layout mit Formularen

[Gunnar Bittersmann]

@@EKKi:

nuqneH

Validiere Deinen Code! <http://de.selfhtml.org/html/referenz/elemente.htm#tr@title=<tr>> darf als Kindelemente lediglich <th> oder <td> enthalten.

Der Hinweis war hier unnötig; der OP wusste bereits, dass es „aber leider nicht korrekt [ist,] da Formulare an dieser Stelle nicht erlaubt sind“.

Die HTML-Spec sieht diesen (nicht unbedingt seltenen) Usecase nicht vor und erlaubt weder table/form/tr noch table/tr/form. HTML5 bessert daran nichts nach. (Warum überrascht das nicht?)

Das lässt folgende Optionen:

(1) Hier wäre es vielleicht angebracht, auf Validität zu verzichten, denn es „funktioniert gut“.

(Sagte ich eben: auf Validität zu verzichten? Ja, tat ich.)

(2) Ansonsten müsste man auf die Tabelle im Markup verzichten:

<div id="myForms">  
  <form method='POST' action=''>  
    <input name="Wert1" value="10">  
    <input name="Wert2" value="20">  
    <input name="Wert3" value="30">  
    <input name="Wert4" value="40">  
    <input type="submit" name="sic" value="Speichern">  
    <input type="submit" name="del" value="Löschen">  
  </form>  
  <form method='POST' action=''>  
    <input name="Wert1" value="100">  
    <input name="Wert2" value="200">  
    <input name="Wert3" value="300">  
    <input name="Wert4" value="400  
    <input type="submit" name="sic" value="Speichern">  
    <input type="submit" name="del" value="Löschen">  
  </form>  
<div>

und sie ggfs. per Stylesheet erstellen:

#myForms       { display: table }  
#myForms form  { display: table-row }  
#myForms input { display: table-cell }

IrgendEin Browser spielt dabei nicht mit.

Und eine wirkliche Tabelle (mit Zuordnungen der Zellen zu Zeilen und Spalten, mit denen nicht-grafische UAs und Screenreader etwas anfangen könnten) ist das wohl auch nicht.

Und die „Tabellenspalten“-Überschriften müsste man auch noch reinfrickeln. (Sie stünden dann ohne Bezug im Raum.)

Da 'input' ersetzte Inline-Elemente sind, sollten aber auch (falls überhaupt notwendig) Breitenangaben genügen:

input[name^="Wert"] { width: 6em }  
input[name="sic"]   { width: 5em }  
input[name="del"]   { width: 4em }

(3) Oder aber

Du könntest ein Formular um die gesamte Tabelle legen

mit allen damit verbundenen Nachteilen. Und sinnvolles Markup ist das auch nicht.

Qapla'