WEB技術の辞書・解説・使用例

TOP > HTML >  HTMLタグ辞典 >  <colgroup>
<colgroup>  テーブル    グループ化 

表の縦列をグループ化し一括指定する。


COLUMN GROUP の略。テーブルのカラム(列)グループに対して、横幅のサイズや文字配置など一括指定します。

使用上の注意

・<COLGROUP>や<COL>は、<TABLE>内の<CAPTION>より後、 <THEAD>より前に配置。
・<COL>タグと併用する際には、 <COL>タグを<COLGROUP>タグの中に置く。

<COL>タグと<COLGROUP>タグの違い

<COLGROUP>タグが縦列を構造的な意味でグループ化するのに対し、 <COL>タグは縦列をグループ化しないということです。

主要なパラメーター

span="グループ化する縦列数"
グループ化する縦列の数を1以上の整数で指定します。span="3"とすると、3列分まとめて指定できます。初期値は1。
<COLGROUP>内に<COL>を含んでいる場合には、この属性は無視されます。

width="n"
指定した各縦列の幅の初期値を指定します。<COLGROUP>で幅が指定されている場合でも、その内部の<COL>で幅を指定すると、<COL>で指定した幅が優先されます。

align="left/right/center/justify/char" …横方向の文字位置
 left(左寄せ)、right(右寄せ)、center(中央揃え)、justify(両端揃え)、char(char属性で指定した文字の位置を揃える)

valign="top/middle/bottom/baseline" …縦方向の文字位置
 top(上寄せ)、middle(中央揃え)、bottom(下寄せ)、baseline(1行目のベースラインを揃える)

bgcolor="色" …背景色を指定。

その他のパラメーター

char="x" …位置を揃える文字
 align="char"とした場合の、位置を揃える文字を指定。初期値は「.(ピリオド)」。

charoff="位置を揃える文字までの距離"
 align="char"とした場合の、セルの端からchar属性で指定した文字までの距離を指定します。セル内に指定文字がない場合には、末尾が指定文字の直前に揃えられます。

サンプルコード

<table border="1">
<caption>成績表</caption>
<colgroup span="2" align="center" bgcolor="skyblue" width="150">
<thead>
<tr><th>名前</th><th>国語</th><th>数学</th><th>物理</th></tr>
</thead>

<tbody>
<tr><td>青木</td><td>90</td><td>80</td><td>100</td></tr>
<tr><td>太田</td><td>85</td><td>50</td><td>80</td></tr>
<tr><td>加藤</td><td>70</td><td>65</td><td>75</td></tr>
<tr><td>山田</td><td>80</td><td>70</td><td>90</td></tr>
</tbody>
</table>

<> <>
成績表
名前国語数学物理
青木9080100
太田855080
加藤706575
山田807090



HTMLの一般属性

属性説明
class="~"クラス名を指定。使用例
id="~"IDを指定します。使用例
style="~"スタイルシートを直接記述。使用例
title="~"タイトルを指定します。
dir="ltr|rtl"文字の表示方向を指定。 ltr(左から右)、rtl(右から左)
lang="~"言語を指定。日本語の場合は"ja"