ProgrammingHTML/CSSHTML4.0の基本
HTML4.0の基本

テーブルタグの属性 その2

表ヘッダ/表本体/表フッタ

<THEAD> <TFOOT> <TBODY>

対応ブラウザ：IE4/IE5/IE6/NN6

表には、ヘッダとフッタ、本体を明示的にグループ分けするタグがあります。現時点の IE
ではまだサポートされていませんが、それよってヘッダとフッタ部分を固定したまま本体部分のデータのみをスクロールして見ることや、印刷時に各ページにヘッダとフッタをつけることなどが可能になります。
ヘッダとフッタ、本体をグループ分けするには、ヘッダにする行を <THEAD> タグで囲み、フッタにする行を <TFOOT>
タグで囲み、残りの本体にあたる行を <TBODY> で囲みます。

<TABLE>
  <THEAD bgcolor=red>
    <TR><TD>表ヘッダ</TD></TR>
  </THEAD>
  <TFOOT bgcolor=yellow>
    <TR><TD>表フッタ</TD></TR>
  </TFOOT>
  <TBODY>
    <TR><TD>表本体1</TD></TR>
  </TBODY>
  <TBODY>
    <TR><TD>表本体2</TD></TR>
  </TBODY>
</TABLE>

定義する順番は、<THEAD> の次に <TFOOT> 、最後に <TBODY>
です。HTMLのソースでは本体の前にフッタが来ることになりますが、表示はフッタ部分が一番下になります。

表ヘッダ
表本体1
表本体2
表フッタ

列のグループ化

<COLGROUP> <COL>

対応ブラウザ：IE4/IE5/IE6/NN6

列の幅やカラーを統一させたい際、通常は1つ1つのセルに幅やカラーを指定しますが、列をグループ化し、共通部分の指定をすることができます。列をグループ化するには、<COLGROUP>、その要素を<COL>で
表します。

列をグループ化すると作業が楽になるというメリットがありますが、そのほかにも、表示上のメリットがあります。列をグループ化しておくことにより、すべてのデータがロードされる前に、表が横一列ずつ表示されるようになります。

下記は、一番左の列から100px,50pxと指定しています。右端は指定なしなので、残りのが自動的に割り当てられています。

HTMLソース

<table border="1" width="300">
  <colgroup>
    <col width=100>
    <col width=50>
    <col width=>
  </colgroup>
  <tr>
    <td>　</td>
    <td>　</td>
    <td>　</td>
  </tr>
</table>

出力例
　　　

<COLGROUP>や<COL>を記入する位置は、<TABLE>内の<CAPTION>より後、<THEAD>より前になります。

COLGROUP/COL 属性

span="グループ化する縦列数"

グループ化する列を数値で指定します。初期値は1です。

width="縦列の幅"

指定した列の幅を指定します。ピクセルやパーセントによる指定の他に 0* という指定方法もあります。 0*
を指定すると、指定列の内容を表示するための必要最小限の幅で表示します。ただし、0*
を指定した列は、すべてのデータがロードされる前に、表を横一列ずつ表示させることはできなくなります。

align="横位置のレイアウト"

セル内のデータを横位置でそろえます。 align 属性の値は下記のとおりです。

  • left：左揃え
  • center：中央揃え
  • right：右揃え
  • justify：両端揃え
  • char：特定の文字の位置（ピリオドなどの位置に合わせる）

valign="縦位置のレイアウト"

セル内のデータを縦位置でそろえます。

  • top：上
  • middle：中央
  • bottom：下
  • baseline：横方向の列の中でこの属性が指定されているセル内の文字データは、１行目のベースラインを揃えます。

char="位置を揃える文字"

align="char"とした場合の、位置を揃える文字を指定します。何も文字を指定しない場合の初期値は
ピリオド( . ) です。

charoff="位置を揃える文字までの距離"

align="char"とした場合の、セルの端からchar属性で指定した文字までの距離を指定します。セル内に指定文字がない場合には、末尾が指定文字の直前に揃えられます。

関連記事