<table></table>
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | フロー・コンテンツ / パルパブル・コンテンツ |
| 利用場所 | フロー・コンテンツが置ける場所 |
| 内容 | table要素の本文参照 |
内容の分かりにくい表に対しては、表の目的や構造に関する説明を入れておくことが推奨されています。
- それらの情報によって、コンテンツのアクセシビリティを高めることができます。（非視覚系のブラウザには特に有益な情報となります）
<table></table>
HTMLの仕様書では、説明の記述方法として以下のようなやり方が提示されています。
表の前後に説明を入れる
table要素の外に説明文を記述するやり方です。
次の例では、表の前に説明文を入れています。
<p>表の説明文</p>
<table>
<tr>
<td>表の内容</td>
</tr>
</table>
caption要素の中に説明文を入れる
caption要素の中に説明文を記述するやり方です。
次の例では、タイトルの後に説明文を入れています。（タイトル部分はstrong要素でマークアップしています）
<table>
<caption>
<strong>表のタイトル</strong>
<p>表の説明文</p>
</caption>
<tr>
<td>表の内容</td>
</tr>
</table>
details要素の中に説明文を入れる
caption要素内にdetails要素を配置して、その中に説明文を記述するやり方です。
次の例では、タイトルの後にsummary要素の内容（この表について）が表示され、それをクリックすると説明文が表示されます。
<table>
<caption>
<strong>表のタイトル</strong>
<details>
<summary>この表について</summary>
<p>表の説明文</p>
</details>
</caption>
<tr>
<td>表の内容</td>
</tr>
</table>
figure要素の中で表の前後に説明文を入れる
figure要素内にtable要素を配置して、その前後に説明文を記述するやり方です。
次の例では、figure要素の中で表の前に説明文を入れています。（タイトル部分はfigcaption要素でマークアップしています）
<figure>
<figcaption>表のタイトル</figcaption>
<p>表の説明文</p>
<table>
<tr>
<td>表の内容</td>
</tr>
</table>
</figure>
figcaption要素の中に説明文を入れる
figure要素内にtable要素を配置して、figcaption要素の中に説明文を記述するやり方です。
次の例では、figcaption要素の中でタイトルの後に説明文を入れています。（タイトル部分はstrong要素でマークアップしています）
<figure>
<figcaption>
<strong>表のタイトル</strong>
<p>表の説明文</p>
</figcaption>
<table>
<tr>
<td>表の内容</td>
</tr>
</table>
</figure>
使用例
- この例では、次のスタイルシートを指定して表の境界線を表示しています。
-----
table, th, td {
border: 1px #000000 solid;
}
-----
<figure>
<figcaption>
<strong>スコア表</strong>
<p>2列目にゲームの回数が入り、左側に山田さん、右側に鈴木さんの得点数が入っています。</p>
</figcaption>
<table>
<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