th 要素・td 要素 scope 属性 (HTML, XHTML 1)

[1] HTML の th 要素および td 要素の scope 属性は、その見出しこまが見出し情報を提供するデータこま集合を指定します。

仕様書: HTML 4

scope IW:HTML4:"struct/tables.html#adef-scope"
11.4.1 Associating header information with data cells IW:HTML4:"struct/tables.html#header-data"

[2] 見出しこまが〜といいながらもなぜか td 要素にも存在しています。見出しでなくても見出しに準じるもの (例えば「名前」列の各こま) に使うことが想定されているようです (例 >>7 参照)。

[3] この属性は、特に単純な表では、 headers 属性の代わりに使うことができます。

[8]

HTML 4
- 厳密DTD IW:HTML4:"sgml/dtd.html#Scope"
- 移行用DTD IW:HTML4:"sgml/loosedtd.html#Scope"

(名無しさん [sage])

属性値型

[3] この属性の値は列挙値型です。

row: その行の残りのこま
col: その列の残りのこま
rowgroup: その行群の残りのこま
colgroup: その列群の残りのこま

省略

[4] この属性は省略可能です。既定値はありません。

他との関係

[5] 見出しこまの scope 属性の代わりに、データこまに headers 属性を指定できます。 scope 属性ではあらわせない複雑な構造を持った表では headers 属性を使うことができます (が、多くの場合は scope で十分でしょう)。

[9] HTML 4 DTD の注釈 (参考) でも、 Scope is simpler than headers attribute for common tables と言っています。 (名無しさん [sage])

例

[6] headers と scope の等価な書換えの例が headers の例として載っています。

[7] 例: scope 属性を使ったやや複雑な例

<TABLE border="1" cellpadding="5" cellspacing="2"
  summary="History courses offered in the community of
           Bath arranged by course name, tutor, summary, 
           code, and fee">
  <TR>
    <TH colspan="5" scope="colgroup">Community Courses -- Bath Autumn 1997</TH>
  </TR>
  <TR>
    <TH scope="col" abbr="Name">Course Name</TH>
    <TH scope="col" abbr="Tutor">Course Tutor</TH>
    <TH scope="col">Summary</TH>
    <TH scope="col">Code</TH>
    <TH scope="col">Fee</TH>
  </TR>
  <TR>
    <TD scope="row">After the Civil War</TD>
    <TD>Dr. John Wroughton</TD>
    <TD>
       The course will examine the turbulent years in England
       after 1646. <EM>6 weekly meetings starting Monday 13th
      October.</EM>
    </TD>
    <TD>H27</TD>
    <TD>&pound;32</TD>
  </TR>
  <TR>
    <TD scope="row">An Introduction to Anglo-Saxon England</TD>
    <TD>Mark Cottle</TD>
    <TD>
       One day course introducing the early medieval
       period reconstruction the Anglo-Saxons and
       their society. <EM>Saturday 18th October.</EM>
    </TD>
    <TD>H28</TD>
    <TD>&pound;18</TD>
  </TR>
  <TR>
    <TD scope="row">The Glory that was Greece</TD>
    <TD>Valerie Lorenz</TD>
    <TD>
     Birthplace of democracy, philosophy, heartland of theater, home of
     argument. The Romans may have done it but the Greeks did it
     first. <EM>Saturday day school 25th October 1997</EM>
    </TD>
    <TD>H30</TD>
    <TD>&pound;18</TD>
  </TR>
</TABLE>

(HTML 4 仕様書より)

レンダリング例が IW:HTML4:"images/table2" にあります。

[11] 誤用例

asahi.com:朝日新聞J2日程・結果 (2007-06-13 17:30:53 +09:00 版) http://www.asahi.com/sports/fb/result-j2.html

<!---第1節TABLEここから-->
<table class="sptable02" border="0" cellspacing="0" cellpadding="0" width="70%" summary="2007年J2日程表">
<thead class="spthead02">
<tr style="text-align:left;">
<th colspan="4">第1節</th>
</tr>
</thead>
<tbody>
<tr class="center">
<td scope="row" class="sptd02" rowspan="3" width="20%">03/03(土)</td>
<td scope="row" width="20%">13:00</td>
<td scope="row" width="40%">●湘南 1—2 仙台○</td>
<td scope="row" width="20%">平塚</td>
</tr>
<tr class="center">
<td scope="row" width="20%">14:00</td>
<td scope="row" width="40%">○徳島 2—1 愛媛●</td>
<td scope="row" width="20%">ポカリ</td>
</tr>
<tr class="center">
<td scope="row" width="20%">16:00</td>
<td scope="row" width="40%">○京都 2—0 札幌●</td>
<td scope="row" width="20%">西京極</td>
</tr>
<tr class="center">
<td scope="row" class="sptd02" rowspan="3" width="20%">03/04(日)</td>
<td scope="row" width="20%">13:00</td>
<td scope="row" width="40%">○東京ヴ 5—0 草津●</td>
<td scope="row" width="20%">国立</td>
</tr>
<tr class="center">
<td scope="row" width="20%">14:00</td>
<td scope="row" width="40%">●水戸 0—1 山形○</td>
<td scope="row" width="20%">笠松</td>
</tr>
<tr class="center">
<td scope="row" width="20%">15:00</td>
<td scope="row" width="40%">●鳥栖 0—5 福岡○</td>
<td scope="row" width="20%">鳥栖</td>
</tr>
</tbody>
</table>
<!--/第1節TABLEここまで-->

