表にタイトルを付ける

更新日:2018.06.30
  1. HOME
  2. ホームページ作成講座
  3. 表にタイトルを付ける

今度は、表に説明文を付けるタグを見ていきます。 何の表なのか記述しておくと、閲覧者が理解しやすいと思います。 captionタグを使って表題をつけることができます。

表にタイトルを付けるタグ

表に題(タイトル)を付けるタグをまず見ておきましょう。

<caption>~</caption>
表にタイトルを付けます。
capitonタグは、tableタグ内の最初に記述します。

<caption>~</caption>は、<table>の直下に置くことになります。 captionタグの中で段落タグ<p></p>等を使うことも可能です。

タイトルの付いた表のサンプル

では、タイトルの付いた表のサンプルを作ってみることにしましょう。

前のページで作ったlesson2.htmlを開いて、「lesson3.html」に名前を変更して保存して下さい。 そしてbody内に記述してあるtableタグの内部に、captionタグを追加してみましょう。

<table border="1">
<caption>買い物の明細</caption>
<thead>
 <tr>
  <th>商品名</th>
  <th>値段</th>
  <th>数量</th>
  <th>金額</th>
 </tr>
</thead>

<tbody>
 <tr>
  <td>クルミパン</td>
  <td>150円</td>
  <td>3</td>
  <td>450円</td>
 </tr>
 <tr>
  <td>サンドイッチ</td>
  <td>200円</td>
  <td>2</td>
  <td>400円</td>
 </tr>
</tbody>

<tfoot>
 <tr>
  <td>合計</td>
  <td>-</td>
  <td>5</td>
  <td>850円</td>
 </tr>
</tfoot>
</table>

ブラウザで表示したものが↓です。

表の上部に、表題が付いているのが分かると思います。

NINJABUTTON