Click here to visit our sponsor

ECサイトのお勧め商品カタログ|映画好きのBS/CSガイド

Webアクセシビリティ: テーブル(表)-構造

テーブル(表)-構造: 本論へ


テーブル(表)-構造 本論

TABLE テーブル

指定範囲が表構造である事を示す要素です。

「表」は同じ性質を持つデータを繰り返し示し、その関係や全体像を示す際に使用するものです。

まずは「表」でなければならないのかどうか、別の形式で表現できないかどうかを吟味する必要があるでしょう。

人の思考は例えば、面的なものでもまず目を惹くものから順に線形上に置き換えます。立体ならば、ここを通り、あそこを曲がり、到着するなどとやはり線形上に置き換えます。線形上なものが一番理解可能なのですから、対比する必要性がないものはテーブルはなるべく使わない方が理解されやすいと考えた方が無難でしょう。

音声読み上げではテーブル枠の中を選択し、コピー&ペーストでメモ帳、エディタに貼り付けた状態が読み上げ順になります。

正しい並び順
1
2
3
4
5
6

上記例は1 2 3 4 5 6と読み上げます。

間違った並び順
1
4
2
5
3
6

上記例は1 4 2 5 3 6と読み上げます。

レイアウトとしてテーブルを使用する場合はその読み上げ順に十分配慮する必要があります。

また、大きなレイアウト用テーブルなどはブラウザは<table>を見付けると</table>までメモリーに溜め、ブラウザ内部でそれぞれのセルの適切な大きさを解釈し、表示するため、ページを開いてもしばらく画面が表示されないなどの不都合も生じてきます。

その辺を十分踏まえた上、テーブルは使用すべきです。そして、最大一画面ないに収まる、それぞれのデータに対応する見出しセルとの比較が容易である環境を提供すべきです。

属性

summary="概要"

表の構造や意味などの概要を記述します
この概要は視覚的な表現が出来ない環境(音声、点字など)に利用されます。

以下の属性は本来「文書の見栄え」に相当するものでスタイルシートを使用すべきですが、スタイルシートの実装の遅れにより、使用やむなしとしてHTML4.0勧告で正式に採用されたものです。
width="幅"

表全体の横幅を「ピクセル数」あるいは「パーセンテージ(%)」で指定します。

border="外枠の太さ"

表全体を囲む枠の太さを「ピクセル数」で指定します。

frame="外枠の表示形式"

外枠のうち、上下左右どの枠を表示させるのか指定します。指定値は以下の通り。

rules="セルを区切る線の表示形式"

表の中のセルを区切る線のうち、どの線を表示するか指定します。指定値は以下の通り。

cellspacing="セルの間隔"

外枠とセル、セルとセルの間隔を「ピクセル数」または「パーセンテージ(%)」で指定します。

cellpadding="セルのパディング"

セルの内容とセルの枠との間隔(パディング)を「ピクセル数」または「パーセンテージ(%)」で指定します。

このページのトップへ戻る

CAPTION テーブルの表題

表のタイトルや説明文を付けるための要素です。

table要素ないの一番先頭部に一回のみ配置できます。

通常は表の上部中央に表示されます。配置を変えたい場合はスタイルシートのcaption-side :にて設定します。

このページのトップへ戻る

TR テーブル行

表の横一列(一行)分を含む要素。子要素にはth要素、td要素のみ配置可能です。

属性

align="行揃え"

グループに含まれる各セル内のデータの行揃えを指定します。指定値は以下の通り。

valign="縦方向の位置揃え"

グループに含まれる各セル内のデータの縦方向の配置位置を指定します。指定値は以下の通り。

char="位置を揃える文字"

align属性で「char」を指定された場合、位置を揃える文字を指定します。初期値はlang属性で示された言語での小数点を表す文字。日本語ならばピリオド(.)です。

charoff="位置を揃える文字までの距離"

align属性で「char」を指定された場合、セルの端(初期値は左端)からchar属性で指定した文字までの位置を「ピクセル数」あるいは「パーセンテージ(%)」で指定します。セルの中にchar属性で指定した文字が含まれていない場合、末尾がchar属性で指定した文字の位置の直前に揃えられます。

このページのトップへ戻る

TD テーブル・データ・セル

そのセルの内容がデータである場合に使用する要素です。表の形態により、明確に見出しと判断できない場合はこの要素を使用して下さい。

属性

rowspan="下方向の連結セル数"

