web-dev-qa-db-ja.com

HTML5はtbodyからのセルを禁止しますか?

Razorビューの一部として次のマークアップがあります。

<table>
  <caption>Presidents</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Born</th>
      <th scope="col">Died</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Washington</th>
      <td>1732</td>
      <td>1799</td>
    </tr>
    <!-- etc -->
  </tbody>
</table>

「検証のターゲットスキーマ」をHTML5に設定すると、Visual Studioは次のように文句を言います。

警告1検証(HTML5):要素 'th'は要素 'tbody tfoot'内にネストしてはいけません。

これは本当ですか?もしそうなら、誰かが仕様にリンクできますか?

私の理解は、<th>行ヘッダーは合法であるだけでなく推奨されました。それは確かにかなり一般的であるように見えます。アクセシビリティに役立つことを説明している(一見賢明なように)何十ものチュートリアルをリンクすることができました。

これはVSバグですか? HTML5に伴う本当の変化(良いもの?悪いもの?)?ストーリーは何ですか?

50
Doug McClean

私の理解では、行ヘッダーに<th>を使用することは合法であるだけでなく、

私の知る限り、これはHTML 4(およびおそらくその前身)では常に合法であり、HTML5では変更されていません。

W3CのHTML5バリデーター はまだ実験段階ですが、警告やエラーを報告しません。繰り返しになりますが、HTML5自体はまだ完成していないため、Visual Studioが使用しているHTML5検証も実験的なものであると確信しています。

HTML5仕様 表形式データのマークアップ、特に セクション4.9.1 は、<th>および<tbody>内での<tfoot>の使用を示しています。行データをスコープするには:

<table>
 <thead>
  <tr>
   <th>
   <th>2008
   <th>2007
   <th>2006
 <tbody>
  <tr>
   <th>Net sales
   <td>$ 32,479
   <td>$ 24,006
   <td>$ 19,315
  <tr>
   <th>Cost of sales
   <td>  21,334
   <td>  15,852
   <td>  13,717
 <tbody>
  <tr>
   <th>Gross margin
   <td>$ 11,145
   <td>$  8,154
   <td>$  5,598
 <tfoot>
  <tr>
   <th>Gross margin percentage
   <td>34.3%
   <td>34.0%
   <td>29.0%
</table>

したがって、<th>要素を<tr>または<tbody>内に<tfoot>要素内に含めることは完全に正当です。とにかく、テーブルの見出しはテーブルのヘッダーにあるだけではないためです。

60
BoltClock

HTML5仕様 tr内にあることが必要です で、仕様には実際にthtbody内にネストされている例が含まれています。

11
Chuck

一般に、THTHEADscopeの値が"col"になりますが、THTBODYscope値は"row"です。

3