ホームページ作成講座行をグループ分けする

行をグループ分けするHTMLタグ

行をグループ分けするタグは、以下の３つです。

<thead>～</thead>

表の見出し部分をグループ化します。thタグのみ使用可で、tdタグは含めることができません。

<tbody>～</tbody>

表の本体部分を構成する行をグループ化します。

<tfoot>～</tfoot>

表の最終行などフッター的要素となる行をグループ化します。

もちろん全ての表がこのように３つにグループ分けできるわけではありません。 必要ない場合は、グループ分けしなくても構いません。 tfootタグを使わず２つにグループ分けすることも可能です。

グループ分けした表のサンプル

では、前のページで作った表をグループ分けしてみることにしましょう。

前のページで作ったlesson1.htmlを開き、tableフォルダ内に「lesson2.html」と名前を変更して保存しましょう。 そしてbody内のtableに、以下のようにタグを追加して下さい（赤文字のタグ）。

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

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

残念ながら前のページと見た目は変わりません。 でもCSSでスタイル指定をすると、以下のように違いがはっきり分かります。

theadで囲まれた部分の背景色をオレンジに、 tfootで囲まれた部分の背景色を灰色にしてみました。 グループ分けしておくと、スタイルを指定するのが楽になります。