[16-2] table にタイトルをつけよう( caption要素 )
最終更新日:2017年10月31日 (初回投稿日:2011年06月20日)
今回は、テーブルにタイトルを付けてみましょう。
表にタイトルがあると、何の表なのか、ひと目でわかりますよね。
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属性」を使います。
- 関連記事
-
- [17-1] HTML5 の新要素でページ全体を組もう
- (ちょっとメモ)テーブルをレスポンシブ対応させるCSS
- [16-7] テーブルセルで使う scope属性と headers属性について
- [16-6] table縦列グループ化( colgroup, col )
- [16-5] table横列グループ化(thead, tbody, tfoot)
- [16-4] tableのセルの枠線を非表示にしよう(empty-cellsプロパティ)
- [16-3] table のセルを連結しよう(colspan属性・rowspan属性)
- [16-2] table にタイトルをつけよう( caption要素 )
- [16-1] table(表)を作ろう(まずは基本の table, tr, th, td)
- [15-7] リストでナビゲーション( dl要素・dt要素・dd要素)
- [15-6] リストでナビゲーション( li 要素を display で横に並べる)
- [15-5] リストでナビゲーション( li 要素を float で横に並べる)
- [15-4] リストマーカーを画像や任意のテキストに変更する方法
- [15-3] 説明リストを作ろう( dl要素・dt要素・dd要素)
- [15-2] 番号付きリストを作ろう( ol要素・li要素)
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク