ログイン
問題8

tableにはtheadなどのグループ化タグを使おう

この問題では、tableタグを使って作成した表をグループ化するタグについて学習していきます。 ここで学習する3つのタグは、表の構造を明確化するためのHTMLタグです。 見た目に変化はありませんが、書いておく価値のあるタグなので問題を通して学習しておきましょう。

アイコン画像

本のアイコンthead、tbody、tfootタグについて

ここでは、それぞれのタグについて簡単に解説しておきます。

theadとは、「table head」の略で、表の見出しをグループ化する機能があります。
table要素で使用されるthタグは表の見出しを表していました。
それに対し、theadタグはそのth要素をグループ化して、表のヘッダー部分であることをブラウザに認識させます。

tbodyとは、「table body」の略で表の本体部分をグループ化する機能があります。
tbody要素もthead要素と同様に省略は可能ですが、使用したほうがより表の構造を明確にすることができます。
td要素は「表のデータ」を表していましたが、その中で表の本体に関係するモノをtbody要素で囲うことで表の本体のデータだということを明確にすることができます。

tfootとは、「table footer」の略で表のフッター部分をグループ化する機能があります。
tfootタグで囲った内容は、表のフッター部分であるということをブラウザに認識させることができます。

HTMLの問題に挑戦しよう!

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

問題8:tableにはtheadなどのグループ化タグを使おう

thead・tbody・tfootタグを使用して表の行をグループ分けしてみましょう。

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

                <table border="1">
  <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>
¥HTML¥
              

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

見た目の変化なし

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

              <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>
  </tbody>
  <tfoot>
    <tr>
      <td>フッター部分</td>
      <td>フッター部分</td>
      <td>フッター部分</td>
    </tr>
  </tfoot>
</table>
¥HTML¥
            

コメントのアイコン解説

見出し部分はtheadで、内容部分はtbodyで、
フッター部分はtfootで囲んであげましょう。

メインとなる内容部分をグループ分けするtbodyは
今回のように複数の行を囲うことも可能です。
ログインして解答を見る

コメントのアイコン補足

それぞれの行を役割ごとにグループ分けすることで
コンピュータが構造を理解しやすくなり、SEOに有利です。

見た目自体には変化がないので、書かなくてもちゃんと表示されますが、
Webページを作る上はSEOの観点も重要になってくることが多いので覚えておきましょう!
HTMLを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる