Ist ein DIV in einem TD eine schlechte Idee?

143

Es scheint, als hätte ich irgendwo gehört / gelesen, dass ein <div>Inneres von a <td>ein Nein-Nein war. Nicht, dass es nicht funktionieren würde, nur etwas daran, dass sie aufgrund ihres Anzeigetyps nicht wirklich kompatibel sind. Ich kann keine Beweise finden, die meine Vermutung stützen, daher kann ich mich völlig irren.

jcollum
quelle

Antworten:

144

Die Verwendung eines divInstides a tdist nicht schlechter als jede andere Art, Tabellen für das Layout zu verwenden. (Einige Leute verwenden jedoch nie Tabellen für das Layout, und ich bin zufällig einer von ihnen.)

Wenn Sie a divin a verwenden, werden tdSie jedoch in eine Situation geraten, in der es schwierig sein kann, die Größe der Elemente vorherzusagen. Die Standardeinstellung für ein div ist die Bestimmung seiner Breite von seinem übergeordneten Element, und die Standardeinstellung für eine Tabellenzelle ist die Bestimmung ihrer Größe in Abhängigkeit von der Größe ihres Inhalts.

Die Regeln für divdie Größe von a sind in den Standards gut definiert, aber die Regeln für tddie Größe von a sind nicht so gut definiert, sodass verschiedene Browser leicht unterschiedliche Algorithmen verwenden.

Guffa
quelle
Ich vermute, hier kam meine Vermutung her. Danke, dass du es geklärt hast.
JCollum
9
Wenn Ihre Spalten eine vorgegebene Breite haben, sollte dies kein Problem sein. Denken Sie daran, das Tabellenlayout festzulegen: Es wurde auf der Tabelle behoben, damit die Browser Ihre Breiten nicht überschreiben (was möglicherweise zu Problemen führen kann)
Jens Roland,
6
Er hat nie gesagt, dass er Tische für Layouts verwendet.
Texelate
@texelate table-layout:fixedCSS ist nicht das, was Sie denken. Es reduziert die Anzahl der Berechnungsbrowser beim Rendern von Tabellen, indem nur die Größe der ersten Zeile berechnet wird.
SteveB
73

Nach Überprüfung der XHTML-DTD stellte ich fest, dass ein <TD> -Element Blockelemente wie Überschriften, Listen und auch <DIV> -Elemente enthalten darf. Die Verwendung eines <DIV> -Elements innerhalb eines <TD> -Elements verstößt daher nicht gegen den XHTML-Standard. Ich bin mir ziemlich sicher, dass andere moderne HTML-Variationen ein äquivalentes Inhaltsmodell für das <TD> -Element haben.

Hier sind die relevanten DTD-Regeln:

<!ELEMENT td %Flow;>
<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!ENTITY %Flow "(#PCDATA | %block; | form | %inline; | %misc;>
<!ENTITY %block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">
Martin Liversage
quelle
1
Dies ist die spezifische Antwort, nach der ich gesucht habe. Also danke. Ich kann mir vorstellen, dass ich heute Nacht etwas besser schlafen werde.
3Dom
Die einzige Antwort, die von der Pec unterstützt wird.
Peterchaula
Bitte teilen Sie uns mit, wo in der DTD dies erklärt wird. Es ist kein leicht zu lesendes Dokument. Vielen Dank!
duftend
1
@redolent: Ich habe meiner Antwort die relevanten DTD-Regeln hinzugefügt.
Martin Liversage
Was ist mit der HTML5-Spezifikation, die nicht XHTML ist?
Crush
38

Nein, nicht unbedingt.

Wenn Sie einen DIV in einem TD platzieren müssen, stellen Sie sicher, dass Sie den TD ordnungsgemäß verwenden. Wenn Sie sich nicht für Tabellendaten und Semantik interessieren, interessieren Sie sich letztendlich nicht für DIVs in TDs. Ich glaube nicht, dass es ein Problem gibt - wenn Sie es tun müssen, geht es Ihnen gut.

Gemäß der HTML-Spezifikation

A <div>kann dort platziert werden, wo der Flussinhalt erwartet wird 1 , bei dem es sich um das <td>Inhaltsmodell 2 handelt .

Sampson
quelle
2
Ich wollte schon immer eine Frage mit Ja oder Nein beantworten;)
Jani Hartikainen
+1 - wollte wirklich mit etwas Witzigerem antworten, scheiterte aber.
Karim79
Obwohl dies mehr positive Stimmen bekam, denke ich, dass Guffa einen Punkt angesprochen hat, der hier nicht angesprochen wird (und möglicherweise die Quelle meiner Vermutung ist)
jcollum
14

Eine Tabellenzelle kann zu Recht Elemente auf Blockebene enthalten, sodass es sich nicht um einen Fauxpas handelt. Die Browser-Implementierung lässt dies natürlich eine spekulativ-theoretische Position. Dies kann zu Layoutproblemen und Fehlern führen.

Obwohl Tabellen für das Layout verwendet wurden - und manchmal immer noch -, stelle ich mir vor, dass die meisten Browser den Inhalt richtig rendern. Sogar IE.

David sagt, Monica wieder einsetzen
quelle
Ich vermute, bei der Browser-Implementierung habe ich mein "Warten, das ist eine schlechte Idee" erhalten.
JCollum
13

Wenn Sie Position verwenden möchten: absolut; auf dem div mit position: relative;auf dem td werden Sie auf Probleme stoßen. FF, Safari und Chrome (Mac, aber nicht PC) positionieren das Div nicht relativ zum td (wie Sie es erwarten würden). Dies gilt auch für Divs mit. display: table-whatever;Wenn Sie dies tun möchten, benötigen Sie zwei Divs, eines für das Behälter width: 100%; height: 100%;und kein Rand, so füllt es den td ohne visuelle Auswirkungen. und dann der absolute.

anders als das, warum nicht einfach die Zelle teilen?

zeel
quelle
6
Die einzige praktische, nicht heilige Antwort
Antony Hatchkins
2

Ich habe mich dem Problem gestellt, indem ich ein <div>Inneres platziert habe <td>.

Ich konnte das div nicht identifizieren, indem document.getElementById()ich es in td platziere. Aber draußen funktionierte es gut.

Himaja
quelle
1

Wie bereits erwähnt, ist dies möglicherweise keine gute Idee für Layoutzwecke. Ich bin zu dieser Frage gekommen, weil ich mich das gleiche gefragt habe und nur wissen wollte, ob es sich um einen gültigen Code handelt.

Da es gültig ist, können Sie es für andere Zwecke verwenden. Zum Beispiel werde ich es verwenden, um einige ausgefallene "CSSed" -Divs in Tabellenzeilen einzufügen und dann eine schnelle jQuery-Funktion zu verwenden, damit der Benutzer die Informationen nach Preis, Name usw. sortieren kann Nur die Layout-Tabelle gibt mir die "vertikale Reihenfolge", aber ich werde Breite, Höhe, Hintergrund usw. der Divs per CSS steuern.

Juan Ignacio
quelle
0

Zwei Möglichkeiten, damit umzugehen

  1. setzen divinnen - tbodyTag
  2. setzen divinnen - trTag

Beide Ansätze sind gültig, wenn Sie einen Fehler sehen: https://stackoverflow.com/a/23440419/2305243

Alan Dong
quelle
-4

Es bricht die Semantik , das ist alles. Es funktioniert gut, aber es kann Bildschirmleser oder etwas anderes geben, das nicht gerne HTML verarbeitet, wenn Sie die Semantik brechen.

Greg
quelle
13
@ Greg, warum bricht es die Semantik? Ein div ist einfach eine Block- oder Unterteilung des Seiteninhalts auf Blockebene. Als solches ist es nicht wesentlich und unwiderruflich antisemantisch, sie in einer Tabellenzelle zu platzieren.
David sagt, Monica
2
Ich habe versucht, Ihnen mehrere Antworten zu schreiben, die meine Antwort rechtfertigten, aber ich bin immer wieder auf meine persönliche Meinung gekommen. : / Ich denke, meine beste Antwort wäre, dass alles, was sich in Ihrer Zelle befindet, wahrscheinlich besser durch ein anderes HTML-Tag dargestellt werden kann. Wenn Sie Ihre Zellen wirklich in Komponenten aufteilen, sollten Sie wahrscheinlich zunächst keine Tabelle verwenden, sondern eine Reihe von DIVs für Ihr Layout entwerfen. Ich bin mir nicht sicher, warum ich das nicht in bessere Worte fassen kann ... ich nehme an, ich kann es IMHO mitteilen.
Greg
Hmm, meinst du damit, dass ein TD semantisch dasselbe ist wie ein DIV? Warum also zwei davon hintereinander?
JCollum
2
@jcollum: Nein, ich würde nicht sagen, dass sie semantisch gleich sind. TD ist definitiv eine Zelle in einer Tabelle; Es ist Teil einer bekannten Struktur: Eine Tabelle hat Zeilen, eine Zeile hat Zellen, Zellen enthalten Daten. DIV ist nur ein Container ... es kann jederzeit und überall im Dokument alles darstellen - Sie müssen Stil darauf anwenden, um eine Semantik in Bezug auf den Zweck des Markups zu erhalten.
Greg
7
Ein DIV ist semantisch bedeutungslos, daher sehe ich nicht, wie es jemals falsch sein könnte.
Rex M