说我有给定的桌子:

       +------+------+------+
       | 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> 用于间距。 有一个更好的方法吗?

有帮助吗?

解决方案

空无一人是完全可以接受的 <th> 元素,以有效性或语义为方面。规格中没有任何内容。实际上,它至少包含一个 例子 利用空的 <th> 为此目的:

以下显示了如何标记Apple,Inc,Inc的10-K提交的2008财政年度的第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>

其他提示

有关语义和空表元素的讨论,我想参考 在stackoverflow上解决这个问题

“空”单元格(例如背景或边界)的样式有时可能取决于“内容”的缺失/存在,这就是为什么人们经常放置一个 &nbsp; 里面。有一个特殊的CSS标签用于造型空单元,您可以阅读有关它的信息 在MDN上.

table {
    empty-cells: hide;
}

在这里您可以找到另一篇文章 有一些关于此主题的好背景信息。

使用空的任何更好的方法 <th></th>:

精确代码:

<tr>
 <th></th>
 <th colspan="6"></th>
</tr>
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top