TOP > Back > Place > Next

表のグループ化と背景

行グループ化列グループ化背景色・画像表の配置

テーブル(表)のソースをコピー&貼り付けしたい方は、サンプルをご覧ください。


テーブルのグループ化 

行グループ

表の各行にあたる<TR>要素は、行数分だけ構成されることはテーブルの基本でお解かりでしょう。その<TR>要素の内容によってグループ化したものを「行グループ」といいます。

行グループには、ヘッダ|本体|フッタ、の3種類ありそれぞれに<THEAD>|<TBODY>|<TFOOT>の要素直後にTR,TDが包括されます。
<THEAD>〜〜〜</THEAD>|<TFOOT>〜〜〜</TFOOT>は、それほど定義する意味や必要がなければ記述しなくても構いません。しかし、計算表や表の構成には役立つ要素です。

ソースの書き方に注目してください。

ソース: 表示結果:
<TABLE border="1">
<THEAD> <TR><TD>ヘッダ部分</TD></TR> </THEAD> <TFOOT> <TR><TD>フッタ部分</TD></TR> </TFOOT> <TBODY> <TR><TD>本体部分</TD></TR> </TBODY> <TBODY> <TR><TD>本体部分</TD></TR> </TBODY> </TABLE>
<THEAD>ヘッダ部分</THEAD>
<TFOOT>フッタ部分</TFOOT>
<TBODY>本体部分</TBODY>
<TBODY>本体部分</TBODY>

このように、条件として<THEAD>〜〜〜</THEAD>の後に<TFOOT>〜〜〜</TFOOT>を記述しその後に<TBODY>本体部分</TBODY>という順番に記述します。この順番を間違えるとブラウザによっては、正しく表示しません。

行グループ要素の属性
TBODY|THEAD|TFOOT には下記の属性が指定できます。

