<table></table>
| ブラウザ |
|
|---|---|
| 分類 | フロー・コンテンツ / パルパブル・コンテンツ |
| 利用場所 | フロー・コンテンツが置ける場所 |
| 内容 | table要素の本文参照 |
内容の分かりにくい表に対しては、表の目的や構造に関する説明を入れておくことが推奨されています。
- それらの情報によって、コンテンツのアクセシビリティを高めることができます。（非視覚系のブラウザには特に有益な情報となります）
<table></table>
HTML5の仕様では、説明の入れ方として以下のような方法が提示されています。
表の前後に説明を入れる
table要素の外に説明文を配置するやり方です。
次の例では、表の前に説明文を入れています。
<p>表の説明文 ...</p>
<table border="1">
...
</table>
caption要素の中に説明文を入れる
caption要素の中に説明文を配置するやり方です。
次の例では、タイトルの後に説明文を入れています。（この場合は、タイトルの部分をstrong要素とするようです）
<table border="1">
<caption>
<strong>表のタイトル</strong>
<p>表の説明文 ...</p>
</caption>
...
</table>
figure要素の中で表の前後に説明文を入れる
figure要素内にtable要素を配置して、その前後に説明文を配置するやり方です。
次の例では、figure要素の中で表の前に説明文を入れています。（この場合は、タイトルの部分をfigcaption要素とします）
<figure>
<figcaption>表のタイトル</figcaption>
<p>表の説明文 ...</p>
<table border="1">
...
</table>
</figure>
figcaption要素の中に説明文を入れる
figure要素内にtable要素を配置して、figcaption要素の中に説明文を配置するやり方です。
次の例では、figcaption要素の中でタイトルの後に説明文を入れています。（この場合は、タイトルの部分をstrong要素とするようです）
<figure>
<figcaption>
<strong>表のタイトル</strong>
<p>表の説明文 ...</p>
</figcaption>
<table border="1">
...
</table>
</figure>
使用例
<figure>
<figcaption>
<strong>スコア表</strong>
<p>2列目にゲームの回数が入り、その左に山田さん、右に鈴木さんの得点数が入っています。</p>
</figcaption>
<table border="1">
<thead>
<tr>
<th id="yamada">山田太郎</th>
<th id="time">回数</th>
<th id="suzuki">鈴木花子</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="t1 yamada">3</td>
<th id="t1" headers="time">1</th>
<td headers="t1 suzuki">2</td>
</tr>
<tr>
<td headers="t2 yamada">2</td>
<th id="t2" headers="time">2</th>
<td headers="t2 suzuki">3</td>
</tr>
<tr>
<td headers="t3 yamada">3</td>
<th id="t3" headers="time">3</th>
<td headers="t3 suzuki">3</td>
</tr>
</tbody>
</table>
</figure>
- 表示例
-
スコア表 2列目にゲームの回数が入り、その左に山田さん、右に鈴木さんの得点数が入っています。
山田太郎 回数 鈴木花子 3 1 2 2 2 3 3 3 3