[all that's jazz][wag][wag Accessibility セミナー]
Welcome(0) || Tag-SiteMap(9) || リスト - 構造(b) || フォーム - 構造(b)
指定範囲が表構造である事を示す要素です。
「表」は同じ性質を持つデータを繰り返し示し、その関係や全体像を示す際に使用するものです。
まずは「表」でなければならないのかどうか、別の形式で表現できないかどうかを吟味する必要があるでしょう。
人の思考は例えば、面的なものでもまず目を惹くものから順に線形上に置き換えます。立体ならば、ここを通り、あそこを曲がり、到着するなどとやはり線形上に置き換えます。線形上なものが一番理解可能なのですから、対比する必要性がないものはテーブルはなるべく使わない方が理解されやすいと考えた方が無難でしょう。
音声読み上げではテーブル枠の中を選択し、コピー＆ペーストでメモ帳、エディタに貼り付けた状態が読み上げ順になります。
| 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>までメモリーに溜め、ブラウザ内部でそれぞれのセルの適切な大きさを解釈し、表示するため、ページを開いてもしばらく画面が表示されないなどの不都合も生じてきます。
その辺を十分踏まえた上、テーブルは使用すべきです。そして、最大一画面ないに収まる、それぞれのデータに対応する見出しセルとの比較が容易である環境を提供すべきです。
表の構造や意味などの概要を記述します
この概要は視覚的な表現が出来ない環境（音声、点字など）に利用されます。
表全体の横幅を「ピクセル数」あるいは「パーセンテージ(%)」で指定します。
表全体を囲む枠の太さを「ピクセル数」で指定します。
外枠のうち、上下左右どの枠を表示させるのか指定します。指定値は以下の通り。
表の中のセルを区切る線のうち、どの線を表示するか指定します。指定値は以下の通り。
外枠とセル、セルとセルの間隔を「ピクセル数」または「パーセンテージ(%)」で指定します。
セルの内容とセルの枠との間隔（パディング）を「ピクセル数」または「パーセンテージ(%)」で指定します。
表のタイトルや説明文を付けるための要素です。
table要素ないの一番先頭部に一回のみ配置できます。
通常は表の上部中央に表示されます。配置を変えたい場合はスタイルシートのcaption-side :にて設定します。
表の横一列（一行）分を含む要素。子要素にはth要素、td要素のみ配置可能です。
グループに含まれる各セル内のデータの行揃えを指定します。指定値は以下の通り。
グループに含まれる各セル内のデータの縦方向の配置位置を指定します。指定値は以下の通り。
align属性で「char」を指定された場合、位置を揃える文字を指定します。初期値はlang属性で示された言語での小数点を表す文字。日本語ならばピリオド(.)です。
align属性で「char」を指定された場合、セルの端（初期値は左端）からchar属性で指定した文字までの位置を「ピクセル数」あるいは「パーセンテージ(%)」で指定します。セルの中にchar属性で指定した文字が含まれていない場合、末尾がchar属性で指定した文字の位置の直前に揃えられます。
そのセルの内容がデータである場合に使用する要素です。表の形態により、明確に見出しと判断できない場合はこの要素を使用して下さい。
下方向に指定したセル数分の領域を持つセルにする場合指定します。初期値は1です。値として、0を指定するとそのセル以降同じグループ（thead要素、tbody要素、tfoot要素）で下方向すべてのセルがひとつの領域を持つセルとなります。
右方向に指定したセル数分の領域を持つセルにする場合指定します。初期値は1です。値として、0を指定するとそのセル以降同じグループ（colgrop要素）で右方向すべてのセルがひとつの領域を持つセルとなります。
rowspan属性、colspan属性は複雑な表を見せられる特徴がありますが、スクリプトなどのDOMを使い、再利用する際、複雑なプログラムを必要とします。セルの連結はなるべく使わず、シンプルな表で表示させるのが望ましいのかも知れません。
このセルの見出しとなっているヘッダセルのid属性の値を指定します。スペースで区切り、複数のヘッダセルのid属性の値を指定も可能です。この属性は主に音声で表現されるブラウザで、各データセルの内容を読み上げる前に、対応するヘッダセルを読み上げるなどの目的で使用されます。
| 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="位置を揃える文字までの距離"
そのセルの内容が列、行の見出しである場合に使用する要素です。
ヘッダセルの内容を簡略化した短い文を指定します。音声で表現されるブラウザで、各データセルの内容を読み上げる際に、対応するヘッダセルを読み上げる時に繰り返し、長い見出しを読むのではなく、ここで指定された身近な文を読み上げます。また、表を表示する際、十分な表示領域がない場合、この属性が利用されるともされています。
ヘッダセルの見出しの対象となるデータセルの範囲を指定します。表が単純な場合はtd要素headers属性の代わりに利用する事が出来ます。指定値は以下の通り。
ヘッダセルに対し、分類名を付けます。「カンマ(,)」で区切り、複数の分類名を指定する事も可能です。主に音声で表現されるブラウザで利用され、headers属性、scope属性によって関連づけられたデータセルを読む場合に分類名を付与して読み上げられます。
| 2002.08.07 | ||
|---|---|---|
| 食費 | 交通費 | |
| 札幌 | 3000円 | 2000円 |
先のheadersの例で言えば、旅行日程などで、日付、場所、費用などを記載した時に見出しとしては「2002.08.07」これに日付という分類を当てはめ、「札幌」これに場所という分類を当てはめ、「食費」これに費用という分類を当てはめるとそのデータ部で「3000円」とあり、それぞれに関連づけされていれば、日付 2002.08.07 場所 札幌 費用 食費 3000円と読み上げられます。
以下はtr要素参照
align="行揃え"
valign="縦方向の位置揃え"
char="位置を揃える文字"
charoff="位置を揃える文字までの距離"
以下はtd要素参照
rowspan="下方向の連結セル数"
colspan="右方向の連結セル数"
表の縦列を構造的な意味においてグループ化する要素です。span属性、または子要素としてcol要素を使用し、グループ化させる縦列を指定します。
table要素内でcaption要素より後、thead要素より前に配置します。
ブラウザにも依りますが、この要素で各縦列の幅を指定する事により、すべての表データがロードされるのを待たずに横一列ずつ表示させる事も可能となります。
列グループ化とは、男女の人口比があるとして、男の人口、女の人口をグループ化させ、男女合計を独立させた列にする事により表におけるそれぞれの縦列の意味合いを分かり易くさせる意図があります。地域分けでも有効に使う事が出るでしょう。
| 男 | 女 | 合計 |
|---|---|---|
| 10,000 | 10,000 | 20,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>
グループ化する縦列の数を1以上の整数で指定します。指定がない場合は1が指定された状態となります。子要素にcol要素がある場合はこの属性は無視されます。
グループに含まれている各縦列のデフォルトの幅を「ピクセル数」あるいは「パーセンテージ(%)」、比率を表す「アスターリスク(*)」の他、必要最小限の幅をあらわす「0*」で指定します。子要素のcol要素で幅が指定されている場合はそちらが優先されます。
以下はtr要素参照
align="行揃え"
valign="縦方向の位置揃え"
char="位置を揃える文字"
charoff="位置を揃える文字までの距離"
以下はtd要素参照
rowspan="下方向の連結セル数"
colspan="右方向の連結セル数"
表の縦列に対し、属性やスタイルシートを共有させ、まとめて設定する要素です。colgroup要素とは違い、構造的にグループ化させるものではありません。
ブラウザにも依りますが、この要素で各縦列の幅を指定する事により、すべての表データがロードされるのを待たずに横一列ずつ表示させる事も可能となります。
縦列の数を1以上の整数で指定します。指定がない場合は1が指定された状態となります。
以下はcolgroup要素参照
width="縦列の幅"
以下はtr要素参照
align="行揃え"
valign="縦方向の位置揃え"
char="位置を揃える文字"
charoff="位置を揃える文字までの距離"
以下はtd要素参照
rowspan="下方向の連結セル数"
colspan="右方向の連結セル数"
表の本体部をグループ化させる要素です。この要素を指定する事により、スタイルシートにて、内容をスクロール表示する事も可能になります。（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="右方向の連結セル数"
表のヘッダ部をグループ化させる要素です。
この要素を指定する事により、スタイルシートにて、複数ページに渡る長い表を印刷する場合、各ページにヘッダを印刷できる機能もあるようですが、残念ながら、対応ブラウザはほとんどないようです。
以下はtr要素参照
align="行揃え"
valign="縦方向の位置揃え"
char="位置を揃える文字"
charoff="位置を揃える文字までの距離"
以下はtd要素参照
rowspan="下方向の連結セル数"
colspan="右方向の連結セル数"
表のフッター部をグループ化させる要素です。
フッターとは例えば予算表などで最後に合計が記される箇所にあたります。
この要素を指定する事により、スタイルシートにて、複数ページに渡る長い表を印刷する場合、各ページにヘッダを印刷できる機能もあるようですが、残念ながら、対応ブラウザはほとんどないようです。
この要素を使用する際は必ずthead要素とtbody要素の間に記述するようになっています。これは長さが定まらない本体よりも先にフッター部分を表示させるためですが、未対応ブラウザではそのまま本体より上に表示されてしまいます。
以下はtr要素参照
align="行揃え"
valign="縦方向の位置揃え"
char="位置を揃える文字"
charoff="位置を揃える文字までの距離"
以下はtd要素参照
rowspan="下方向の連結セル数"
colspan="右方向の連結セル数"
|
|
A8.net
|ＴＧ−アフィリエイトプログラム|アクセストレード|LinkShare(リンクシェア)
|
バリューコマース|TrustClick
|
|
|
|
|
|
||各ショップお勧め品
