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

最終更新日:2017年10月04日  (初回投稿日: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
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>要素があるので、それで賄えばいいじゃないか、ということでしょうかね。

次回予告

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

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.