Ist ein DIV in einem TD eine schlechte Idee?

Question

Es scheint, wie ich / gehört irgendwo gelesen, dass ein <div> innerhalb eines <td> tabu war. Nicht, dass es nicht funktionieren wird, nur etwas über sie nicht wirklich kompatibel sind auf der Grundlage ihrer Darstellungsart. Kann keine Beweise finden meine Vermutung zu sichern, so dass ich kann völlig falsch sein.

Answer 1

Unter Verwendung ist ein div instide eines td nicht schlechter als jede andere Art und Weise Tabellen für das Layout verwenden. (Einige Leute nie obwohl Tabellen für das Layout verwenden, und ich zufällig einer von ihnen sein.)

Wenn Sie eine div in einem td verwenden, werden Sie jedoch in einer Situation, wo es schwierig sein könnte, um vorherzusagen, wie sich die Elemente so bemessen sein. Der Standardwert für eine div ist seine Breite von seinem Elternteil zu bestimmen, und die Standardeinstellung für eine Tabellenzelle ist seine Größe abhängig von der Größe seines Inhalts zu bestimmen.

Die Regeln dafür, wie ein div bemessen sein sollte gut in den Standards definiert ist, aber die Regeln dafür, wie ein td bemessen ist nicht so gut definiert werden soll, so verschiedener Browser verwenden leicht unterschiedliche Algorithmen.

Answer 2

die XHTML DTD Nach Überprüfung ich entdeckt, dass ein -Element Block-Elemente wie Überschriften, Listen und auch

-Elemente enthalten darf. So mit einem

-Element innerhalb eines -Element nicht den XHTML-Standard verletzt. Ich bin mir ziemlich sicher, dass andere moderne Varianten von HTML ein äquivalenten Content-Modell für das -Element.

Hier sind die entsprechenden 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">

Nein. Nicht unbedingt.

Wenn Sie ein DIV in einem TD vergeben müssen, sollten Sie die TD richtig verwenden. Wenn Sie nicht über tafel Daten kümmern, und Semantik, dann werden Sie letztlich nicht über DIVs in TDs kümmern. Ich glaube nicht, dass es ein Problem, obwohl - wenn Sie Haben , es zu tun, du bist in Ordnung

.

Nach der HTML-Spezifikation

kann ein <div> platziert werden, wo Inhalt fließt erwartet wird ¹ , die das <td> Content-Modell ist ² .

Eine Tabelle-Zelle kann berechtigterweise Block-Level-Elemente enthalten, so ist es nicht, von Natur aus, die einen Faux-pas. Browser implentation, natürlich lässt dies eine spekulative theoretische Position. Es kann das Layout Probleme und Fehler verursachen.

Obwohl als Tabellen für das Layout verwendet wurden -und manchmal noch ist-ich mir vorstellen, dass die meisten Browser richtig den Inhalt übertragen wird. Auch IE.

Wenn Sie möchten, Position verwenden: absolute; auf der div mit position: relative; auf dem td werden Sie auf Probleme stoßen. FF, Safari und Chrome (mac, nicht PC obwohl) die div in Bezug auf die td nicht positionieren (wie man erwarten würde) gilt dies auch für divs mit display: table-whatever; also, wenn Sie tun möchten, dass Sie zwei divs benötigen, eine für der Behälter width: 100%; height: 100%; und keine Grenze, so füllt er den td ohne visuelle Wirkung. und dann wird der absolute eins.

anders als das, warum nicht nur die Zelle geteilt?

Ich habe das Problem, indem ein <div> innerhalb <td> gegenüber.

Ich war nicht in der Lage, die div mit document.getElementById() zu identifizieren, wenn ich, dass innerhalb td platzieren. Aber draußen, es funktioniert gut.

Wie jeder erwähnt, ist es vielleicht nicht eine gute Idee für Layoutzwecke sein. Ich kam auf diese Frage, weil ich das gleiche habe mich gefragt, und ich wollte nur wissen, ob es gültiger Code sein würde.

