問題
8tableにはtheadなどのグループ化タグを使おう
この問題では、tableタグを使って作成した表をグループ化するタグについて学習していきます。 ここで学習する3つのタグは、表の構造を明確化するためのHTMLタグです。 見た目に変化はありませんが、書いておく価値のあるタグなので問題を通して学習しておきましょう。
HTMLの問題に挑戦しよう！
問題
「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にはtheadなどのグループ化タグを使おう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
見出し部分はtheadで、内容部分はtbodyで、
フッター部分はtfootで囲んであげましょう。
メインとなる内容部分をグループ分けするtbodyは
今回のように複数の行を囲うことも可能です。
補足
それぞれの行を役割ごとにグループ分けすることで
コンピュータが構造を理解しやすくなり、SEOに有利です。
見た目自体には変化がないので、書かなくてもちゃんと表示されますが、
Webページを作る上はSEOの観点も重要になってくることが多いので覚えておきましょう！
ポイント
thead、tbody、tfootタグについて
ここでは、それぞれのタグについて簡単に解説しておきます。
theadとは、「table head」の略で、表の見出しをグループ化する機能があります。
table要素で使用されるthタグは表の見出しを表していました。
それに対し、theadタグはそのth要素をグループ化して、表のヘッダー部分であることをブラウザに認識させます。
tbodyとは、「table body」の略で表の本体部分をグループ化する機能があります。
tbody要素もthead要素と同様に省略は可能ですが、使用したほうがより表の構造を明確にすることができます。
td要素は「表のデータ」を表していましたが、その中で表の本体に関係するモノをtbody要素で囲うことで表の本体のデータだということを明確にすることができます。
tfootとは、「table footer」の略で表のフッター部分をグループ化する機能があります。
tfootタグで囲った内容は、表のフッター部分であるということをブラウザに認識させることができます。
