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> </p>来表示间距。 有更好的方法吗？

Answer 1

在有效性或语义方面，有一个空的<th>元素是完全可以接受的。 spec中没有任何内容禁止它;事实上，它包含至少一个example，它使用空<th>用于相同的目的：

以下显示了如何标记Apple，Inc在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
 
</table>

Answer 2

空元素没有错。事实上，这不是错误的语法，也不是一种不好的做法;在这个实例中使用空元素比使用其他黑客实现这样的布局要好得多。

除此之外，还有 :empty selector 。

这个选择器本身就证明空元素没有错误。

：empty伪类表示一个根本没有子元素的元素。就文档树而言，只有数据具有非零长度的元素节点和内容节点（例如DOM [DOM-LEVEL-3-CORE]文本节点，CDATA节点和实体引用）必须被视为影响空虚;注释，处理指令和其他节点不得影响元素是否为空。

W3C http://www.w3.org/TR/css3-selectors/#empty-pseudo

Answer 3

关于语义和空表元素的讨论，我想引用to this question on StackOverflow

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

table {
    empty-cells: hide;
}

Here you can find another article有关于此主题的一些很好的背景信息。

Answer 4

使用空<th></th>的更好方法：

确切代码：

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

在HTML5中表示空TH的最佳方法是什么？

4 个答案: