Edit

Page

Page title:

Page body:

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

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

仕様書: [[HTML 4]]
- [CODE(HTMLa)[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] [Q[見出しこまが〜]]といいながらもなぜか [CODE(HTMLe)[td]]
要素にも存在しています。見出しでなくても見出しに準じるもの
(例えば「名前」列の各こま) に使うことが想定されているようです (例 >>7 参照)。

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

[8]

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

([[名無しさん]] [sage])

[[#comment]]

** 属性値型

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

:[CODE(HTML)[[[row]]]]:その[[行]]の残りのこま
:[CODE(HTML)[[[col]]]]:その[[列]]の残りのこま
:[CODE(HTML)[[[rowgroup]]]]:その[[行群]]の残りのこま
:[CODE(HTML)[[[colgroup]]]]:その[[列群]]の残りのこま

[[#comment]]

** 省略

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

[[#comment]]

** 他との関係

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

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

[[#comment]]

** 例

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

[7] 例: [CODE(HTMLa)[scope]] 属性を使ったやや複雑な例
[PRE(HTML)[
<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>
]PRE]

(HTML 4 仕様書より)

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

[11]
誤用例

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

>
[PRE(HTML bad example code)[

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

]PRE]

([[名無しさん]])

[12]
[CITE[Amazon.co.jp:新品およびユーズド: 東京番外地]] ([TIME[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>

>
[PRE(HTML bad example code)[
      <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>
]PRE]

この [CDOE(HTMLe)@en[[[td]]]] 
[CODE(HTMLa)@en[[[scope]]]] は意味が通らずおかしいと思います。
([[名無しさん]])

[[#comment]]

** メモ

[[#comment]]

* メモ

[10]
[CITE[ASP ????????]] ([CODE[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の説明 ([CODE[2002-02-06]] 版)
<http://www.kanzaki.com/docs/html/tbl-access.html>
([[名無しさん]])

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

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

[FIG(quote)[
[FIGCAPTION[
[16] [CITE@ja[8月23日からタイ標準時を導入 | チエンマイブログ日々雑感]]
( ([TIME[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>
]FIGCAPTION]

> <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/">&laquo; 7月</a></td>
> 		<td class="pad">&nbsp;</td>
> 		<td colspan="3" id="next"><a href="http://payap.net/blog/2008/09/">9月 &raquo;</a></td>
> 	</tr>
> 	</tfoot>
> 	<tbody>
> 	<tr>
> 		<td colspan="5" class="pad">&nbsp;</td><td>1</td><td>2</td>

]FIG]

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

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

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)