ウェブランサー

<colgroup> テーブル(表)の縦列をグループ化する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
タイプ -
取り扱い 標準

<colgroup>タグは、テーブル(表)の縦列をグループ化する際に使用します。縦列をまとめて横幅を指定しておくと、指定された範囲の領域が確保された状態でページを読み込む事が出来ます。

縦列を構造的な意味でグループ化する場合は<colgroup>タグを、縦列を構造的な意味でグループ化しないのであれば<col>タグを使用して下さい。

<colgroup>タグに指定できる属性

span="値"
対象となる縦列の数を指定します。初期値は1となります。
align="値(left, center, right, justify, char)"
横位置の指定です。justify(両端揃え)、char(char属性で指定した文字の位置を揃える)
valign="値(top, middle, bottom, baseline)"
セルの内容物の縦位置をグループ単位で指定できます。
width="値(数値, %)"
横幅を指定します。
char="位置を揃える文字"
align="char"の場合、位置を揃える文字を指定します。初期値は" .(ピリオド)"です。
charoff="位置を揃える文字"
align="char"の場合に、セルの端からchar属性で指定した文字までの距離を指定します。

<colgroup>の使用サンプル

HTML
<table border="1" bordercolor="#AAAAAA" bgcolor="#FFFFFF" cellpadding="3">
<caption>メンバー構成</caption>

<colgroup> <col width="150"> </colgroup>
<colgroup> <col span="2" width="100"> </colgroup>
<thead align="center" bgcolor="#EEEEEE"> <tr> <td>メンバー</td> <td>担当</td> <td>出身</td> </tr> </thead> <tfoot align="right" bgcolor="#EEEEEE"> <tr> <td colspan="3">○○バンド</td> </tr> </tfoot> <tbody> <tr> <td>ジョナサン</td> <td>Vocal</td> <td>北海道</td> </tr> <tr> <td>ジョー・佐鳥(兄)</td> <td>Guitar</td> <td>東京</td> </tr> <tr> <td>ビリー・新</td> <td>Bass</td> <td>京都</td> </tr> <tr> <td>富井・リー</td> <td>Drums</td> <td>沖縄</td> </tr> <tbody> </table>
表示確認
メンバー構成
メンバー 担当 出身
○○バンド
ジョナサン Vocal 北海道
ジョー・佐鳥(兄) Guitar 東京
ビリー・新 Bass 京都
富井・リー Drums 沖縄

※表示サンプルのためスタイルシートで装飾しています。

<colgroup>に関連するHTMLタグ

テーブル(表)に関連する要素
<caption> テーブル(表)にタイトルを付ける
<col> テーブル(表)の縦列の属性をまとめて指定する
<colgroup> テーブル(表)の縦列をグループ化する
<table> テーブル(表)を作成する
<tbody> テーブル(表)のボディ部分を定義する
<td> テーブル(表)のセルを作成する
<tfoot> テーブル(表)のフッタ行を定義する
<th> テーブル(表)の見出しとなるセルを作成する
<thead> テーブル(表)のヘッダ行を定義する
<tr> テーブル(表)の横一行を定義する