Quelle est la meilleure façon de représenter un TH vide dans HTML5?

Question

Dis que j'ai le tableau donné:

       +------+------+------+
       | Col1 | Col2 | Col3 |
+------+------+------+------+
| Row1 | D1.1 | D1.2 | D1.3 |
+------+------+------+------+
| Row2 | D2.1 | D2.2 | D2.3 |
+------+------+------+------+
| Row3 | D3.1 | D3.2 | D3.3 |
+------+------+------+------+

Et je veux le représenter dans HTML5. Le truc délicat est que des tables comme celle-ci doivent être sémantiquement importantes, mais la cellule supérieure gauche est ne pas sémantiquement important, mais plutôt un espaceur pour aligner les en-têtes de colonne les plus importants. Quelle est la meilleure façon de faire cela? Ma première idée est de le faire comme ceci:

<table>
    <thead>
        <tr>
            <th></th>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row1</th>
            <td>D1.1</td>
            <td>D1.2</td>
            <td>D1.3</td>
        </tr>
        <tr>
            <th>Row2</th>
            <td>D2.1</td>
            <td>D2.2</td>
            <td>D2.3</td>
        </tr>
        <tr>
            <th>Row3</th>
            <td>D3.1</td>
            <td>D3.2</td>
            <td>D3.3</td>
        </tr>
    </tbody>
</table>

Cependant, mettant <th></th> là-bas se sent juste mal, comme utiliser <p>&nbsp;</p> pour l'espacement. Y a-t-il une meilleure manière de faire cela?

Answer 1

C'est tout à fait acceptable d'avoir un vide <th> élément, parlant en termes de validité ou de sémantique. Rien dans la spécification ne l'interdit; en fait, il contient au moins un Exemple qui utilise un vide <th> Pour ce but même:

Ce qui suit montre comment on pourrait marquer le tableau des marges brutes à la page 46 du dépôt de 10 K d'Apple, Inc pour l'exercice 2008:

<table>
 <thead>
  <tr>
   <th>
   <th>2008
   <th>2007
   <th>2006
 <tbody>
  <tr>
   <th>Net sales
   <td>$ 32,479
   <td>$ 24,006
   <td>$ 19,315
 <!-- snip -->
</table>

Answer 2

Pour une discussion sur la sémantique et les éléments de table vides que je voudrais référer à cette question sur stackOverflow

Le style des cellules «vides» (comme l'arrière-plan ou les bordures) peut parfois dépendre de l'absence / présence de «contenu», c'est pourquoi les gens mettent souvent un   à l'intérieur. Il existe une balise CSS spéciale pour styliser des cellules vides que vous pouvez lire à ce sujet ici sur MDN.

table {
    empty-cells: hide;
}

Ici, vous pouvez trouver un autre article avec de belles informations de fond sur ce sujet.

Answer 3

Une meilleure façon d'utiliser vide <th></th>:

Code exact:

<tr>
 <th></th>
 <th colspan="6"></th>
</tr>