Was ist der beste Weg, um einen leeren TH in HTML5 darzustellen?

Question

Sagen Sie, ich habe die angegebene Tabelle:

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

Und ich möchte es in HTML5 darstellen. Das Schwierige ist, dass Tabellen wie diese semantisch wichtig sein müssen, aber die obere linke Zelle ist nicht Semantisch wichtig, aber stattdessen ein Abstandhalter, um die wichtigeren Säulenkopfzeile auszurichten. Was ist der beste Weg, dies zu tun? Meine erste Idee ist es, es so zu machen:

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

Allerdings ausdrücken <th></th> Dort fühlt sich einfach falsch an, wie benutzen <p>&nbsp;</p> für Abstand. Gibt es einen besseren Weg, dies zu tun?

Answer 1

Es ist völlig akzeptabel, einen leeren zu haben <th> Element, in Bezug auf Gültigkeit oder Semantik. Nichts in der Spezifikation verbietet es; In der Tat enthält es mindestens einen Beispiel Das nutzt einen leeren <th> Zu diesem Zweck:

Das Folgende zeigt, wie man die Bruttomarge-Tabelle auf Seite 46 von Apple, Incs 10-K-Einreichung für das Geschäftsjahr 2008 markieren könnte:

<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

Für eine Diskussion über Semantik und leere Tischelemente möchte ich mich verweisen zu dieser Frage zu Stackoverflow

Das Styling von "leeren" Zellen (wie Hintergrund oder Grenzen) kann manchmal von der Abwesenheit/Vorhandensein von "Inhalten" abhängen, weshalb Menschen oft eine setzen   Innerhalb. Es gibt ein spezielles CSS -Tag zum Styling leerer Zellen, die Sie darüber lesen können Hier auf Mdn.

table {
    empty-cells: hide;
}

Hier finden Sie einen weiteren Artikel mit einigen schönen Hintergrundinformationen zu diesem Thema.

Answer 3

Eine bessere Möglichkeit, leer zu verwenden <th></th>:

Genauer Code:

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