行をグループ分けする

更新日:2018.06.30
  1. HOME
  2. ホームページ作成講座
  3. 行をグループ分けする

前のページでは基本的な表の作り方を見ました。 このページでは表のうち行を3つのグループに分ける方法を見ていきます。 つまり、ヘッダー部、本体部分、フッター部の3つです。

表をグループ分けすると、後にCSSでスタイル指定する時にやりやすくなるというメリットがあります。 しかし現時点ではまだCSSを学んでいないので、前のページの表と変わり映えはしないでしょう。

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

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

<thead>~</thead>
表の見出し部分をグループ化します。thタグのみ使用可で、tdタグは含めることができません。
<tbody>~</tbody>
表の本体部分を構成する行をグループ化します。
<tfoot>~</tfoot>
表の最終行などフッター的要素となる行をグループ化します。

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

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

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

前のページで作った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で囲まれた部分の背景色を灰色にしてみました。 グループ分けしておくと、スタイルを指定するのが楽になります。

NINJABUTTON