ログイン
問題9

tableにはcaptionタグを使おう

この問題では、表のタイトルや説明を指定する要素であるcaptionタグについて学習していきます。 表関連のタグは多いですが、これらを適切な場面で指定することで検索エンジンに高く評価されやすくなります。 問題に挑戦して覚えていきましょう。

アイコン画像

本のアイコンcaptionタグとは

captionタグとは、表のタイトルや見出しをつける際に使用されるHTMLのタグです。
captionタグはtable開始タグの直後に1つだけ記述します。
テーブルに対するタイトルの表示位置はalign属性で指定が可能です。表の上部に表示したい場合は、「top」もしくは指定なし、表の下部に表示させたい場合は、「bottom」を指定します。どちらも自動的に中央寄せになります。
しかし、これらの属性は非推奨とされているので注意が必要です。

HTMLの問題に挑戦しよう!

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの第一歩となるでしょう。

問題9:tableにはcaptionタグを使おう

capationタグを使って表の見出しを作成してください。

見出し名は「忍者CODE料金表」としてください。

エディターのアイコンあらかじめエディタに書くコード

                <table border="1">
  <thead>
    <tr>
      <th>見出し部分</th>
      <th>見出し部分</th>
      <th>見出し部分</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容部分</td>
      <td>内容部分</td>
      <td>内容部分</td>
    </tr>
    <tr>
      <td>内容部分</td>
      <td>内容部分</td>
      <td>内容部分</td>
    </tr>
    <tr>
      <td>内容部分</td>
      <td>内容部分</td>
      <td>内容部分</td>
    </tr>
  </tbody>
</table>
¥HTML¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <table border="1">
  <caption>忍者CODE料金表</caption>
  <thead>
    <tr>
      <th>見出し部分</th>
      <th>見出し部分</th>
      <th>見出し部分</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容部分</td>
      <td>内容部分</td>
      <td>内容部分</td>
    </tr>
    <tr>
      <td>内容部分</td>
      <td>内容部分</td>
      <td>内容部分</td>
    </tr>
    <tr>
      <td>内容部分</td>
      <td>内容部分</td>
      <td>内容部分</td>
    </tr>
  </tbody>
</table>
¥HTML¥
            

コメントのアイコン解説

tableタグとtheadタグの間にcaptionタグを書きます。

captionタグ内に見出しとなるテキストを書けばOKです。
ログインして解答を見る

コメントのアイコン補足

captionタグはh1やh2などと同じ見出しタグになりますが、
文字の大きさは変わりません。
基本的に文字の大きさや太さを変更したい場合はCSSを使いましょう。
HTMLを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる