Est-ce un DIV dans un TD une mauvaise idée?

Question

Il semble que j'ai entendu / lu quelque part qu'un <div> à l'intérieur d'un <td> était un non-non. Non pas que cela ne fonctionne pas, juste quelque chose sur eux de ne pas être vraiment basé compatibles sur leur type d'affichage. Vous ne trouvez pas une preuve pour étayer mon intuition, donc je peux être tout à fait tort.

Answer 1

L'utilisation d'un div instide un td est pas pire que toute autre façon d'utiliser des tables pour la mise en page. (Certaines personnes utilisent jamais tables pour la mise en page bien, et j'arrive d'être l'un d'entre eux.)

Si vous utilisez un div dans un td vous cependant obtenir dans une situation où il pourrait être difficile de prédire comment les éléments seront dimensionnés. La valeur par défaut pour un div est de déterminer la largeur de son parent, et la valeur par défaut pour une cellule de tableau est de déterminer sa taille en fonction de la taille de son contenu.

Les règles de la façon dont un div doit être dimensionné est bien défini dans les normes, mais les règles de la façon dont un td devrait être de taille ne sont pas aussi bien défini, si différents navigateurs utilisent des algorithmes légèrement différents.

Answer 2

Après avoir vérifié la DTD XHTML j'ai découvert qu'un -Element est autorisé à contenir des éléments de bloc comme des titres, des listes et aussi

-elements. Ainsi, en utilisant un élément

dans un -Element ne viole pas la norme XHTML. Je suis assez sûr que d'autres variations modernes de HTML ont un modèle de contenu équivalent pour le -Element.

Voici les règles pertinentes DTD:

<!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">

Non. Pas nécessairement.

Si vous devez placer un DIV dans un TD, assurez-vous que vous utilisez le TD correctement. Si vous ne se soucient pas de données tabulaires, et la sémantique, vous en fin de compte ne se soucient DIVs dans TDs. Je ne pense pas qu'il y ait un problème - si vous Vous pour le faire, vous êtes bien

.

Selon la spécification HTML

A <div> peut être placé où contenu de flux devrait ¹ , qui est le modèle de contenu <td> ² .

Une table-cellule peut légitimement contenir des éléments de niveau bloc il est donc pas, en soi, un faux-pas. Navigateur implentation, bien sûr, quitte cette position spéculative théorique. Il peut causer des problèmes de mise en page et les bogues.

Bien que les tableaux ont été utilisés pour la mise en page -et parfois encore sont- j'imagine que la plupart des navigateurs afficher correctement le contenu. Même IE.

Si vous voulez utiliser la position: absolute; sur la div avec position: relative; sur le td vous rencontrer des problèmes. FF, Safari et Chrome (Mac, pas PC mais) ne sera pas la position de la div par rapport à la td (comme on peut s'y attendre) cela est également vrai pour divs avec display: table-whatever; donc si vous voulez faire que vous avez besoin de deux divs, un pour le conteneur width: 100%; height: 100%; et pas de frontière pour qu'elle remplisse l'td sans impact visuel. puis l'absolu.

autre

que pourquoi ne pas simplement diviser la cellule?

J'ai fait face le problème en plaçant un <div> à l'intérieur <td>.

Je suis incapable d'identifier le div en utilisant document.getElementById() si je place que l'intérieur td. Mais à l'extérieur, il fonctionnait très bien.

Comme tout le monde dit, il pourrait ne pas être une bonne idée à des fins de mise en page. Je suis arrivé à cette question parce que je me demandais la même chose et je ne voulais savoir si ce serait un code valide.

Comme il est valide, vous pouvez l'utiliser à d'autres fins. Par exemple, ce que je vais l'utiliser pour est de mettre un peu de fantaisie « cssed » divs lignes de table à l'intérieur, puis utiliser une fonction jQuery rapide pour permettre à l'utilisateur de trier les informations par prix, nom, etc. De cette façon, la seule table de mise en page me donne est « l'ordre vertical », mais je vais contrôler la largeur, la hauteur, fond, etc par des divs CSS.

Deux façons d'y faire face

1. mettre à l'intérieur div tag tbody
2. mettre à l'intérieur div tag tr

Les deux approches sont valables, si vous voyez feference: https://stackoverflow.com/a/23440419/2305243

Il casse sémantique , c'est tout. Il fonctionne très bien, mais il peut y avoir des lecteurs d'écran ou quelque chose sur la route qui ne sera pas profiter de traitement de votre HTML si vous « casser la sémantique ».

Answer 3

Non. Pas nécessairement.

Si vous devez placer un DIV dans un TD, assurez-vous que vous utilisez le TD correctement. Si vous ne se soucient pas de données tabulaires, et la sémantique, vous en fin de compte ne se soucient DIVs dans TDs. Je ne pense pas qu'il y ait un problème - si vous Vous pour le faire, vous êtes bien

.

Selon la spécification HTML

A <div> peut être placé où contenu de flux devrait ¹ , qui est le modèle de contenu <td> ² .

Answer 4

Une table-cellule peut légitimement contenir des éléments de niveau bloc il est donc pas, en soi, un faux-pas. Navigateur implentation, bien sûr, quitte cette position spéculative théorique. Il peut causer des problèmes de mise en page et les bogues.

Bien que les tableaux ont été utilisés pour la mise en page -et parfois encore sont- j'imagine que la plupart des navigateurs afficher correctement le contenu. Même IE.

Answer 5

Si vous voulez utiliser la position: absolute; sur la div avec position: relative; sur le td vous rencontrer des problèmes. FF, Safari et Chrome (Mac, pas PC mais) ne sera pas la position de la div par rapport à la td (comme on peut s'y attendre) cela est également vrai pour divs avec display: table-whatever; donc si vous voulez faire que vous avez besoin de deux divs, un pour le conteneur width: 100%; height: 100%; et pas de frontière pour qu'elle remplisse l'td sans impact visuel. puis l'absolu.

autre

que pourquoi ne pas simplement diviser la cellule?

Answer 6

J'ai fait face le problème en plaçant un <div> à l'intérieur <td>.

Je suis incapable d'identifier le div en utilisant document.getElementById() si je place que l'intérieur td. Mais à l'extérieur, il fonctionnait très bien.

Answer 7

Comme tout le monde dit, il pourrait ne pas être une bonne idée à des fins de mise en page. Je suis arrivé à cette question parce que je me demandais la même chose et je ne voulais savoir si ce serait un code valide.

Comme il est valide, vous pouvez l'utiliser à d'autres fins. Par exemple, ce que je vais l'utiliser pour est de mettre un peu de fantaisie « cssed » divs lignes de table à l'intérieur, puis utiliser une fonction jQuery rapide pour permettre à l'utilisateur de trier les informations par prix, nom, etc. De cette façon, la seule table de mise en page me donne est « l'ordre vertical », mais je vais contrôler la largeur, la hauteur, fond, etc par des divs CSS.

Answer 8

Deux façons d'y faire face

1. mettre à l'intérieur div tag tbody
2. mettre à l'intérieur div tag tr

Les deux approches sont valables, si vous voyez feference: https://stackoverflow.com/a/23440419/2305243

Answer 9

Il casse sémantique , c'est tout. Il fonctionne très bien, mais il peut y avoir des lecteurs d'écran ou quelque chose sur la route qui ne sera pas profiter de traitement de votre HTML si vous « casser la sémantique ».