Qual è il modo migliore per rappresentare un th vuoto in HTML5?

Question

Dì che ho la tabella data:

       +------+------+------+
       | 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 voglio rappresentarlo in HTML5. La cosa difficile è che tavoli come questo devono essere semanticamente importanti, ma la cella in alto a sinistra è non Semanticamente importante, ma invece un distanziatore per allineare le intestazioni di colonna più importanti. Qual'è il miglior modo per farlo? La mia prima idea è farlo in questo modo:

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

Tuttavia, mettendo <th></th> dentro si sente solo sbagliato, come usare <p>&nbsp;</p> per spaziatura. C'è un modo migliore per farlo?

Answer 1

È completamente accettabile avere un vuoto <th> elemento, parlando in termini di validità o semantica. Niente nella specifica lo proibisce; In effetti, ne contiene almeno uno esempio Questo fa uso di un vuoto <th> Proprio per questo scopo:

Di seguito mostra come si potrebbe contrassegnare la tabella del margine lordo a pagina 46 del deposito 10-K di Apple per l'anno fiscale 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

Per una discussione sulla semantica e gli elementi del tavolo vuoti, vorrei fare riferimento A questa domanda su StackOverflow

Lo styling di cellule "vuote" (come lo sfondo o i bordi) a volte può dipendere dall'assenza/presenza di "contenuto" ecco perché le persone mettono spesso a   dentro. C'è uno speciale tag CSS per lo styling di celle vuote che puoi leggere a riguardo Qui su MDN.

table {
    empty-cells: hide;
}

Qui puoi trovare un altro articolo Con alcune belle informazioni di base su questo argomento.

Answer 3

Qualsiasi modo migliore di usare vuoto <th></th>:

Codice esatto:

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