什么';在HTML5中表示空TH的最佳方式是什么?

什么';在HTML5中表示空TH的最佳方式是什么?,html,html-table,semantic-markup,Html,Html Table,Semantic Markup,假设我有给定的表: +------+------+------+ | Col1 | Col2 | Col3 | +------+------+------+------+ | Row1 | D1.1 | D1.2 | D1.3 | +------+------+------+------+ | Row2 | D2.1 | D2.2 | D2.3 | +------+------+------+------+ | Row3 | D3.1 | D3.2 | D3.3 |

假设我有给定的表:

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

可乐
可乐
可乐
第1行
D1.1
D1.2
D1.3
第2行
D2.1
D2.2
D2.3
第3行
D3.1
D3.2
D3.3

尽管如此,把
放进去感觉是不对的,就像用

作为间隔一样有更好的方法吗?

关于语义和空表元素的讨论,我想参考一下

“空”单元格(如背景或边框)的样式有时可能取决于“内容”的存在与否,这就是为什么人们经常在单元格内放置
。有一个特殊的CSS标签用于设置空单元格的样式,您可以阅读它


有一些关于这个话题的背景资料

完全可以接受有一个空的
元素,从有效性或语义上讲。规范中没有禁止它;事实上,它至少包含一个利用空
实现此目的的函数:

以下是苹果公司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>

2008
2007
2006
净销售额
$ 32,479
$ 24,006
$ 19,315

是否有更好的空
使用方法:

确切代码:

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


空元素没有问题@乔希很有趣。。。你能在回答中详细说明一下吗?我认为值得一提的是,在过去的7年中,我发现像这样的空元素在语义上很重要,因为它们在语义上表示“这里没有数据”。这对解析器来说非常重要,这就是语义HTML1+伟大发现背后的意图。。。我只是想知道为什么在这个例子中他们不关闭他们的元素标签。@JoshC:一些例子有关闭标签,其他的没有。我猜这只是他们的说法,结束标记对于大多数表元素来说是可选的——它们是可选的。@JoshC:但我肯定,通过像这样省略结束标记,换行符和缩进可以作为
内容的一部分,使其在
:empty
选择器中不为空。然而,就HTML而言,它仍然是一个“空单元格”,即使它包含的只是空白(规范中提到了这一点)。如果你的答案中有一些链接的内容,那就好了,以防出现链接rot@Supuhstar,谢谢你的评论。我添加了css示例,
在我看来是不言自明的。
<tr>
 <th></th>
 <th colspan="6"></th>
</tr>