[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>要素があるので、それで賄えばいいじゃないか、ということでしょうかね。

次回予告

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

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

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

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

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2023/09 | 10
- - - - - 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
Archive
Profile

yuki★hata

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

メールフォームはこちら

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