¿Cuál es la mejor manera de representar un TH vacío en HTML5?

Question

Digamos que tengo la mesa dada:

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

Y quiero representarlo en HTML5. Lo complicado es que las tablas como esta deben ser semánticamente importantes, pero la célula superior izquierda es no semánticamente importante, pero en cambio un espaciador para alinear los encabezados de columna más importantes. ¿Cuál es la mejor manera de hacer esto? Mi primera idea es hacerlo así:

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

Aunque, poniendo <th></th> allí se siente mal, como usar <p>&nbsp;</p> para espaciar. ¿Hay una mejor manera de hacer esto?

Answer 1

Es completamente aceptable tener un vacío <th> elemento, hablando en términos de validez o semántica. Nada en la especificación lo prohíbe; De hecho, contiene al menos uno ejemplo que hace uso de un vacío <th> Para este mismo propósito:

A continuación se muestra cómo se podría marcar la tabla de margen bruto en la página 46 de la presentación de 10-K de Apple, Inc para el año fiscal 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

Para una discusión sobre semántica y elementos de mesa vacíos, me gustaría referir a esta pregunta en stackoverflow

El estilo de celdas "vacías" (como fondo o bordes) a veces puede depender de la ausencia/presencia de "contenido", por eso las personas a menudo ponen un   en el interior. Hay una etiqueta CSS especial para diseñar celdas vacías que pueda leer sobre ella. aquí en MDN.

table {
    empty-cells: hide;
}

Aquí puedes encontrar otro artículo con una buena información de fondo sobre este tema.

Answer 3

Cualquier forma mejor de usar vacío <th></th>:

Código exacto:

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