Qual é a melhor maneira de representar um TH vazio em html5?

Question

Diga que tenho a tabela 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 |
+------+------+------+------+

E eu quero representar isso em html5. O mais complicado é que tabelas como essa devem ser semanticamente importantes, mas a célula superior esquerda é não Semanticamente importante, mas, em vez disso, um espaçador para alinhar os cabeçalhos de colunas mais importantes. Qual é a melhor forma de fazer isso? Minha primeira ideia é fazer assim:

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

Embora, colocando <th></th> lá parece errado, como usar <p>&nbsp;</p> para espaçamento. Existe uma maneira melhor de fazer isso?

Answer 1

É completamente aceitável ter um vazio <th> elemento, falando em termos de validade ou semântica. Nada nas especificações o proíbe; De fato, contém pelo menos um exemplo Isso faz uso de um vazio <th> Para esse mesmo propósito:

A seguir, mostra como alguém pode marcar a tabela de margem bruta na página 46 do registro de 10-K da Apple, Inc para o ano fiscal de 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 uma discussão sobre semântica e elementos de mesa vazios, gostaria de me referir Para esta pergunta no StackOverflow

O estilo de células "vazias" (como fundo ou bordas) às vezes pode depender da ausência/presença de "conteúdo" e é por isso que as pessoas costumam colocar um   lado de dentro. Existe uma tag CSS especial para denominar células vazias que você pode ler sobre isso Aqui no MDN.

table {
    empty-cells: hide;
}

Aqui você pode encontrar outro artigo com algumas informações básicas boas sobre este tópico.

Answer 3

Qualquer maneira melhor de usar vazio <th></th>:

Código exato:

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