二章第九回　theadとtfoot

このページの最終更新日：2017年11月20日

前回、thead要素とtfoot要素という要素を少し紹介しました。今回はこれについて詳しく解説します。

<table>
  <thead>
    <tr>
      <td>thead1</td>
      <td>thead2</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>tbody1</td>
      <td>tbody2</td>
    </tr>
    <tr>
      <td>tbody3</td>
      <td>tbody4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>tfoot1</td>
      <td>tfoot2</td>
    </tr>
  </tfoot>
</table>

theadとtfootは、テーブルのそれぞれ「ヘッダ」と「フッタ」を記述するためのものです。ヘッダはテーブルの最初にある行、フッタは最後にある行です。それぞれ何行でも（tr要素が何個あっても）構いません。

table要素の子要素として記述できるのは、thead,tbody,tfootの他にもcaptionやcol,colgroupなどがありますが、今回はthead,tfoot,tbodyを扱います。

theadとtfootはあっても無くても構いませんが、それぞれ1個までです。tfootを2つといったことはできません。一方、tbodyは複数でも構いません。

前回解説したようにtbodyは省略できるので、tableの下に直接trを置いた場合、それらが省略されたtbodyで囲われているというようにみなされます。

これら3種類の要素をtableの中に書く場合、順番はthead, tbody, tfootの順と決まっています。ヘッダはテーブルの最初、フッタはテーブルの最後なので自然ですね。

せっかくthead, tbody, tfootを使ってテーブルの列が区分されているので、それらをJavaScriptから扱う方法もあります。

まず、thead,tfoot,tbodyのHTMLElementは、HTMLTableSectionElementと呼ばれます。実は、このHTMLTabeSectionElementもそれぞれinsertRowとdeleteRowを持っています。使い方は同じなので、前回を参照して下さい。

そして、これらのHTMLTableSectionElementを取得するための専用の方法があります。まずtheadとtfootは、それぞれtable要素が持つcreateTHeadとcreateTFootというメソッドで取得できます。引数は無く、返り値がそれぞれthead,tfootのオブジェクトです。ちなみに、thead,tfootがテーブルに無かった場合は、新しく空のthead要素やtfoot要素が作られて、それを返します（こちらがメソッド名の由来ですね）。これらのメソッドは何回呼び出してもtheadやtfootが2つ以上になることはありません。

逆にtheadやtfootをテーブルから除去するメソッドもあります。それぞれtableが持つdeleteTHeadとdeleteTFootです。これらは引数は無く、返り値もありません。呼び出すと、それぞれtheadやtfootが除去されます。既に無かった場合も特にエラーになることはなく、何も起きません。

また、tbodyは複数ある可能性があるので、table要素のtBodiesというプロパティにHTMLCollectionが入っています。これがtbody要素の一覧です。これを使って取得しましょう。

実際のサンプルで見てみましょう。

<table id="aaaaa">
  <thead>
    <tr>
      <td>thead1</td>
      <td>thead2</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>tbody1</td>
      <td>tbody2</td>
    </tr>
    <tr>
      <td>tbody3</td>
      <td>tbody4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>tfoot1</td>
      <td>tfoot2</td>
    </tr>
  </tfoot>
</table>

<script type="text/javascript">
  var table = document.getElementById('aaaaa');

  var tbody = table.tBodies.item(0);

  var newtr = tbody.insertRow(0);

  for(var i=0;i<2;i++){
    var newtd = newtr.insertCell( newtr.cells.length );
    newtd.appendChild( document.createTextNode('testtest'+i) );
  }
</script>

newtrにinsertRowの戻り値を代入した後は、前回のinsertRowのサンプルと全く同じなので、特に解説はしません。とりあえず、今回はtbodyをいじってみました。

tbodyに、table.tBodies.item(0)を代入しています。これは、tableのもつ0番目のtbody要素です。tableにはtbody要素は1つしかないのでこうなっています。

このサンプルをすこしいじってtheadやtfootをいじってみるのもよいでしょう。