HTML4.0の基本

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

2009年8月6日

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

<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:横方向の列の中でこの属性が指定されているセル内の文字データは、1行目のベースラインを揃えます。

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

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

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

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

Comment

コメントを残す

メールアドレスが公開されることはありません。

関連記事

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。

株式会社リズムファクトリーでは現在、下記の職種について人材募集を行っております。
求人をクリックすると「求人情報サイトFind Job!」の求人詳細画面が開きますので、こちらからご応募下さい。

提供 : Webな人の求人情報サイト Find Job!