Block-Elemente in Tabellen semantisch zulässig?

[Schmorchel]

Hi,

hätte da mal eine grundsätzliche Frage:

Sind Block-Elemente wie zum Beispiel <div> innerhalb von <table><tr><td> semantisch korrekt?

(Es handelt sich in dem speziellen Fall um eine Tabelle, die tatsächlich eine Liste darstellt und daher nicht für Layoutzwecke missbraucht wird; - als solche ist die Tabelle zulässig)

Vieles Danke,
Schmorchel

[Gunnar Bittersmann]

@@Schmorchel:

nuqneH

Sind Block-Elemente wie zum Beispiel <div> innerhalb von <table><tr><td> semantisch korrekt?

Du meinst nicht semantisch, sondern syntaktisch.

Warum schaust du nicht einfach in die Specs? [HTML401, HTML5]

<!ELEMENT (TH|TD)  - O (%flow;)* > gibt dir den erlaubten Inhalt %flow; an. Was das bedeutet, ist dort verlinkt.

(Es handelt sich in dem speziellen Fall um eine Tabelle, die tatsächlich eine Liste darstellt

Was denn nun, Tabelle oder Liste?

Qapla'

[Schmorchel]

Entschuldigung... ja, da habe ich wohl zwei Begriffe miteinander vermischt :)
Mir ist der Unterschied zwischen einer Tabelle und einer Liste natürlich klar.

Was diese Verwirrung allerdings deutlich zeigt, ist dass ich mir offensichtlich selbst [noch] nicht im Klaren darüber bin, ob ich die Inhalte als <table> oder <ul> Elemente definieren sollte ...
Im Genaueren handelt es sich um eine Auflistung von Hotelzimmern, wobei die erste Spalte Hotelnamen, Bild und Anschrift, die zweite Spalte Ausstattung und die dritte Spalte Preise wiedergibt.

Wäre hier eine tabellarische Darstellung zulässig? Und wenn ja, dürfte ich innerhalb <table><tr><td>    <div> benutzen? Das kommt mir von syntaktischer Seite nämlich ein wenig abenteuerlich vor...

Danke,
Schmorch

[Klawischnigg]

Hi there,

Im Genaueren handelt es sich um eine Auflistung von Hotelzimmern, wobei die erste Spalte Hotelnamen, Bild und Anschrift, die zweite Spalte Ausstattung und die dritte Spalte Preise wiedergibt.

Wenn Du Spalten hast, dann ist es keine Liste mehr sondern eindeutig eine Tabelle.

Wäre hier eine tabellarische Darstellung zulässig?

"Zulässig" ist der vollkommen falsche Ansatz. Hier hat Dir niemand etwas zu erlauben. Die einzige relevante Frage ist, ob es sinnvoll ist und vor allem rasch umzusetzen. Es gibt keine Schönheitspreise...

Und wenn ja, dürfte ich innerhalb <table><tr><td>    <div> benutzen? Das kommt mir von syntaktischer Seite nämlich ein wenig abenteuerlich vor...

Stell' Dir lieber die Frage, ob und wofür Du ein <div> benötigst, wo Du ein anderes, "passenderes" Element nicht verwenden kannst...

[Matthias Apsel]

Om nah hoo pez nyeetz, Schmorchel!

Im Genaueren handelt es sich um eine Auflistung von Hotelzimmern, wobei die erste Spalte Hotelnamen, Bild und Anschrift, die zweite Spalte Ausstattung und die dritte Spalte Preise wiedergibt.

Wäre hier eine tabellarische Darstellung zulässig? Und wenn ja, dürfte ich innerhalb <table><tr><td>    <div> benutzen? Das kommt mir von syntaktischer Seite nämlich ein wenig abenteuerlich vor...

eine Tabellenzeile darf selbstverständlich Blockelemente enthalten.

<h2>Name</h2>
<img>
<p>Anschrift</p>

<ul>
* Minibar
* TV

<dl>
* Mo-Fr: 100€
* Sa-So: 150€

letzteres als dl

Matthias

[Gunnar Bittersmann]

@@Schmorchel:

nuqneH

dürfte ich innerhalb <table><tr><td>    <div> benutzen?

Warum fragst du? Das wurde doch schon geklärt.

Qapla'

