La bonne façon d'organiser des tables

Question

J'ai ce balisage

<div id="standards"> 
<table border="1"> 
    <thead> 
     <tr> 
      <th>Markup</th> 
      <th colspan="4">HTML</th> 
      <th colspan="4">XHTML</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <th>Version</th> 
      <td colspan="3">4.01</td> 
      <td>5</td> 
      <td colspan="3">1.0</td> 
      <td>5</td> 
     </tr> 
     <tr> 
      <th>Flavour</th> 
      <td>Strict</td> 
      <td>Transitional</td> 
      <td>Frameset</td> 
      <td>N/A</td> 
      <td>Strict</td> 
      <td>Transitional</td> 
      <td>Frameset</td> 
      <td>N/A</td> 
     </tr> 
     <tr> 
      <th>Support</th> 
      <td>Yes</td> 
      <td>Yes</td> 
      <td>Yes</td> 
      <td>Yes</td> 
      <td>Yes</td> 
      <td>Yes</td> 
      <td>Yes</td> 
      <td>Yes</td> 
     </tr> 
    </tbody> 

Ma question est que je devrais quitter la première et la deuxième « tr » dans le « tbody » comme il est maintenant, ou devrais Je les déplace à "thead" du point de vue de la sémantique. La table comme on peut le voir, a 3 en-têtes. Quelle serait la bonne façon de faire cela? Voici le violon

Fiddle

Answer 1

Vous pouvez avoir plusieurs de <tr> dans <thead> selon la documentation de w3 pour HTML4 et HTML5 et de faire qui correspondrait à votre table en termes de sémantique, alors allez-y et les déplacer vers la thead.

Answer 2

Si cette table a vraiment 3 lignes d'en-têtes (pas de données), les mettre dans <thead>.

<td> est pour les données réelles en général.

Il n'y a rien de mal avec <th> dans une ligne de table, cela indique que la cellule est en-tête pour cette ligne particulière.

Vous êtes bien comme ça.