在 HTML5 中表示空 TH 的最佳方式是什么? [英] What's the best way to represent an empty TH in HTML5?

问题描述

假设我有给定的表格:

       +------+------+------+
       | 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 来表示它.棘手的是，像这样的表格必须在语义上很重要，但左上角的单元格在语义上不，而是一个用于排列更重要的列标题的分隔符.做到这一点的最佳方法是什么?我的第一个想法是这样做:

And I want to represent it in HTML5. The tricky thing is that tables like this must be semantically important, but the top-left cell is not semantically important, but instead a spacer to line up the more important column headers. What's the best way to do this? My first idea is to do it like this:

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

虽然，把 放在那里感觉是错误的，就像使用

&nbsp;</p>为间距.有没有更好的方法来做到这一点?

推荐答案

拥有一个空的 元素是完全可以接受的，无论是在有效性还是语义方面.规范中没有任何内容禁止它；事实上，它至少包含一个 example 使用一个空的 就是为了这个目的:

It's completely acceptable to have an empty <th> element, speaking in terms of either validity or semantics. Nothing in the spec forbids it; in fact, it contains at least one example that makes use of an empty <th> for this very purpose:

以下显示了如何标记 Apple, Inc 2008 财年 10-K 文件第 46 页的毛利率表:

The following shows how one might mark up the gross margin table on page 46 of Apple, Inc's 10-K filing for fiscal year 2008:

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

这篇关于在 HTML5 中表示空 TH 的最佳方式是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！