[Schmorchel]

Stimmt. WIEDER mein Fehler. Nur kamen die Antworten einfach zu schnell und so hab ich sie übersehen! :)

Vielen Dank!

[dave]

Hi,

Sind Block-Elemente wie zum Beispiel <div> innerhalb von <table><tr><td> semantisch korrekt?

Ein div-Element hat keine semantische Bedeutung. Prinzipiell spricht nichts dagegen ein Block-Element in ein td zu packen, mir fällt allerdings kein semantischer Grund dazu ein.

(Es handelt sich in dem speziellen Fall um eine Tabelle, die tatsächlich eine Liste darstellt und daher nicht für Layoutzwecke missbraucht wird; - als solche ist die Tabelle zulässig)

Eine Liste wäre entweder ul oder ol, aber nicht table.

Wenn du Fragen zur Semantik hast ist es immer sehr schwer eine konkrete Antwort zu geben ohne die tatsächlichen Daten zu kennen.

~dave

[Matthias Apsel]

Om nah hoo pez nyeetz, dave!

Eine Liste wäre entweder ul oder ol, aber nicht table.

oder dl SCNR

Matthias

[ChrisB]

Hi,

Prinzipiell spricht nichts dagegen ein Block-Element in ein td zu packen, mir fällt allerdings kein semantischer Grund dazu ein.

Aber ein pragmatischer: Will man eine Tabellenzelle als Ausgangspunkt absoluter Positionierung dienen lassen, kommt man kaum darum herum, ein weiteres Element hinein zu schachteln, denn das Ergebnis von position:relative auf TD-Elementen ist per Spec undefiniert.

MfG ChrisB

[dave]

Hi,

Aber ein pragmatischer: Will man eine Tabellenzelle als Ausgangspunkt absoluter Positionierung dienen lassen, kommt man kaum darum herum, ein weiteres Element hinein zu schachteln, denn das Ergebnis von position:relative auf TD-Elementen ist per Spec undefiniert.

Auf diese Problematik bin ich auch schonmal gestoßen. Weißt du ob es dafür eigentlich einen Grund gibt?

Allerdings hat das nichts mit der Semantik zu tun, oder?

~dave

[dave]

-.-

Allerdings hat das nichts mit der Semantik zu tun, oder?

Deshalb schreibst du auch von einem pragmatischem …
lesen -> denken -> posten

~dave

[Daniel.S]

Grüße dich, ChrisB,

Aber ein pragmatischer: Will man eine Tabellenzelle als Ausgangspunkt absoluter Positionierung dienen lassen, kommt man kaum darum herum, ein weiteres Element hinein zu schachteln, denn das Ergebnis von position:relative auf TD-Elementen ist per Spec undefiniert.

Das bezieht sich nur auf die relative Verschiebung, nicht auf die Eigenschaft der Tabellenzelle als containing block.

Bisher konnte man dieses Feature nur nicht nutzen, weil der Firefox es nicht unterstützte. Was aber seit Version 10 endlich Geschichte ist :)

Gruß, Daniel

[ChrisB]

Hi,

Will man eine Tabellenzelle als Ausgangspunkt absoluter Positionierung dienen lassen, kommt man kaum darum herum, ein weiteres Element hinein zu schachteln, denn das Ergebnis von position:relative auf TD-Elementen ist per Spec undefiniert.

Das bezieht sich nur auf die relative Verschiebung, nicht auf die Eigenschaft der Tabellenzelle als containing block.

Mit CSS 2.1 noch nicht.
Erst CSS Positioned Layout Module Level 3 (Draft) definiert, wie sich relative Positionierung auf Tabellenelemente im speziellen auswirkt.

Bisher konnte man dieses Feature nur nicht nutzen, weil der Firefox es nicht unterstützte. Was aber seit Version 10 endlich Geschichte ist :)

Wie das aktuell in den verbreiteten Browsern aussieht, weiß ich nicht auswendig und habe auch gerade keine Möglichkeit, es zu testen.

MfG ChrisB

[Daniel.S]

Hi,

Das bezieht sich nur auf die relative Verschiebung, nicht auf die Eigenschaft der Tabellenzelle als containing block.

Mit CSS 2.1 noch nicht.
Erst CSS Positioned Layout Module Level 3 (Draft) definiert, wie sich relative Positionierung auf Tabellenelemente im speziellen auswirkt.

Kannst du mir den genauen Abschnitt nennen? CSS Positioned Layout Module Level 3 sagt nämlich über die Eigenschaft einer Tabellenzelle als containing block auch nicht mehr als CSS 2.1;

Die Verschiebung einer Tabellenzelle wird geklärt, aber darum ging es mir ja nicht ;)

Wie das aktuell in den verbreiteten Browsern aussieht, weiß ich nicht auswendig und habe auch gerade keine Möglichkeit, es zu testen.

Wie es bei der Verschiebung aussieht, weis ich auch nicht, außer, dass es im Firefox nicht funktioniert. Ansonsten wird table-cell als containing block von allen aktuellen Browsern unterstützt.

Gruß, Daniel

[ChrisB]

Hi,

Mit CSS 2.1 noch nicht.
Erst CSS Positioned Layout Module Level 3 (Draft) definiert, wie sich relative Positionierung auf Tabellenelemente im speziellen auswirkt.

Kannst du mir den genauen Abschnitt nennen? CSS Positioned Layout Module Level 3 sagt nämlich über die Eigenschaft einer Tabellenzelle als containing block auch nicht mehr als CSS 2.1;

CSS 3 PLML 3 sagt nur ganz generell,

"A relatively positioned box establishes a new containing block for absolutely positioned descendants. (This is a common use of relatively positioned boxes.) The section on containing blocks explains when a relatively positioned box establishes a new containing block."

Da finde ich keine weitere Einschränkung in Bezug auf table-cell-Elemente.
Auch CSS basic box model hält beim Überfliegen keine weitere Einschränkung in bezug auf die fragliche Kombination bereit.

Die Verschiebung einer Tabellenzelle wird geklärt, aber darum ging es mir ja nicht ;)

CSS 2.1 hat die Auswirkung von position:relative auf diverse table-...-Elemente einfach als "undefined" spezifiziert, das schloß nach meinem Verständnis (und in der praktischen Umsetzung in einigen Browsern in der Vergangenheit IIRC) auch die Etablierung eines containing block mit ein.

Wie das aktuell in den verbreiteten Browsern aussieht, weiß ich nicht auswendig und habe auch gerade keine Möglichkeit, es zu testen.

Wie es bei der Verschiebung aussieht, weis ich auch nicht, außer, dass es im Firefox nicht funktioniert. Ansonsten wird table-cell als containing block von allen aktuellen Browsern unterstützt.

Das ist schon mal gut zu wissen, werde ich mir merken. (Und bei Gelegenheit auch noch mal etwas gründlicher Durchtesten.)

Dann fehlt ja eigentlich nur noch, dass Microsoft dem IE 10 auch noch mal beibringt, absolute Positionierung von Tabellenzellen so zu handeln wie alle anderen großen Browser ...

MfG ChrisB

[Daniel.S]

Hi,

CSS 2.1 hat die Auswirkung von position:relative auf diverse table-...-Elemente einfach als "undefined" spezifiziert, das schloß nach meinem Verständnis (und in der praktischen Umsetzung in einigen Browsern in der Vergangenheit IIRC) auch die Etablierung eines containing block mit ein.

Ist auch eine sinnvolle Interpretation.

Dann fehlt ja eigentlich nur noch, dass Microsoft dem IE 10 auch noch mal beibringt, absolute Positionierung von Tabellenzellen so zu handeln wie alle anderen großen Browser ...

Bei einem Schnelltest mit positionierter Zelle konnte ich jetzt keinen Unterschied feststellen. Welches Problem existiert da im IE10?

Gruß, Daniel

[ChrisB]

Hi,

Dann fehlt ja eigentlich nur noch, dass Microsoft dem IE 10 auch noch mal beibringt, absolute Positionierung von Tabellenzellen so zu handeln wie alle anderen großen Browser ...

Bei einem Schnelltest mit positionierter Zelle konnte ich jetzt keinen Unterschied feststellen. Welches Problem existiert da im IE10?

Ist schon etwas länger her, das ich damit experimentiert hatte; ggf. hat die aktuelle Preview schon Fortschritte gemacht.