Da es gültig ist, können Sie es für andere Zwecke verwenden. Zum Beispiel, was ich werde, um es für einige Phantasie zu setzen ist divs innerhalb Tabellenzeilen „CSSed“ und dann eine schnelle jQuery-Funktion verwenden, damit der Benutzer die Informationen nach Preis sortieren, Name usw. Auf diese Weise wird die nur Layouttabelle gibt mir die „vertikale Ordnung“ ist, aber ich werde Breite steuern, Höhe, Hintergrund, etc der divs von CSS.

Zwei Wege, damit umzugehen

1. put div innerhalb tbody Tag
2. put div innerhalb tr Tag

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

Es bricht Semantik , das ist alles. Es funktioniert gut, aber es kann Screenreadern oder etwas auf der Straße, die nicht die Bearbeitung Ihrer HTML genießen, wenn Sie „Semantik brechen“.

Answer 3

Nein. Nicht unbedingt.

Wenn Sie ein DIV in einem TD vergeben müssen, sollten Sie die TD richtig verwenden. Wenn Sie nicht über tafel Daten kümmern, und Semantik, dann werden Sie letztlich nicht über DIVs in TDs kümmern. Ich glaube nicht, dass es ein Problem, obwohl - wenn Sie Haben , es zu tun, du bist in Ordnung

.

Nach der HTML-Spezifikation

kann ein <div> platziert werden, wo Inhalt fließt erwartet wird ¹ , die das <td> Content-Modell ist ² .

Answer 4

Eine Tabelle-Zelle kann berechtigterweise Block-Level-Elemente enthalten, so ist es nicht, von Natur aus, die einen Faux-pas. Browser implentation, natürlich lässt dies eine spekulative theoretische Position. Es kann das Layout Probleme und Fehler verursachen.

Obwohl als Tabellen für das Layout verwendet wurden -und manchmal noch ist-ich mir vorstellen, dass die meisten Browser richtig den Inhalt übertragen wird. Auch IE.

Answer 5

Wenn Sie möchten, Position verwenden: absolute; auf der div mit position: relative; auf dem td werden Sie auf Probleme stoßen. FF, Safari und Chrome (mac, nicht PC obwohl) die div in Bezug auf die td nicht positionieren (wie man erwarten würde) gilt dies auch für divs mit display: table-whatever; also, wenn Sie tun möchten, dass Sie zwei divs benötigen, eine für der Behälter width: 100%; height: 100%; und keine Grenze, so füllt er den td ohne visuelle Wirkung. und dann wird der absolute eins.

anders als das, warum nicht nur die Zelle geteilt?

Answer 6

Ich habe das Problem, indem ein <div> innerhalb <td> gegenüber.

Ich war nicht in der Lage, die div mit document.getElementById() zu identifizieren, wenn ich, dass innerhalb td platzieren. Aber draußen, es funktioniert gut.

Answer 7

Wie jeder erwähnt, ist es vielleicht nicht eine gute Idee für Layoutzwecke sein. Ich kam auf diese Frage, weil ich das gleiche habe mich gefragt, und ich wollte nur wissen, ob es gültiger Code sein würde.

Da es gültig ist, können Sie es für andere Zwecke verwenden. Zum Beispiel, was ich werde, um es für einige Phantasie zu setzen ist divs innerhalb Tabellenzeilen „CSSed“ und dann eine schnelle jQuery-Funktion verwenden, damit der Benutzer die Informationen nach Preis sortieren, Name usw. Auf diese Weise wird die nur Layouttabelle gibt mir die „vertikale Ordnung“ ist, aber ich werde Breite steuern, Höhe, Hintergrund, etc der divs von CSS.

Answer 8

Zwei Wege, damit umzugehen

1. put div innerhalb tbody Tag
2. put div innerhalb tr Tag

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

Answer 9

Es bricht Semantik , das ist alles. Es funktioniert gut, aber es kann Screenreadern oder etwas auf der Straße, die nicht die Bearbeitung Ihrer HTML genießen, wenn Sie „Semantik brechen“.