表のグループ化と背景
行グループ化｜列グループ化｜背景色・画像｜表の配置テーブル（表）のソースをコピー＆貼り付けしたい方は、サンプルをご覧ください。
テーブルのグループ化
行グループ表の各行にあたる<TR>要素は、行数分だけ構成されることはテーブルの基本でお解かりでしょう。その<TR>要素の内容によってグループ化したものを「行グループ」といいます。
行グループには、ヘッダ｜本体｜フッタ、の３種類ありそれぞれに<THEAD>｜<TBODY>｜<TFOOT>の要素直後にTR,TDが包括されます。
<THEAD>〜〜〜</THEAD>｜<TFOOT>〜〜〜</TFOOT>は、それほど定義する意味や必要がなければ記述しなくても構いません。しかし、計算表や表の構成には役立つ要素です。
ソースの書き方に注目してください。
| ソース： | 表示結果： | ||||
|---|---|---|---|---|---|
<TABLE border="1"> |
|
このように、条件として<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"> |
|
NN6.0以降では、<THEAD>と<TFOOT>の部分を固定し<TBODY>をスクロールさせることが出来ます。<HEAD>の<STYLE>内に次のプロパティを設置します。
tbody{height:表示する高さ px;overflow:auto;}
tr{height:auto;}/*ＩＥ誤作動回避のため*/
列グループ
「行グループ」ほどの規定はないですが、複数の列に対して「列グループ」を作る事が出来ます。
<COLGROUP>要素を使い定義します。計算表やページの構成には役立つ要素です。<COL>要素は、空要素です。
<COLGROUP>要素に指定できる属性
SPAN｜ALIGN｜VALIGN｜WIDTH｜CHAR｜CHAROFF
例えば、右図のようなリンク集を作るとします。
この場合、セルにすると（左から）、左列に２分のセル、中列に１分のセル、右列に２分列のセルとなり、３つの列グループに分かれます。
そこで、もう一つの<COL>要素の登場です。
<COLGROUP SPAN="セルの数">要素だけでも「列グループ」は、出来ますが細かな設定が出来ません。
<COL>要素は、列の数だけ記述します。ソースは、（上の図で、三列のグループ分）
上の図を「列グループ」にすれば、下の３例になります。
列分<COL>に属性を記述し定義します。必ず、一定に一番最初の<COL>が左側列の指定になります。
左から<COL SPAN="2">、<COL SPAN="１">、<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> |
|||||||||||||||||||||||||||||||||
| 表示結果： | |||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||
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>要素に指定できる属性 TFOOTテーブルのフッタ部分を定義：行グループ化 表の末尾にあたる行のブロックは、<TFOOT>〜〜〜</TFOOT>で囲みグループ化をはかります。<THEAD>〜〜〜</THEAD>のすぐ後に記述します。テーブルの一番下に表示されます。 <TFOOT>要素に指定できる属性 COLGROUPテーブルの列グループ化： <COLGROUP>要素に指定できる属性 テーブルの列ごとにグループ化します。 COL列グループ化の小分け指定： <COLGROUP>要素に指定できる属性 <COLGROUP>の直下に置き、列グループそれぞれの指定をする場合に使う要素。 属性は、「ALIGN="BOTTOM"」のほかに、スタイルシートの属性が指定できます。 |
【←BACK ┃NEXT→】