テーブル（表）のタイトル・説明文の詳細情報「details要素」
HTMLでtable（テーブル・表）のタイトル・説明文の追加情報をユーザー側で表示・非表示を選択できる「details要素」について説明します。
▼ 【広告】成果に費用発生型 ▼
A8.net
「detail（ディテール）」の意味は、「細部」「詳細」が挙げられ、「details要素」は、追加情報をディスクロージャー・ウィジット（ユーザー側の操作で表示・非表示の切り替え）を表します。
マークアップ方法・表示例
マークアップ方法は、「summary要素」（サマリー＝要約・概要）に要約を入れて、次に詳細情報を記述します。
尚、「details要素」は、未だブラウザで実装されておらず、「ブラウザ表示」上は、下記のように表示されます。
（時点）
ＨＴＭＬソース
<table>
<caption>
<strong>支店別の従業員数と販売数</strong>
<details>
<summary>表の見方</summary>
<p>下記の表は、2015年7月時点の支店別従業員数と、同年7月度の販売数を示しています。</p>
</details>
</caption>
<tr>
<th rowspan="2">支店名</th><th rowspan="2">従業員数</th><th colspan="3">販売数</th>
</tr>
<tr>
<th>Ａ商品</th><th>Ｂ商品</th><th>Ｃ商品</th>
</tr>
<tr>
<td>函館</td>
<td class="list">10人</td>
<td class="list">30個</td>
<td class="list">20個</td>
<td class="list">10個</td>
</tr>
<tr>
<td>仙台</td>
<td class="list">20人</td>
<td class="list">60個</td>
<td class="list">40個</td>
<td class="list">20個</td>
</tr>
<tr>
<td>大阪</td>
<td class="list">30人</td>
<td class="list">90個</td>
<td class="list">60個</td>
<td class="list">30個</td>
</tr>
<tr>
<td>合計</td>
<td class="list">60人</td>
<td class="list">180個</td>
<td class="list">120個</td>
<td class="list">60個</td>
</tr>
</table>
ＣＳＳソース
table,th,td {
border:solid 1px black;
}
td.list {
border:solid 1px black;
text-align: right;
}
ブラウザ表示
| 支店名 | 従業員数 | 販売数 | ||
|---|---|---|---|---|
| Ａ商品 | Ｂ商品 | Ｃ商品 | ||
| 函館 | 10人 | 30個 | 20個 | 10個 |
| 仙台 | 20人 | 60個 | 40個 | 20個 |
| 大阪 | 30人 | 90個 | 60個 | 30個 |
| 合計 | 60人 | 180個 | 120個 | 60個 |
上記の表の「▶表の見方」の部分を１回クリック（タップ）してみて下さい。
表の詳細情報が表示されます。
もう一度クリックしますと、非表示になります。
以上、HTMLでtable（テーブル・表）のタイトル・説明文の詳細情報をユーザー側で表示・非表示を選択できる「details要素」について説明しました。
ご覧頂きありがとうございます。
公開日：2015年8日3日
▼ 【広告】サイト･SNSを収益化 ▼
A8.net無料会員募集！
ＨＴＭＬ５ に戻る
ホームページ作成方法 TOPに戻る