ホームページ作成講座表にタイトルを付ける

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

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

<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>

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

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