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

*作成日:2011-06-20
*更新日:「summary属性 の代わりに caption要素を使います」を追加しました

今日は、table にタイトルを付けてみましょう。
caption要素を使いますよ。
まずはこのように↓tableの上にタイトルをつけましょう。(下に付ける方法も後半で。)


これは↑プレビュー画像です。クリックでサンプルHTMLが開きます(別ウィンドウで開く) 。

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

サンプルのダウンロードはこちら

★サンプルは、前回(16-1)と同じです。
★上のサンプル画像をクリックすると、HTMLファイルが開きます。
★開いたHTMLのソースを見てもらえばOKですが、下記から一式をzipでダウンロードできます。
→本日のサンプル(sample16-1set.zip (3k))をダウンロード

★ブラウザでHTMLやCSSのソースを見るには…「ほんっとにはじめてのHTML-[14-1] ブラウザでソースを見る」をご覧ください

「caption要素」で tableのタイトルを付けよう

まずはcaption要素の入れ方。サンプルのHTMLソースを見てみましょう。

<table class="sample1">
<caption>テーブルのタイトル</caption>
  <tr>
    <th>th</th>
    <th>th</th>
    <th>th</th>
  </tr>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
</table>

このように caption要素は、必ず<table >開始タグのすぐ後に入れます。
最初の<tr>タグの直前です。
これでブラウザのデフォルトでは、tableの上にタイトル(caption要素)が表示されます。
こんなかんじになります。

このサンプルのように、タイトルに文字色やborderの指定をするにはCSSを使います。

サンプルのcaption要素のCSS指定は下記のとおりです。

table.sample1 caption {
	font-size: 90%;
	font-weight: bold;
	width: 100%;
	border-bottom: 1px dotted #6F87FF;
	margin-bottom: 10px;
	text-align: center;
	color: #6F87FF;
}

このサンプルでは、caption要素は「table.sample1 caption」と
「sample1」というclass名のtableのcaptionと特定して指定しています。

青バックの部分を注目してください。
点線(dotted)の下線(border-bottom)をつけて、下マージン(margin-bottom)を10pxに指定。
下マージン10pxは、表組との間隔。最初のtr要素までの間隔です。

テーブルの下にタイトルを付けるには「caption-side」プロパティ

デフォルトで上に表示されるcaptionを、表の下にもっていきましょう。

HTML4までの「caption要素」の「align」属性は、HTML5から使えません。
(HTML4, XHTML1では<caption align="bottom">と書けばtableの下に表示されました)
代わりに、CSSのcaption-sideプロパティで指定します。

HTMLソースは先ほどとまったく同じ。変わりません。
(caption要素は<table >開始タグのすぐ後、最初の<tr>タグの直前。ここがcaptionの定位置です)

captionを下に置くCSSソースはこちら。
caption要素の指定の中に「caption-side: bottom」と入れるだけです。

table.sample1 caption.btm {
	font-size: 90%;
	font-weight: bold;
	width: 100%;
	border-top: 1px dotted #6F87FF;
	border-bottom: none;
	margin-top: 10px;
	text-align: center;
	caption-side: bottom
}

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

*この項目はに追加しました

<table>要素に使える summary属性という属性があるんです。
summary属性は、

<table summary="値のテキスト">

というカタチで使い、値のテキストには、そのテーブルの簡単な説明(何のための表か)などを入れます。これは音声ブラウザ(音声読み上げソフト)で読み上げて、ユーザが表組みを理解するために使われます。

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

ただし、上の方法では音声ブラウザで表組みを理解するのに適さない場合には、summary属性を使ってもいいことになっています。
summary属性は、表組みの構造(例えば、何列・何行あるとか)を書いても良いことになっているので、そのような情報が必要なテーブルの場合には、summary属性を使います。
非視覚の環境で、表組みを見る前に説明があったほうがわかりやすい情報を、summary属性で書くということみたい。

いずれにしても、表組みにする必要が無いモノに <table>要素を使わないのが大事ですね。

次回予告

次回は、tableのセル(th, td)を連結してみましょう。
セル要素(th, td)に「rowspan」「colspan」という属性を使います。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

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