ALIGN=" " 
値: LEFT|CENTER|RIGTH|JUSTIFY|CHAR
VALIGN=" "
値: TOP|MIDDIE|BOTTOM|BASELINE
CHAR=" " 桁をそろえる文字
ALIGN=" CHAR " に指定した場合の位置を揃える文字(ISO10646で定義されている文字やLANG属性の言語
CHAROFF=" " char で指定した文字の位置を揃える幅(インデント作用)
ピクセル数値|n% パーセンテージ

テーブルの属性で説明した<TABLE RULES=" GROUPS ">で内枠線の表示方法が変ります。

ソース: 表示結果:
<TABLE rules="groups">
<THEAD> <TR> <TD>ヘッダ部分</TD> <TD>ヘッダ部分</TD> </TR> </THEAD> <TFOOT> <TR> <TD>フッタ部分</TD> <TD>フッタ部分</TD> </TR> </TFOOT> <TBODY> <TR> <TD>本体部分</TD> <TD>本体部分</TD> </TR> </TBODY> <TBODY> <TR> <TD>本体部分</TD> <TD>本体部分</TD> </TR> <TR> <TD>本体部分</TD> <TD>本体部分</TD> </TR> </TBODY> </TABLE>
<THEAD>ヘッダ部分</THEAD> <THEAD>ヘッダ部分</THEAD>
<TFOOT>フッタ部分</TFOOT> <TFOOT>フッタ部分</TFOOT>
<TBODY>本体部分</TBODY> <TBODY>本体部分</TBODY>
<TBODY>本体部分</TBODY> <TBODY>本体部分</TBODY>
<TBODY>本体部分</TBODY> <TBODY>本体部分</TBODY>

NN6.0以降では、<THEAD>と<TFOOT>の部分を固定し<TBODY>をスクロールさせることが出来ます。<HEAD>の<STYLE>内に次のプロパティを設置します。

tbody{height:表示する高さ px;overflow:auto;}
tr{height:auto;}/*IE誤作動回避のため*/

列グループ

「行グループ」ほどの規定はないですが、複数の列に対して「列グループ」を作る事が出来ます。
<COLGROUP>要素を使い定義します。計算表やページの構成には役立つ要素です。<COL>要素は、空要素です。

<COLGROUP>要素に指定できる属性
SPAN|ALIGN|VALIGN|WIDTH|CHAR|CHAROFF

サンプル例えば、右図のようなリンク集を作るとします。

この場合、セルにすると(左から)、左列に2分のセル、中列に1分のセル、右列に2分列のセルとなり、3つの列グループに分かれます。
そこで、もう一つの<COL>要素の登場です。
<COLGROUP SPAN="セルの数">要素だけでも「列グループ」は、出来ますが細かな設定が出来ません。

<COL>要素は、列の数だけ記述します。ソースは、(上の図で、三列のグループ分)
上の図を「列グループ」にすれば、下の3例になります。
列分<COL>に属性を記述し定義します。必ず、一定に一番最初の<COL>が左側列の指定になります。

左から<COL SPAN="2">、<COL SPAN="1">、<COL SPAN="2">と記述すれば列グループ定義の完成です。
<COLGROUP>
      <COL SPAN="2">左の「列グループ」
      <COL SPAN="1">中央の「列グループ」
      <COL SPAN="2">右の「列グループ」
</COLGROUP>

下のソースは、一つ一つの列グループです。

<COLGROUP>
      <COL>一番左側のセル列
      <COL>
      <COL>
      <COL>
      <COL>一番右の右側のセル列
</COLGROUP>

「<TD><TH>要素で直接の WIDTH| HEIGHT指定は、Deprecated =非推奨のタグ」です。
そこで<COL>に設定します。各<COL>にWIDTH ="幅数値"、の属性を加えます。
他に、ALIGN="左右値"|VALIGN="上下の値"の設定出来ます。|CHAR|CHAROFF

ソース:
<TABLE border="3">

<COLGROUP>
<COL span="2" width="50" align="left" style="background-color:white">
<COL span="1" width="80" align="center" style="background-color:#ffccff">
<COL span="2" width="90" align="center" style="background-color:#ee82ee">
</COLGROUP>

<TBODY>
<TR>
<TD colspan="2">リンク集</TD>
<TD>新着</TD>
<TD colspan="2">お馴染み</TD>
</TR>
<TR>
<TD rowspan="2">HTML</TD>
<TD>相互</TD>
<TD>abc.com</TD>
<TD>●●HTML</TD>
<TD>★★ページ</TD>
</TR>
<TR>
<TD>お勧め</TD>
<TD>CSS-123</TD>
<TD>XHML's 1.1</TD>
<TD>◆◆マスター</TD>
</TR>
<TR>
<TD rowspan="2">CGI</TD>
<TD>相互</TD>
<TD>CGI.jp</TD>
<TD colspan="2">CGIしま専科</TD>
</TR>
<TR>
<TD>お勧め</TD>
<TD>NEW-CGI</TD>
<TD colspan="2">Perlチャン</TD>
</TR>
<TR>
<TD colspan="2">BBSメンバー</TD>
<TD>@@.com</TD>
<TD colspan="2">(‥ヾネット</TD>
</TR>
<TR>
<TD colspan="2">チャット<BR>メンバー</TD>
<TD>ページワン</TD>
<TD colspan="2">ジャックに桃の木</TD>
</TR>
</TBODY>
</TABLE>
表示結果:
リンク集 新着 お馴染み
HTML 相互 abc.com ●●HTML ★★ページ
お勧め CSS-123 XHML's 1.1 ◆◆マスター
CGI 相互 CGI.jp CGIしま専科
お勧め NEW-CGI Perlチャン
BBSメンバー @@.com (‥ヾネット
チャット
メンバー
ページワン ジャックに桃の木

TBODY,THEAD,TFOOTとCOLGROUP.COLの組み合わせに、
<TABLE RULES="GROUPS">を指定すると仕切り枠線の表示方法グループ化します。


◆テーブルの背景色と背景画像

・テーブルに背景色を指定する。 

スタイルシートを使って背景に色を付けます。
TABLE|TR|TD|TH|COL 要素それぞれに、指定できます。
例:<上の要素 STYLE=”BACKGROUND-COLOR:色の値”>


・テーブルに背景画像を指定する。

スタイルシートを使って背景に画像を張ります。
TABLE|TR|TD|TH 要素それぞれに、指定できます。
例:<上の要素 STYLE=”BACKGROUND-IMAGE:URL(’画像ファイル名’)”>

画像を利用した枠サンプル


◆テーブルの回り込み

・テーブルの左右にテキストを回り込みさせる。

画像の回り込みと同様テーブルにも回り込みさせる事が出来ます。
例:<TABLE STYLE=”FLOAT:左・右”>
サンプルは前回のキャプション背景画像にstyle="float:right"を設定しています。

回り込み解除は、画像の解除法と同じです。


タグ解説


THEAD

テーブルのヘッダ部分を定義:行グループ化

表の見出しにあたる行のブロックは、<THEAD>〜〜〜</THEAD>で囲みグループ化をはかります。どの列グループ化要素よりも先に記述します。テーブルの一番上に表示されます。

<THEAD>要素に指定できる属性
ALIGN|VALIGN|CHAR|CHAROFF


TFOOT

テーブルのフッタ部分を定義:行グループ化

表の末尾にあたる行のブロックは、<TFOOT>〜〜〜</TFOOT>で囲みグループ化をはかります。<THEAD>〜〜〜</THEAD>のすぐ後に記述します。テーブルの一番下に表示されます。

<TFOOT>要素に指定できる属性
ALIGN|VALIGN|CHAR|CHAROFF


COLGROUP

テーブルの列グループ化:

<COLGROUP>要素に指定できる属性
SPAN|ALIGN|VALIGN|WIDTH|CHAR|CHAROFF

テーブルの列ごとにグループ化します。
SPAN属性を使用することで、列をまとめる事が出来ます。
また、属性で文字を揃え(左右)・縦方向(上下)の文字位置も指定できます。

COL

列グループ化の小分け指定:

<COLGROUP>要素に指定できる属性
SPAN|ALIGN|VALIGN|WIDTH|CHAR|CHAROFF

<COLGROUP>の直下に置き、列グループそれぞれの指定をする場合に使う要素。
<COLGROUP 属性="">よりも、<COL 属性="">を記述することで列幅(左右の幅)を各列ごとに指定出来ます。

属性は、「ALIGN="BOTTOM"」のほかに、スタイルシートの属性が指定できます。


 【←BACKNEXT→

Copyright (c) Producer by System KS. 2001 All rights reserved.