Formatierungsproblem mit tabellenartiger Konstruktion

Man soll ja <table /> vermeiden, wenn man keine echte Tabelle von Dingen anzeigen will. Schön und gut, nur gibt es ab und zu Probleme, wenn man ein tabellenartiges Layout mit <div />s nachbauen will. Genau so eins habe ich gerade.

Problem: Ein Formular. Ich will auf der linken Seite rechtsbündig die Label und rechts daneben die Felder haben. Alle Felder sollen den gleichen Abstand zum linken Rand des Elternelements haben. Knifflig: Die Felder sollen bis zum rechten Rand des Elternelements reichen, welches eine variable Breite hat.

Die Frage ist jetzt: Ist das semantisch tabellenartig genug, um als Tabelle durchzugehen (was mir die Arbeit erleichtern würde)? Wenn nicht, wie zum Teufel kriege ich das implementiert?

Ich kann natürlich die Label und Felder jeweils in ein <div /> packen und mit denen arbeiten – allerdings tausche ich damit nur ein Element mit Breitenproblemen gegen ein anderes aus.

Blockelemente füllen nur dann den ganzen verfügbaren Platz, wenn sie nicht gefloatet werden – dann kann man aber keine anderen Blockelemente neben ihnen platzieren. Was ich bräuchte, wäre ein Block- oder Inline-Blockelement, bei dem width: auto dem gesamten Platz entspricht, der nicht vom benachbarten Element genutzt wird.

Daß bei separaten <div />s die Zeilenhöhen der Label und Felder unterschiedlich sind, kommt erschwerend hinzu.

Versuche, das Ganze mit Tricksereien wie width: 100%; margin-left: 6em hinzubiegen, haben auch nicht geklappt.


CSS wäre manchmal doch deutlich einfacher, wenn sie Arithmetik eingebaut hätten. Mit width: 100% - 6em wäre die Sache in fünf Sekunden gegessen...

Eine Lösung, die mir grade einfällt:

Code (html):

 
<div class="myform">
  <label />
  <input />
  <label />
  <input />
</div>

Code (css):

 
.myform {
    position: relative;
}
 
.myform label {
    position: absolute;
    left: 0em;
    width: 6em;
}
 
.myform input {
    position: absolute;
    left: 6em;
    right: 0em;
}

Das position: relative ist wichtig, weil sich position: absolute sonst auf das Fenster bezieht und nicht auf das Elternelement. Nicht getestet, sollte aber tun.

Tut nicht und es ist auch klar, warum: <input /> hat als standardmäßige Breite nicht 100% sondern eine feste Breite. left und right wirken sich nur auf die Positionierung, nicht aber auf die Breite festbreiter Elemente aus.

Dann setz noch ein width: auto dazu.

In meinen Augen zählt genau sowas zu den Dingen, für die man eine Tabelle nutzen darf. Immerhin stellst du doch eigentlich eine Schlüssel => Wert Zuordnung dar, nur dass der Benutzer die Werte eingibt. Würdest du die Werte mit ausgeben würdest du doch auch nicht auf die Idee kommen, das nicht mit einer Tabelle machen zu wollen, oder?

Gut, dann bleibt's bei der momentan verwendeten Tabelle. Ich habe sowieso bessere Dinge zu tun, wie beispielsweise dem Internet Explorer erklären, wie das DOM funktioniert.

(DHTML Web 2.0 wäre viel einfacher, wenn ein gewisser Konzern nicht darauf bestehen würde, die JavaScript-Engine für seinen Browser selbst zu schreiben.)

Frag den HTML-Papst Stefan Muenz:

http://de.selfhtml.org/html/formular...be.htm#tabelle

Gruß
Bernd_das_Brot

Wie er das mit einer Tabelle macht, weiß er. Es geht darum, dass er das vermeiden will. Außerdem ist selfhtml.org schon lange nicht mehr der heilige Gral der HTML-Welt. Vieles was da steht, ist zu Zeiten des Semantic Web absolut veraltet.