≪ 目次　＜ 名前順要素一覧　［ 戻る ］　表の概説 ＞

バナー

中年おっちゃんでも出来た ウェブページ作成講座 with ? mark

TH要素 - ヘッダセル / TD要素 - データセル

Table Header cell
TH要素は、ヘッダセルを修飾し、要素の内容で表の縦列の見出しを記述します。
  • 要素の内容は、０個以上のブロック/インライン要素（Flow）です。
  • ブラウザは、TH要素とTD要素の表示を変える様に求められています。
  • ATTLISTの内容内容はTD要素と同じですので、割愛します。
Table Data cell
TD要素は、データセルを修飾し、要素の内容でセル内のデータを記述します。
  • 要素の内容は、０個以上のブロック/インライン要素（Flow）です。
  • ブラウザは、TH要素とTD要素の表示を変える様に求められています。

W3C → XHTML 1.0 → Multi-part XHTML file → DTDs → XHTML-1.0-Strict より

<!ELEMENT th       %Flow;>
<!ELEMENT td       %Flow;>
<!ATTLIST td
  %attrs;
  abbr        %Text;         #IMPLIED
  axis        CDATA          #IMPLIED
  headers     IDREFS         #IMPLIED
  scope       %Scope;        #IMPLIED
  rowspan     %Number;       "1"
  colspan     %Number;       "1"
  %cellhalign;
  %cellvalign;  >

abbr属性

abbr        %Text;         #IMPLIED

セルの内容の省略形を記述します。省略可。

Web Content Accessibility Guidelines 1.0 → Guideline 5. Create tables that transform gracefully. → 5.6 より

5.6 Provide abbreviations for header labels. [Priority 3]
For example, in HTML, use the "abbr" attribute on the TH element.

5.6 ヘッダラベルには、省略形を提供してください。[Priority 3]
例えば、HTMLでは、TH要素では abbr属性 を使用して下さい。

axis属性 , headers属性

  axis        CDATA          #IMPLIED
  headers     IDREFS         #IMPLIED

id属性とaxis属性を使用してセルの情報を与え、headers属性でセル内容の明細を知ることが出来ます。省略可。

使用例

表示例
51特性試験成績表　単位 ： [秒]
CT比
200:5		 電流整定値 [%]
150300500
レバー 10R相 50.5422.88 3.52
T相50.58 22.90 3.55

上の表を音声ブラウザが読み上げてもおそらく数字の羅列で、何を言っているか意味が分かりません。そこで、各セルを読み上げる時に、例えば、”整定、300%、レバー10、T相、動作、22.90”と読ませる為の指定です。

HTML記述
<table summary="51特性試験成績表" border="1">
<tr>
<th colspan="5" abbr="51試験成績表" id="b" axis="動作">
51特性試験成績表　単位 ： [秒]
</th>
</tr>
<tr>
<td colspan="2" rowspan="2">CT比<br >200:5</td>
<td colspan="3" id="st" axis="整定">電流整定値 [%]</td>
</tr>
<tr>
<td id="p1" axis="150%">150</td>
<td id="p2" axis="300%">300</td>
<td id="p3" axis="500%">500</td>
</tr>
<tr>
<td rowspan="2" id="l10" axis="レバー10">レバー 10</td>
<td id="r1" axis="R相">Ｒ相</td>
<td headers="st p1 l10 r1 b">50.54</td>
<td headers="st p2 l10 r1 b">22.88</td>
<td headers="st p3 l10 r1 b">3.52</td>
</tr>
<tr>
<td id="t1" axis="T相">T相</td>
<td headers="st p1 l10 t1 b">50.58</td>
<td headers="st p2 l10 t1 b">22.90</td>
<td headers="st p3 l10 t1 b">3.55</td>
</tr>
</table>

headers="st p2 l10 t1 b" と記述してあれば、

  1. st に対応するaxis値 "整定"
  2. p2 に対応するaxis値 "300%"
  3. l10 に対応するaxis値 "レバー10"
  4. t1 に対応するaxis値 "T相"
  5. b に対応するaxis値 "動作"
  6. セルの内容 "22.90"

と順に解釈して、、音声ブラウザは
整定、300%、レバー10、T相、動作、22.90
と読み上げてくれると思います。

scope属性

scope       %Scope;        #IMPLIED
<!-- Scope is simpler than headers attribute for common tables -->
<!ENTITY % Scope "(row|col|rowgroup|colgroup)">

単純な表の場合、axis/headers属性を使用しなくてもセル内容の明細を知ることが出来ます。省略可。

使用例

表示例
51G特性試験成績表
タップ
0.20.40.6
測定値0.2050.4020.603
HTML記述
<table summary="51G継電器特性試験成績表" border="1">
<caption>51G継電器特性試験成績表</caption>
<tr>
<td rowspan="2"></td><td colspan="3" scope="rowgroup">タップ</td>
</tr>
<tr>
<td scope="row">0.2</td><td scope="row">0.4</td><td scope="row">0.6</td>
</tr>
<tr>
<td scope="col">測定値</td><td>0.205</td><td>0.402</td><td>0.603</td>
 </tr>
</table>

と作成した表は、音声ブラウザは
タップ、0.2、測定値、0.205、タップ、0.4、測定値、0.402、････
と読み上げてくれると思います。

rowspan属性

rowspan     %Number;       "1"

セルを縦方向に連結します。省略時の値は "1"（連結無し）。

使用例

表示例
ABCD
134
HTML記述
<table summary="rowspanを使用しセルを縦方向に連結た表例" border="1">
<tr>
<td>A</td><td rowspan="2">B</td><td>C</td><td>D</td>
</tr>
<tr>
<td>1</td><td>3</td><td>4</td>
</tr>
</table>

colspan属性

colspan     %Number;       "1"

セルを横方向に連結します。省略時の値は "1"（連結無し）。

使用例

表示例
ABC
1234
HTML記述
<table summary="colspanを使用しセルを横方向に連結た表例" border="1">
<tr>
<td>A</td><td colspan="2">B</td><td>C</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
</table>

≪ 目次　＜ 名前順要素一覧　［ 戻る ］　Top ↑

Created：Jun 01, 2005 Updated：Oct.,25,2011 © by おっちゃん
Oct.,25,2011 全面更新