表のタイトルを表示するには、<caption>を使用します。
<caption>と</caption>で囲んだテキストが表のタイトルとして設定され、表の上に中央揃えで表示されます。
入力する場所はどこでも良いのですが、わかりやすく<table>の下に入力するのが一般的です。
さっそく、<table>の下に表のタイトルを入力してみましょう。
タイトルは「時間割」とします。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>表の作成</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<table class="tableborder">
<caption>時間割</caption>
<tr>
<th>時間</th>
<th>教科</th>
<th>担任</th>
</tr>
<tr>
<td>一時間目</td>
<td>国語</td>
<td>西田</td>
</tr>
<tr>
<td>二時間目</td>
<td>数学</td>
<td>入部</td>
</tr>
<tr>
<td>三時間目</td>
<td>社会</td>
<td>野田</td>
</tr>
</table>
入力が完了したら、ブラウザで確認しましょう。
表の上に「時間割」のテキストが中央揃えで表示されていれば成功です。
[ブラウザでの表示例]
このように、<caption>を使うことによって表のタイトルを表示することができます。
データの追加
では、せっかくなので、もう少し表にデータを書き加えてみましょう。
「担任」の横に、「場所」の項目を追加します。
step.1
まずは<th>担任</th>の下に<th>場所</th>を付け加えましょう。
<th>教科</th>
<th>担任</th>
<th>場所</th>
step.2
次に、<td>西田</td>の下に<td>第1教室</td>を付け加えます。
<td>国語</td>
<td>西田</td>
<td>第1教室</td>
step.3
同じように<td>入部</td>の下に<td>第1教室</td>も追加します。
<td>数学</td>
<td>入部</td>
<td>第1教室</td>
step.4
さらに<td>野田</td>の下も同じように・・・
<td>社会</td>
<td>野田</td>
<td>第2教室</td>
これでOKです。ソースコードをまとめると、以下のようになります。
[HTMLの記述例]<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>表の作成</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<table class="tableborder">
<caption>時間割</caption>
<tr>
<th>時間</th>
<th>教科</th>
<th>担任</th>
<th>場所</th>
</tr>
<tr>
<td>一時間目</td>
<td>国語</td>
<td>西田</td>
<td>第1教室</td>
</tr>
<tr>
<td>二時間目</td>
<td>数学</td>
<td>入部</td>
<td>第1教室</td>
</tr>
<tr>
<td>三時間目</td>
<td>社会</td>
<td>野田</td>
<td>第2教室</td>
</tr>
</table>
入力が終わったらブラウザで確認してみましょう。
「場所」の項目が追加されていれば成功です。
次のページではこの表を元に、セルの結合を学習してみましょう。
覚えておきたいポイント
タイトルで表をわかりやすく
表にタイトルが記載されていると、何について書かれている表なのかひと目でわかります。
複雑な表を作成する場合には、できるだけタイトルを付けると利用者に理解してもらいやすくなります。
