<label> funktioniert nicht über Tabellenelemente hinweg

[mk]

Hallo,

folgende Frage zum <label>-Tag:

Folgender Code funktioniert wie erwartet:

<table>
	<tr>
		<th><label for = "vorname">Vorname</label></th>
		<td><input type = 'text' id = 'vorname' name = 'vorname' placeholder = 'Ihr Vorname'></td>
	</tr>
</table>

Eigentlich würde ich aber die ganze Tabellenzeile mittels Label markieren, in etwas so:

<table>
	<label for = "vorname">
	<tr>
		<th>  Vorname</th>
		<td><input type = 'text' id = 'vorname' name = 'vorname' placeholder = 'Ihr Vorname'></td>
	</tr>
	</label>
</table>

Leider klappt der zweite Codeschnipsel nicht (zumindest nicht im IE). <label> scheint nicht über Tabellenelemente hinweg zu funktionieren. In der Spezifikation ( http://www.w3.org/TR/html5/forms.html#the-label-element ) finde ich hierüber aber keinen Hinweis.

Hat jemand eine Idee, wie ich eine ganze Tabellenreihe labeln kann?

[1unitedpower]

Leider klappt der zweite Codeschnipsel nicht (zumindest nicht im IE). <label> scheint nicht über Tabellenelemente hinweg zu funktionieren.

Das ist richtig, denn Tabellen haben eine ziemlich restriktive Struktur, in der man nicht beliebige Elemente verschachteln darf.

Du kannst allerdings mehrere <label>-Elemente für das selbe Eingabefeld vergeben, in deinem Fall könntest du also in jeder Tabellenzelle ein <label>-Element unterbringen. Du solltest aber vorab noch klären, ob es sinnergiebig ist, ein Eingabefeld mit mehreren Beschriftungen zu versehen. Ich kann mir momentan keinen Fall vorstellen, in dem das der Fall wäre.

[Matthias Apsel]

Hallo mk,

folgende Frage zum <label>-Tag:

Element, nicht Tag.

Leider klappt der zweite Codeschnipsel nicht (zumindest nicht im IE). <label> scheint nicht über Tabellenelemente hinweg zu funktionieren. In der Spezifikation finde ich hierüber aber keinen Hinweis.

label ist als Kind von table nicht erlaubt.

Hat jemand eine Idee, wie ich eine ganze Tabellenreihe labeln kann?

Verzichte auf die Tabelle; Es handelt sich in den Augen vieler nicht um tabellarische Daten. Du kannst einfach den Code

<label ...><input ... ></label> oder <label for="...">...</label><input ...>

verwenden und die Darstellung mit CSS an deine Bedürfnisse anpassen.

Bis demnächst
Matthias

[Der Martin]

Hi,

Eigentlich würde ich aber die ganze Tabellenzeile mittels Label markieren

wenn es nur um die Beschriftung der Tabellenzeile geht, wäre ein th-Element für die erste Zelle geeignet, dort hinein darf dann auch wieder ein label-Element.

<table>
	<label for = "vorname">
	<tr>
		<th>  Vorname</th>
		<td><input type = 'text' id = 'vorname' name = 'vorname' placeholder = 'Ihr Vorname'></td>
	</tr>
	</label>
</table>

Das ist ungültiges HTML, denn table darf als Kinder nur tr, tbody, thead oder tfoot haben; label kann also nicht Kind von table sein. Darüber hinaus darf tr auch nicht Kind von label sein, sondern nur von table. Es ist also der Fehlerkorrektur des Browsers überlassen, was er aus dieser fehlerhaften Struktur macht.

Leider klappt der zweite Codeschnipsel nicht (zumindest nicht im IE). <label> scheint nicht über Tabellenelemente hinweg zu funktionieren.

Doch, label in einer Zelle und das damit verknüpfte Formularelement in einer anderen Zelle ist möglich und erlaubt. Aber das Intgerieren von Nicht-Tabellenelementen in die table-tr-th-Schachtelung geht nicht.

Hat jemand eine Idee, wie ich eine ganze Tabellenreihe labeln kann?

So, dass die ganze Zeile klick-sensitiv ist? Vermutlich gar nicht.

So long,
 Martin

[mk]

Besten Dank an 1unitedpower, Matthias und Der Martin.

Der Hinweis, dass <Label>-Element als Kind des <table>-Elements nicht erlaubt ist, lässt mich nachvollziehen, dass tatsächlich ein Fehler vorliegt.

Noch eine Anmerkung meinerseits: Manchmal kann es trotzdem sinnvoll sein, nichttabellarische Daten in Tabellen zu schreiben. Macht die Sache oft einfacher als eine Formatierung über CSS. Aber ich möchte jetzt keine Grundsatzdiskussion beginnen.

mk

[Gunnar Bittersmann]

@@mk

Noch eine Anmerkung meinerseits: Manchmal kann es trotzdem sinnvoll sein, nichttabellarische Daten in Tabellen zu schreiben. Macht die Sache oft einfacher als eine Formatierung über CSS. Aber ich möchte jetzt keine Grundsatzdiskussion beginnen.

Gut. Denn das ist grundsätzlich falsch.

Browser haben für Tabellen eigene Layoutalgorithmen, die fürs Layouten einer Seite eher hinderlich als förderlich sind. Und einem responsive design steht das Denken in einem Tabellengrid auch im Wege.

Wer Tabellenlayout einfacher findet als CSS, hat nicht genügend CSS-Kenntnisse/-Fähigkeiten. Aber das ist nichts, was man nicht erlernen könnte.

Und wenn man schon Layouttabellen einsetzt, dann unbedingt daran denken, <table role="presentation"> einzusetzen, damit Nutzern assistiver Technologien (Screenreader) keine tabellarische Daten vorgegaukelt werden.

LLAP

PS: Die Zuordnung von Labeln zu Eingabefeldern kann man durchaus als tabellarische Daten ansehen, sodass <table> in diesem Fall gar nicht mal verkehrt ist.

[Tabellenkalk]

Hallo,

PS: Die Zuordnung von Labeln zu Eingabefeldern kann man durchaus als tabellarische Daten ansehen, sodass <table> in diesem Fall gar nicht mal verkehrt ist.

In einem Leitfaden, in dem aufgezeigt werden soll, wie ist welches Eingabefeld zu belabeln, ja, dort kann man das durchaus tabellarisch darstellen.

Gruß
Kalk

[Matthias Apsel]

Hallo Gunnar Bittersmann,

PS: Die Zuordnung von Labeln zu Eingabefeldern kann man durchaus als tabellarische Daten ansehen, sodass <table> in diesem Fall gar nicht mal verkehrt ist.

Vor gar nicht allzulanger Zeit hast du dich in einem mMn identischen Fall gegen eine Tabelle ausgesprochen. Auch dort könnte die Tabelle neben der Anzeige der Daten auch deren Änderung ermöglichen. Ich sehe nicht, warum

<th>Name</th><td>Mustermann</td>

durch eine dl ersetzt werden soll,

<th><label>Name</label></th><td><input value="Mustermann"></td>

hingegen nicht.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Der Martin

table darf als Kinder nur tr, tbody, thead oder tfoot haben

Nicht so schnell, junger Freund! Nicht nur die.

Du hast caption und colgroup vergessen. (col darf nicht mehr Kind von table sein.)

Außerdem dürfen auch script und template vorkommen. [HTML 5.1]

LLAP

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Außerdem dürfen auch script und template vorkommen. [HTML 5.1]

oder, mein Freund, oder.

• Hinweise zur Ergreifung des Flüchtigen bitte an Radio Berlin und an jede Polizeidienststelle
• Zu Risiken und Nebenwirkungen fragen Sie Ihren Arzt und Apotheker

Bis demnächst
Matthias

[Der Martin]

Hallo,

table darf als Kinder nur tr, tbody, thead oder tfoot haben

Nicht so schnell, junger Freund! Nicht nur die.

Du hast caption und colgroup vergessen.

ja, die habe ich tatsächlich vergessen.

(col darf nicht mehr Kind von table sein.)

Durfte es das je? Ich dachte, col sei nur als Kind von colgroup erlaubt. Aber Denken ist bekanntlich Glückssache; immerhin gehörten colgroup und col nie zu meinem aktiven Wortschatz.

Außerdem dürfen auch script und template vorkommen. [HTML 5.1]

Oh ... script als Kind von table ist neu. Das wurde aber auch früher schon ab und zu gemacht und von den Browsern erfahrungsgemäß auch schmerzfrei toleriert. Aber template ist mir bislang völlig unbekannt.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin

(col darf nicht mehr Kind von table sein.)

Durfte es das je? Ich dachte, col sei nur als Kind von colgroup erlaubt.

Genauso wie in XHMTL 1.x tr Kind von table sein durfte, also nicht in tbody geschachtelt werden musste, durfte auch col Kind von table sein, musste also nicht in colgroup geschachtelt werden. [XHTML 1.0]

<!ELEMENT table
     (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

In HTML 4.01 durfte col auch Kind von table sein (allerdings war tr nie Kind von table; die Tags von tbody waren optional). [HTML 4.01]

<!ELEMENT TABLE - -
     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>

Aus der verquassten Prosa von HTML5 werde ich nicht so recht schlau. Scheinbar scheint tr als Kind von table erlaubt zu sein; allerdings sind auch die Tags von tbody optional. Und das aus dem HTML <table><tr><td/></tr></table> generierte DOM enthält tbody zwischen table und tr.

Aber auch das Markup <table><col/></table> ist weiterhin erlaubt, denn die Tags von colgroup sind optional. Allerdings ist col nicht Kind von table; das DOM hat colgroup dazwischen.

LLAP