<COLGROUP span="縦列数"> 〜 </COLGROUP>
<COLGROUP span="縦列数" width="幅"> 〜 </COLGROUP>
| 縦列数 |
グループ化する縦列の数 (省略値=1) |
| 幅 |
ピクセル , % , * |
span属性は、テーブルの縦列を構造的にグループ化する要素です。
このようにグループ化しておけば、そのグループ単位で属性やCSSをまとめて設定することができます。
このCOLGROUP要素は、CAPTION要素の直後(なければTABLE要素の開始タグ<TABLE>の直後)に指定します。
COLGROUP要素内で使用できるのは
COL要素だけです。
設定したグループ内で、さらに縦列に対して個別の指定をする場合は
COL要素を使用します。
COL要素を使用する場合は、COLGROUP要素でspan属性を指定するのではなく、
COL要素側で指定します。
→ 『
縦列に属性やスタイルシートを設定する』
縦列の幅の指定は、 「ピクセル」「パーセント(%)」「*」の3通りがあります。
「ピクセル」は、そのものの値を直接指定します。
「%」と「*」は、全体の幅に対しての割合で指定します。
これらが指定された場合、まず「ピクセル」と「%」で指定された幅が確保され、その残りが「*」の前につけられた数字の割合で分配されます。
「100,.1*,2*,3*」と指定された場合は、100ピクセルを除いた残りの幅を「1:2:3」の割合で分割します。
単に「*」だけが指定された場合には、「1*」と同じ意味になります。
縦列をグループ化する
| ヘッダ1 |
ヘッダ4 |
データ1 |
データ4 |
| ヘッダ2 |
ヘッダ5 |
データ2 |
データ5 |
| ヘッダ3 |
ヘッダ6 |
データ3 |
データ6 |
<TABLE border="5">
<CAPTION>縦列をグループ化する</CAPTION>
<COLGROUP span="2" class="colgroup"></COLGROUP>
<COLGROUP span="2" class="data" width="70" align="center"
></COLGROUP>
<TR>
<TD>ヘッダ1</TD>
<TD>ヘッダ4</TD>
<TD>データ1</TD>
<TD>データ4</TD>
</TR>
<TR>
<TD>ヘッダ2</TD>
<TD>ヘッダ5</TD>
<TD>データ2</TD>
<TD>データ5</TD>
</TR>
<TR>
<TD>ヘッダ3</TD>
<TD>ヘッダ6</TD>
<TD>データ3</TD>
<TD>データ6</TD>
</TR>
</TABLE>
※ CSSの内容
<STYLE type="text/css">
<!--
.colgroup { background-color : #ccffcc; }
.data { background-color : #ffffcc; }
-->
</STYLE>