HTML
LINEでログイン
Googleでログイン
Twitterでログイン
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を使用して行をグループ分けしましょう。
theadはヘッダー部分、
tbodyはメインとなる内容部分、
tfootはフッター部分をグループ化します。
theadはヘッダー部分、
tbodyはメインとなる内容部分、
tfootはフッター部分をグループ化します。
あらかじめエディタに書くコード
<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">
<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¥
補足
今回のようにそれぞれの行を役割ごとにグループ分けすることで
コンピュータが構造を理解しやすくなり、SEOに有利です。
見た目自体には変化がないので、書き忘れてしまいやすいですが
ページを作る上では、SEOの観点も必ず重要になってくるので覚えておきましょう。
コンピュータが構造を理解しやすくなり、SEOに有利です。
見た目自体には変化がないので、書き忘れてしまいやすいですが
ページを作る上では、SEOの観点も必ず重要になってくるので覚えておきましょう。
完了にする！
活動記録をTweetする
フッター部分はtfootで囲んであげましょう。
メインとなる内容部分をグループ分けするtbodyは
今回のように複数の行を囲うことも可能です。