html - 在 HTML5 中表示空 TH 的最佳方式是什么？

Question

假设我有给定的表：

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

我想用 HTML5 来表示它。棘手的是，像这样的表格必须在语义上很重要，但左上角的单元格在语义上并不重要，而是一个分隔符来排列更重要的列标题。最好的方法是什么？我的第一个想法是这样做：

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

不过，放在<th></th>那里感觉不对，就像使用<p>&nbsp;</p>间距一样。有一个更好的方法吗？

Answer 1

<th>就有效性或语义而言，有一个空元素是完全可以接受的。规范中没有任何内容禁止它；事实上，它至少包含一个使用空来实现此目的的示例：<th>

下面显示了如何标记苹果公司 2008 财年 10-K 文件第 46 页上的毛利率表：

<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

有关语义和空表元素的讨论，我想参考StackOverflow 上的这个问题

“空”单元格（如背景或边框）的样式有时可能取决于“内容”的缺失/存在，这就是人们经常放入 内部的原因。有一个特殊的 CSS 标签用于设置空单元格的样式，您可以在 MDN 上阅读它。

table {
    empty-cells: hide;
}

在这里，您可以找到另一篇文章，其中包含有关此主题的一些不错的背景信息。

Answer 3

任何更好的使用 empty 的方法<th></th>：

确切的代码：

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