<COLGROUP>の使い方が理解できません？

質問

最近なのですが、<COLGROUP>、<col>というものの存在を知りました。

色々調べてみるのですが、飲み込みの悪い私にはいまいち理解することが出来ません。

これは表をグループ化するものなのですよね？

私の理想とマッチしている機能であれば使ってみたいのですが・・・

例えば横3列、縦10列あった場合、一番左は背景赤、中hは青、右は黄と背景を指定する場合、最初に<COLGROUP>で各グループ化しておけば、<td>や<tr>を構わなくともcssで指定した<COLGROUP>にclassなどで指定を行っておけば、縦10列に一発で指定が反映されるのでしょうか？？

すみません、説明すら間々ならない状態なのですが、こんな使い方をする為のものでしょうか？？

ただ私の今の設定だと、先ほどの縦10列合った場合、それがclassだった場合は、10個全ての<td>に指定を行わなければならないので、ちょっとおかしいなと思っている次第です。

どなたか、私のお話がご理解いただける方がいらっしゃいましたら、アドバイスいただけたら幸いです。

よろしくお願いいたします。

回答No.2

BLUEPIXY · ベストアンサー

＃１＞<td>への指定はいらないのですか？？
すでに述べたように、各それぞれの<TD>への指定は必要ないです。
<COLGROUP> は、縦方向の<TD>をグループ化しますので、どのＴＤへという個別の指定は必要ありません。（列単位でグループ化されます）

＃１＞またspan 属性を使うということの具体的な意味が理解できません・・・。
質問文にでてくる<TABLE>では、３列で３つの<COLGROUP>ですから必要ないですが、
<COLGROUP span="2"> のように組にする列数を指定できます。
span="2" と指定すると、２つの列をグループ化したことになります。
指定を省略した場合は span="1" （１列）とみなされます
同様のことは、
<col class="left"><col class="mid"><col class="right">
の様にできます。
col を使う場合でも
<col span="2" class="mid"> のような指定ができます。
また、
<colgroup><col span="2 class="mid"></colgroup>
のようにcolgroup の内容として指定することもできます。
（この場合colgroup にはspan の指定はしません）
ほとんど同じように使えるのですが、違いはというと意味が違うということです。
colgroup は、構造的なグループを表しますが、col は、そのような意味がありません。

＃１＞…という順序で各<tr>、<td>に影響を与えるということでしょうか？？
そういうことです。
span 指定無しの<colgroup>は、１つの列（全体）を表しますので、
その並びがそれぞれの列に対応します。
影響の範囲は、実際にブラウザで表示して確かめてみれば、聞いてみるまでもなく明かなことです。

お礼

何度も有難う御座いました。

大変ご丁寧な説明を頂き、私でもなんとか理解が出来ました。

あとは自分で色々試して効果などを勉強したいと思います。

本当に有難う御座いました。

回答No.1

BLUEPIXY

＞<COLGROUP>にclassなどで指定を行っておけば、縦10列に一発で指定が反映されるのでしょうか？？
＞こんな使い方をする為のものでしょうか？？
そのとおりです。

＞10個全ての<td>に指定を行わなければならないので、ちょっとおかしいな
<td> には、指定を行う必要はありません。
複数列をまとめるというような意味なら
縦複数列まとめる場合には、span 属性を使うか
col エレメントを使います。

あと、古いＮＮだと使えないので注意が必要です。
（使えるのはＮＮ６以降）

質問の例だとこんな感じ
<style>
<!--
colgroup.colleft {
background-color:red;
}
colgroup.colmid {
background-color:blue;
}
colgroup.colright {
background-color:yellow;
}
-->
</style>

<table>
<colgroup class="colleft"></colgroup>
<colgroup class="colmid"></colgroup>
<colgroup class="colright"></colgroup>
<tr>
<th>左</th>
<th>中</th>
<th>右</th>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

お礼

とてもご丁寧な回答本当に有難う御座います。

なんとなく理解できてきたのですが、まだ少し分からない部分があるのでお聞きしてもよろしいでしょうか？

><td> には、指定を行う必要はありません。
>複数列をまとめるというような意味なら
>縦複数列まとめる場合には、span 属性を使うか
>col エレメントを使います。

こちらが分かりません！！<td>への指定はいらないのですか？？またspan 属性を使うということの具体的な意味が理解できません・・・。

あと、ソースを書いていただき有難う御座います。
そこで、<table>と<tr>の間に記述した、

<colgroup class="colleft"></colgroup>
<colgroup class="colmid"></colgroup>
<colgroup class="colright"></colgroup>

の記述意味？というか指定範囲は各順序でこの様に反映されると考えていいのでしょうか？

<tr>
<th>左</th>→1
<th>中</th>→2
<th>右</th>→3
</tr>
<tr>
<td>&nbsp;</td>→1
<td>&nbsp;</td>→2
<td>&nbsp;</td>→3
</tr>

これが1で<colgroup class="colleft"></colgroup>
これが2、<colgroup class="colmid"></colgroup>
これが3、<colgroup class="colright"></colgroup>

という順序で各<tr>、<td>に影響を与えるということでしょうか？？

飲み込み悪くてすみません・・・。
今一度アドバイスいただけたらと思います。

宜しくお願いします。