web-dev-qa-db-fra.com

<div> dans un <tr>: est-ce correct?

Ce code est-il correct?

<table>
    <tr>
        <td>...</td>
    </tr>

    <tr>
        <div>...</div>
    </tr>

    <tr>
        <td>...</td>
    </tr>    
</table>

je ne sais pas pour la sémantique (et les règles du W3C). Que peux-tu dire?

htmlhtml-tabletablerow
13
markzzz

Non ce n'est pas valide. Les éléments tr ne peuvent contenir que des éléments th et td. A partir de la spécification HTML4 :

<!ELEMENT TR       - O (TH|TD)+        -- table row -->
<!ATTLIST TR                           -- table row --
  %attrs;                              -- %coreattrs, %i18n, %events --
  %cellhalign;                         -- horizontal alignment in cells --
  %cellvalign;                         -- vertical alignment in cells --
>
23
Felix Kling

Non seulement ce n'est pas valide, mais ça ne marche pas! Cette majoration

<table>
    <tr>
        <td>The First Row</td>
    </tr>

    <tr>
        <div>The Second Row</div>
    </tr>

    <tr>
        <td>The Third Row</td>
    </tr>    
</table>

Produit cette affiche

The Second Row
The First Row
The Third Row

La div est entièrement éjectée de la table et placée devant elle dans le DOM

voir http://jsfiddle.net/ELzs3/1/

13
Alohci

Non, vous ne devriez pas vraiment utiliser une div dans une table car il s'agit d'un élément de niveau bloc. Vous pouvez remplacer le comportement avec CSS, mais cela ne sera pas validé avec W3C si tel est votre objectif.

5
shanethehat

Non, vous ne devriez pas utiliser un <div> à l'intérieur d'un <tr>. Vous pouvez l'utiliser à l'intérieur de <td> où la table est une table correctement imbriquée, bien que cela puisse ne pas être la meilleure pratique. Vous pouvez en réalité remplacer les paramètres d'affichage d'une div ou de n'importe quel élément. Vous pourriez en fait faire un <div> (qui bloquera par défaut) sous forme de tableau et vice versa.

4
SLB

Cela fonctionnera en mode quirks, mais le navigateur compatible avec le mode standard ne fonctionnera pas en fonction de votre type de document.

Certains navigateurs modernes ont deux modes de rendu. Le mode Quirk rend un document HTML comme les anciens navigateurs, par exemple. Netscape 4, Internet Explorer 4 et 5. Le mode standard affiche une page conformément aux recommandations du W3C. En fonction de la déclaration de type de document présente dans le document HTML, le navigateur bascule en mode quirk ou en mode standard. S'il n'y a pas de déclaration de type de document, le navigateur bascule en mode quirk.

http://www.w3.org/TR/REC-html32#dtd

JavaScript ne doit pas se comporter différemment. Cependant, les objets DOM sur lesquels JavaScript est utilisé peuvent avoir des comportements différents.

2
Pir Abdul

Supposons que votre ligne de tableau comporte 5 colonnes en général et que vous souhaitiez que votre division occupe toute la largeur du tableau. Ce qui suit devrait faire l'affaire.

<tr>
  <td colspan=5>
    <div class="some-class">
      <p>Hey</p>
    </div>
  </td>
</tr>
1
daneczech