(名無しさん)

[12] Amazon.co.jp:新品およびユーズド: 東京番外地 (2007-07-04 09:42:40 +09:00 版) http://www.amazon.co.jp/gp/offer-listing/410466202X/ref=dp_olp_1/503-4659305-3951160?ie=UTF8&qid=1169382730&sr=8-1

      <table border="0" cellspacing="0">
        <tr>
          <th scope="col" colspan="2">価格(コンディション別)</th>
        </tr>
        <tr>

          <td scope="col" class="condition" style="padding-top: 5px;">参考価格:</td>
          <td scope="col" class="listprice" style="padding-top: 5px;">¥ 1,470</td>
        </tr>
<tr><td class="condition" style="font-weight: bold;"><a href="/gp/offer-listing/410466202X/sr=8-1/qid=1169382730/ref=olp_pg_used/503-4659305-3951160?ie=UTF8&coliid=&startIndex=0&qid=1169382730&sr=8-1&seller=&colid=&condition=used">ユーズド商品</a>:</td><td class="lowprice">点: <a href="/gp/offer-listing/410466202X/sr=8-1/qid=1169382730/ref=olp_pg_used/503-4659305-3951160?ie=UTF8&coliid=&startIndex=0&qid=1169382730&sellerID=&sr=8-1&colid=&condition=used" class="price">¥ 950</a>より</a></td></tr><tr><td class="condition" style="font-weight: bold;"><a href="/gp/offer-listing/410466202X/sr=8-1/qid=1169382730/ref=olp_pg_new/503-4659305-3951160?ie=UTF8&coliid=&startIndex=0&qid=1169382730&sr=8-1&seller=&colid=&condition=new">新品</a>:</td><td class="lowprice">点: <a href="/gp/offer-listing/410466202X/sr=8-1/qid=1169382730/ref=olp_pg_new/503-4659305-3951160?ie=UTF8&coliid=&startIndex=0&qid=1169382730&sellerID=&sr=8-1&colid=&condition=new" class="price">¥ 1,470</a>より</a></td></tr>        <tr>

	      <td colspan="2" class="sellyourshere">
	        <span class="tiny">この商品を売りたい!</span>
            <a href="http://s1.amazon.co.jp/exec/varzea/sdp/sai-condition/410466202X/sr=8-1/qid=1169382730/ref=sdp-sell-p/503-4659305-3951160?%5Fencoding=UTF8&coliid=&qid=1169382730&sr=8-1&colid="><img src="http://ec1.images-amazon.com/images/G/09/x-locale/nav2/dp/tile-sell-here-blue._V45731619_.gif" width="143" align="absmiddle" height="17" border="0" /></a>
	      </td>
        </tr>
      </table>

この td scope は意味が通らずおかしいと思います。 (名無しさん)

メモ

[10] ASP ???????? (2007-02-18 11:50:12 +09:00 版) http://msdn.microsoft.com/library/ja/default.asp?url=/library/ja/jpiis/iishelp/iis/htm/asp/iiwaobu.asp (名無しさん)

[13] テーブルとアクセシビリティ -- ごく簡単なHTMLの説明 (2002-02-06 版) http://www.kanzaki.com/docs/html/tbl-access.html (名無しさん)

[14] Web Applications 1.0 r5691 Change th.scope to be limited to known values. ( (2010-12-01 09:13:00 +09:00 版)) http://html5.org/tools/web-apps-tracker?from=5690&to=5691

[15] Merge the two table cell interfaces together · whatwg/html@e383ae2 (2016-04-27 17:17:13 +09:00 版) https://github.com/whatwg/html/commit/e383ae23776362cafb2fb4bbba70c8c9080d4b0f

[16]

8月23日からタイ標準時を導入 | チエンマイブログ日々雑感 ( (2016-06-03 22:49:04 +09:00)) http://payap.net/blog/2008/08/8%E6%9C%8823%E6%97%A5%E3%81%8B%E3%82%89%E3%82%BF%E3%82%A4%E6%A8%99%E6%BA%96%E6%99%82%E3%82%92%E5%B0%8E%E5%85%A5

<table id="wp-calendar">
<caption>2008年8月</caption>
<thead>
<tr>
<th scope="col" title="日曜日">日</th>
<th scope="col" title="月曜日">月</th>
<th scope="col" title="火曜日">火</th>
<th scope="col" title="水曜日">水</th>
<th scope="col" title="木曜日">木</th>
<th scope="col" title="金曜日">金</th>
<th scope="col" title="土曜日">土</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3" id="prev"><a href="http://payap.net/blog/2008/07/">« 7月</a></td>
<td class="pad"> </td>
<td colspan="3" id="next"><a href="http://payap.net/blog/2008/09/">9月 »</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="5" class="pad"> </td><td>1</td><td>2</td>

[17] HTML4/CSS2 Accessibility Recommendations (2017-05-23 00:45:03 +09:00) https://www.w3.org/WAI/PF/guide.html#TABLE

[18] Editorial: always state invalid value default (GloverDonovan著, 2018-03-05 13:36:29 +09:00) https://github.com/whatwg/html/commit/7e941ae96b264d4743ea0afac00c3b3209ab0cde