下方向に指定したセル数分の領域を持つセルにする場合指定します。初期値は1です。値として、0を指定するとそのセル以降同じグループ(thead要素、tbody要素、tfoot要素)で下方向すべてのセルがひとつの領域を持つセルとなります。

colspan="右方向の連結セル数"

右方向に指定したセル数分の領域を持つセルにする場合指定します。初期値は1です。値として、0を指定するとそのセル以降同じグループ(colgrop要素)で右方向すべてのセルがひとつの領域を持つセルとなります。

rowspan属性、colspan属性は複雑な表を見せられる特徴がありますが、スクリプトなどのDOMを使い、再利用する際、複雑なプログラムを必要とします。セルの連結はなるべく使わず、シンプルな表で表示させるのが望ましいのかも知れません。

headers="関連するヘッダセルのid"

このセルの見出しとなっているヘッダセルのid属性の値を指定します。スペースで区切り、複数のヘッダセルのid属性の値を指定も可能です。この属性は主に音声で表現されるブラウザで、各データセルの内容を読み上げる前に、対応するヘッダセルを読み上げるなどの目的で使用されます。

headersの使い方
2002.08.07

食費交通費
札幌3000円2000円

例 : 「3000円」は「2002.08.07」と「食費」と「札幌」を見出しに持つデータである場合、使用します。以下の例では「2002.08.07」にid="date"、「食費」にid="food"、「札幌」ににid="place"を設定しているので、「3000円」はheaders="date food place"となります。

以下はtr要素参照
align="行揃え"
valign="縦方向の位置揃え"
char="位置を揃える文字"
charoff="位置を揃える文字までの距離"

このページのトップへ戻る

TH テーブル・ヘッダー・セル

そのセルの内容が列、行の見出しである場合に使用する要素です。

属性

abbr="ヘッダセルの内容を短くしたもの"

ヘッダセルの内容を簡略化した短い文を指定します。音声で表現されるブラウザで、各データセルの内容を読み上げる際に、対応するヘッダセルを読み上げる時に繰り返し、長い見出しを読むのではなく、ここで指定された身近な文を読み上げます。また、表を表示する際、十分な表示領域がない場合、この属性が利用されるともされています。

scope="ヘッダセルの対象となるデータセルの範囲"

ヘッダセルの見出しの対象となるデータセルの範囲を指定します。表が単純な場合はtd要素headers属性の代わりに利用する事が出来ます。指定値は以下の通り。

axis="ヘッダセルの分類名"

ヘッダセルに対し、分類名を付けます。「カンマ(,)」で区切り、複数の分類名を指定する事も可能です。主に音声で表現されるブラウザで利用され、headers属性、scope属性によって関連づけられたデータセルを読む場合に分類名を付与して読み上げられます。

axisの使い方
2002.08.07

食費交通費
札幌3000円2000円

先のheadersの例で言えば、旅行日程などで、日付、場所、費用などを記載した時に見出しとしては「2002.08.07」これに日付という分類を当てはめ、「札幌」これに場所という分類を当てはめ、「食費」これに費用という分類を当てはめるとそのデータ部で「3000円」とあり、それぞれに関連づけされていれば、日付 2002.08.07 場所 札幌 費用 食費 3000円と読み上げられます。

以下はtr要素参照
align="行揃え"
valign="縦方向の位置揃え"
char="位置を揃える文字"
charoff="位置を揃える文字までの距離"

以下はtd要素参照
rowspan="下方向の連結セル数"
colspan="右方向の連結セル数"

このページのトップへ戻る

COLGROUP テーブルの列グループ化

表の縦列を構造的な意味においてグループ化する要素です。span属性、または子要素としてcol要素を使用し、グループ化させる縦列を指定します。

table要素内でcaption要素より後、thead要素より前に配置します。

ブラウザにも依りますが、この要素で各縦列の幅を指定する事により、すべての表データがロードされるのを待たずに横一列ずつ表示させる事も可能となります。

列グループ化とは、男女の人口比があるとして、男の人口、女の人口をグループ化させ、男女合計を独立させた列にする事により表におけるそれぞれの縦列の意味合いを分かり易くさせる意図があります。地域分けでも有効に使う事が出るでしょう。

COLGROUPの使い方
合計
10,00010,00020,000

ソース

<table summary="COLGROUPの使い方" border="1" width="50%">
<caption>COLGROUPの使い方</caption>
<colgroup span="2"></colgroup>
<colgroup></colgroup>
<tr>
<th abbr="男">男</th><th abbr="女">女</th><th abbr="合計">合計</th>
</tr>
<tr>
<td>10,000</td><td>10,000</td><td>20,000</td>
</tr>
</table>