Mein Ziel war es, Daten als Tabelle auszuzeichnen, aber dann so zu formatieren, dass die erste Zelle quasi eine eigene hervorgehobene "Zeile" über den anderen, die weniger wichtige Infos enthielten, bildet.

-----------------------

TD #1 ...
TD #2
-----------------------

Und das ganze dann natürlich mehrfach untereinander in allen TR-Elementen.

Über absolute Positionierung der ersten TD am TR-Element und auf-Abstand-halten der nachfolgenden TDs über ein entsprechendes margin-top war mir das auch in Firefox, Webkits und Opera gelungen ... nur die IE 10-Preview wollte da nicht mitspielen.

MfG ChrisB

[Daniel.S]

Hi,

Ist schon etwas länger her, das ich damit experimentiert hatte; ggf. hat die aktuelle Preview schon Fortschritte gemacht.

Aktuelle Previews kann ich leider nicht testen, da die aktuellen nur als Alpha innerhalb einer Beta getestet werden können ...

Über absolute Positionierung der ersten TD am TR-Element und auf-Abstand-halten der nachfolgenden TDs über ein entsprechendes margin-top war mir das auch in Firefox, Webkits und Opera gelungen ... nur die IE 10-Preview wollte da nicht mitspielen.

Verstanden. Allerdings frage ich mich, wie du das geschafft hast. tr scheint außer im IE weder in Firefox 11 noch in Chrome 17 als containing block fungieren zu können. Lediglich Opera 11.6 stellt das ganze korrekt dar.

Ernüchterung: Interoperabel bei <table> aber noch nicht bei Kindelementen davon.

Gruß, Daniel

[Alex]

Hi!

Das bezieht sich nur auf die relative Verschiebung, nicht auf die Eigenschaft der Tabellenzelle als containing block.

Bisher konnte man dieses Feature nur nicht nutzen, weil der Firefox es nicht unterstützte. Was aber seit Version 10 endlich Geschichte ist :)

Ich hab's gerade getestet und komme zu dem Schluss, dass Fx das immer noch nicht unterstützt. Ich habe es in Version 10 probiert, dann updated und in 11 probiert. In beiden Fällen hat sich das absolut positionierte :after-Pseudoelement am Viewport ausgerichtet, nicht an der td.

Fehler im Quelltext ist sehr unwahrscheinlich, denn in Opera, Chrome, Safari und IE klappt es einwandfrei.

Also immer noch nicht nutzbar. :(

Viele Grüße,
Alexander

[Daniel.S]

Hi,

Ich hab's gerade getestet und komme zu dem Schluss, dass Fx das immer noch nicht unterstützt. Ich habe es in Version 10 probiert, dann updated und in 11 probiert. In beiden Fällen hat sich das absolut positionierte :after-Pseudoelement am Viewport ausgerichtet, nicht an der td.

Ich glaub gelesen zu haben, dass Pseudoelemente in Version 10 noch nicht funktionierten. Ich kann mich aber auch irren. Folgendes funktioniert in Version 11 einwandfrei:

<!DOCTYPE html>  
<html>  
  <head>  
    <meta charset="utf-8">  
    <title>table-Elemente als containing block</title>  
    <style>  
    table { border: 1px solid green; position: relative; border-spacing: 1em; }  
    tr:last-child::after { content:'4'; position: absolute; right: 0; bottom: 0; }  
    </style>  
  </head>  
  <body>  
    <table>  
     <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>  
     <tr><td>1</td><td>2</td><td>3</td></tr>  
    </table>  
  </body>  
</html>

Gruß, Daniel

[Alex]

Hi!

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>table-Elemente als containing block</title>
    <style>
    table { border: 1px solid green; position: relative; border-spacing: 1em; }
    tr:last-child::after { content:'4'; position: absolute; right: 0; bottom: 0; }
    </style>
  </head>
  <body>
    <table>
     <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
     <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>
  </body>
</html>

  
Ja, sowas habe ich auch schonmal benutzt. Aber hier ist ja die Tabelle relativ positioniert - im Threadverlauf war von Tabellen\_zellen\_ die Rede. Und den Inhalt einer Zelle in der Zelle positionieren zu können wäre mir persönlich auch wichtiger - das könnte ich einfach häufiger gebrauchen.  
  
Viele Grüße,  
Alexander