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> 妥当性またはセマンティクスのいずれかの観点から話す要素。仕様には何も禁止していません。実際、少なくとも1つが含まれています 例 それは空のものを利用します <th> この目的のために：

以下は、2008年度のApple、Incの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

空を使用するより良い方法 <th></th>:

正確なコード：

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