属性

span="グループ化する縦列数"

グループ化する縦列の数を1以上の整数で指定します。指定がない場合は1が指定された状態となります。子要素にcol要素がある場合はこの属性は無視されます。

width="縦列の幅"

グループに含まれている各縦列のデフォルトの幅を「ピクセル数」あるいは「パーセンテージ(%)」、比率を表す「アスターリスク(*)」の他、必要最小限の幅をあらわす「0*」で指定します。子要素のcol要素で幅が指定されている場合はそちらが優先されます。

以下はtr要素参照
align="行揃え"
valign="縦方向の位置揃え"
char="位置を揃える文字"
charoff="位置を揃える文字までの距離"

以下はtd要素参照
rowspan="下方向の連結セル数"
colspan="右方向の連結セル数"

このページのトップへ戻る

COL テーブルの列

表の縦列に対し、属性やスタイルシートを共有させ、まとめて設定する要素です。colgroup要素とは違い、構造的にグループ化させるものではありません。

ブラウザにも依りますが、この要素で各縦列の幅を指定する事により、すべての表データがロードされるのを待たずに横一列ずつ表示させる事も可能となります。

属性

span="グループ化する縦列数"

縦列の数を1以上の整数で指定します。指定がない場合は1が指定された状態となります。

以下はcolgroup要素参照
width="縦列の幅"

以下はtr要素参照
align="行揃え"
valign="縦方向の位置揃え"
char="位置を揃える文字"
charoff="位置を揃える文字までの距離"

以下はtd要素参照
rowspan="下方向の連結セル数"
colspan="右方向の連結セル数"

このページのトップへ戻る

TBODY テーブル・ボディ

表の本体部をグループ化させる要素です。この要素を指定する事により、スタイルシートにて、内容をスクロール表示する事も可能になります。(Netscape 6 Mozilla)


tbody { overflow : auto; height : 100px; }
tr { height : auto; } 
<--// Windows IEではtbody要素の高さがtr要素の高さになってしまう為、
  その回避としてtr要素も設定します。//-->

HTML4.01ではtable要素には必ずひとつ以上のtbody要素を配置するようになっていますが、thead要素、tfoot要素がなく、tbody要素がひとつのみの場合、省略できる事となっています。

以下はtr要素参照
align="行揃え"
valign="縦方向の位置揃え"
char="位置を揃える文字"
charoff="位置を揃える文字までの距離"

以下はtd要素参照
rowspan="下方向の連結セル数"
colspan="右方向の連結セル数"

このページのトップへ戻る

THEAD テーブル・ヘッド

表のヘッダ部をグループ化させる要素です。

この要素を指定する事により、スタイルシートにて、複数ページに渡る長い表を印刷する場合、各ページにヘッダを印刷できる機能もあるようですが、残念ながら、対応ブラウザはほとんどないようです。

以下はtr要素参照
align="行揃え"
valign="縦方向の位置揃え"
char="位置を揃える文字"
charoff="位置を揃える文字までの距離"

以下はtd要素参照
rowspan="下方向の連結セル数"
colspan="右方向の連結セル数"

このページのトップへ戻る

TFOOT テーブル・フット

表のフッター部をグループ化させる要素です。

フッターとは例えば予算表などで最後に合計が記される箇所にあたります。

この要素を指定する事により、スタイルシートにて、複数ページに渡る長い表を印刷する場合、各ページにヘッダを印刷できる機能もあるようですが、残念ながら、対応ブラウザはほとんどないようです。

この要素を使用する際は必ずthead要素とtbody要素の間に記述するようになっています。これは長さが定まらない本体よりも先にフッター部分を表示させるためですが、未対応ブラウザではそのまま本体より上に表示されてしまいます。

以下はtr要素参照
align="行揃え"
valign="縦方向の位置揃え"
char="位置を揃える文字"
charoff="位置を揃える文字までの距離"

以下はtd要素参照
rowspan="下方向の連結セル数"
colspan="右方向の連結セル数"

このページのトップへ戻る

2002-08-09 著作
Copyright ©2003-2013 問い合わせ. All Rights Reserved
[all that's jazz][wag ひょうきん者]
Netscape 6.* Mozilla(ja) だと「表示」→「スタイルシートを使う」で画面表示を変更できます。
Netscape Communicator 4.* は簡易版のスタイルシートを適用しています。
このページのトップへ戻る