[16-2] table にタイトルをつけよう（ caption要素 ）

今回は、テーブルにタイトルを付けてみましょう。
表にタイトルがあると、何の表なのか、ひと目でわかりますよね。

HTMLでは、ちゃんとテーブルのタイトル用に <caption>要素が用意されています。
<caption>要素は <table>要素の子要素としてしか使えません。
caption って汎用性が高そうな名前だけど、テーブルのタイトルにしか使えない要素です。

使用する要素	<caption> 〜 </caption>

● 2017年10月、サンプルは本文内に記載し、それに伴い本文も書き直しました。
● 2016年4月、summary属性 の代わりに caption要素を使います を追加しました

<caption>要素は <table>要素の「最初の」子要素

<caption>要素は <table >要素の最初の子要素でなくてはなりません。<table >開始タグの直後に書きます。

<table>
<caption>テーブルのタイトル</caption>
  <tr>
    <th>table header</th>
    <th>table header</th>
    <th>table header</th>
  </tr>
  <tr>
    <td>table data</td>
    <td>table data</td>
    <td>table data</td>
  </tr>
  <tr>
    <td>table data</td>
    <td>table data</td>
    <td>table data</td>
  </tr>
</table>

これでブラウザのデフォルトでは、<table>の上にタイトルが表示されます。

テーブルのタイトル

table header	table header	table header
table data	table data	table data
table data	table data	table data

タイトルの 文字色や border は CSSで自由に変更します。

テーブルのタイトル

table header	table header	table header
table data	table data	table data
table data	table data	table data

サンプルの CSSです。

table#smp1 {
	width: 100%;
	margin:2em 0;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-spacing:0;
	}
table#smp1 caption {
	font-weight:bold;
	width:100%;
	border-bottom:1px dotted #ccc;
	margin-bottom:0.5em;
	text-align:center;
	color:#666;
	}
table#smp1 tr th,
table#smp1 tr td {  /*「,」で区切って複数のセレクタを指定しています*/
	border-bottom:1px solid #ccc;
	border-right: 1px solid #ccc;
	padding:.5em;
	}
table#smp1 tr th {
	background: #e6eaff;
	}

下にタイトルを付ける CSSの caption-sideプロパティ

デフォルトでは上に表示される <caption>要素ですが、表の下に表示もできます。

テーブルのタイトル

table header	table header	table header
table data	table data	table data
table data	table data	table data

HTMLソースは先ほどとまったく同じです。
<caption>要素は <table>開始タグの直後が定位置です。

CSSはこちら。<caption>要素の指定で caption-side: bottom と書くだけ。

table#smp2 caption {
	font-weight:bold;
	width:100%;
	border-top:1px dotted #ccc;  /*ボーダーの位置も上に変えてます*/
	margin-top:0.5em;  /*マージンも上に変えてます*/
	text-align:center;
	color:#666;
	caption-side: bottom  /*コレ*/
	}

HTML4、XHTML1 では <caption>要素に align属性というものがありまして、
<caption align="bottom">と書けば <table>の下にタイトルが表示されたのですが、コレ、HTML5から廃止になりました。
その代わりに、CSSのcaption-sideプロパティで指定することになりました。

昔（HTML4、XHTML1 の時代）は、見た目の装飾を HTMLの要素や属性でやっていたのを、HTML5 からは「HTMLは文書の構築、見た目の情報は CSS」と住み分ける方向で仕様を作っています。
ですので廃止される要素や属性は、見た目の指定をする役割だったものが多いんですね。

summary属性 の代わりに caption要素を使います

<table>要素に使える summary属性という属性というのもありまして、
<table summary="値のテキスト">
というカタチで使い、値のテキストには、そのテーブルの簡単な説明などを入れました。
これは音声ブラウザ（音声読み上げソフト）で読み上げて、ユーザが表組みを理解するために使われていました。

この summary属性、HTML5 から廃止になり、代わりに以下の方法が推奨されています。

• <caption>要素を使う
• <table>要素を <figure>要素に含め、<figcaption>要素で説明する
• <th>要素などテーブル上で工夫して、それ以上説明が必要ないようにする

もともと <caption>要素があるので、それで賄えばいいじゃないか、ということでしょうかね。

次回予告

次回は、テーブルのセル（th, td）を連結してみましょう。
セル（ <th> <td> ）に「rowspan属性」「colspan属性」を使います。