メインメニュー


[スポンサードリンク]


縦列をグループ化させて属性を指定する
<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>