「みんなが使えるホームページの作り方」の解説（その1）(6)

6. テーブルに必要とされる配慮

テーブルは、表組みの情報を表現する際に用いられます。また、それに加えてページ内の情報をレイアウトするために多用されています。テーブルを使った表現は、視覚的に分かりやすい反面、音声で読んだ場合に非常に把握しづらいという特徴があり、作成する際に配慮が必要です。本編では配慮の方法と注意点を解説しています。

ページ内に配置される表組みの情報のイメージ
ブラウザのキャプチャ画像

●表組みの情報を表現する場合: 本編の全ての項を参照してください。
●テーブルを使って情報をレイアウトする場合: 特に「音声環境での読み上げ順に注意する」を参照してください。

市販のホームページ作成ソフトの中には、制作者が注意をしないと適切なテーブルを作成できないものがあります。制作する際や制作を依頼する際は、本編を参考に、音声で読んだ場合でも理解しやすい形式でテーブルを作成するよう心がけましょう。

＜本編の理解を深めるために＞

ブラウザでの表示イメージ
テーブルの見出し部分はthで、データ部分はtdでタグ付されている

■HTMLソースの例
<table border="1" width="90%" summary="身体障害者による情報通信機器の利用状況の表">
<caption>＜身体障害者の情報機器の利用率データ（2002年）＞</caption>
<thead>
　　<tr>
　　　　<th>　</th>
　　　　<th scope="col">視覚障害</th>
　　　　<th scope="col">聴覚障害</th>
　　　　・
　　　　・
　　</tr>
</thead>
<tbody>
　　<tr>
　　　　<th scope="row">パソコン</th>
　　　　<td>75.5%</td>
　　　　<td>84.7%</td>
　　　　・
　　　　・
　　</tr>
　　・
　　・
</tbody>
</table>

captionタグ：表のタイトルを指定します。
trタグ：表の横1列（1行）を構成するセルに指定します。
thタグ：ヘッダ（見出しのセル）に相当する部分に使用します。
tdタグ：データ（見出しに対する個々の情報のセル）に相当する部分に使用します。
thead、tbodyタグ：テーブルの行をグループ化する際に使用します。theadタグはヘッダを、tbodyタグはテーブルの本体部分を表します。
scope：見出しセルとデータの対応付けをするために使用します。見出しセルの対象となるデータの範囲を指定します。

＜その他本編の解説の補足＞

tfootタグ：テーブルの行をグループ化する際に使用します。tfootタグはフッダを表します。
colgroupタグ：テーブルの列がグループ化した構造であることを示す際に使用します。グループ化した列には、共通の見栄えなどを指定することができます。
headers：複雑なテーブルの場合に、見出しセルとデータの対応付けをするために使用します。セルの見出しであるヘッダセルを指定します。

ページの先頭に戻る

←前へ　目次へ