• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:<COLGROUP>の使い方が理解できません?)

【解説】<COLGROUP>と<col>の使い方とは?

このQ&Aのポイント
  • <COLGROUP>と<col>は、表をグループ化するための要素です。
  • <COLGROUP>を使用すると、テーブル内の列をまとめてスタイリングすることができます。
  • 具体的な使い方として、<COLGROUP>で列のグループを作成し、<col>で各列の幅やスタイルを指定することができます。

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

#1><td>への指定はいらないのですか?? すでに述べたように、各それぞれの<TD>への指定は必要ないです。 <COLGROUP> は、縦方向の<TD>をグループ化しますので、どのTDへという個別の指定は必要ありません。(列単位でグループ化されます) #1>またspan 属性を使うということの具体的な意味が理解できません・・・。 質問文にでてくる<TABLE>では、3列で3つの<COLGROUP>ですから必要ないですが、 <COLGROUP span="2"> のように組にする列数を指定できます。 span="2" と指定すると、2つの列をグループ化したことになります。 指定を省略した場合は span="1" (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 は、そのような意味がありません。 #1>…という順序で各<tr>、<td>に影響を与えるということでしょうか?? そういうことです。 span 指定無しの<colgroup>は、1つの列(全体)を表しますので、 その並びがそれぞれの列に対応します。 影響の範囲は、実際にブラウザで表示して確かめてみれば、聞いてみるまでもなく明かなことです。

yuyukina
質問者

お礼

何度も有難う御座いました。 大変ご丁寧な説明を頂き、私でもなんとか理解が出来ました。 あとは自分で色々試して効果などを勉強したいと思います。 本当に有難う御座いました。

その他の回答 (1)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

><COLGROUP>にclassなどで指定を行っておけば、縦10列に一発で指定が反映されるのでしょうか?? >こんな使い方をする為のものでしょうか?? そのとおりです。 >10個全ての<td>に指定を行わなければならないので、ちょっとおかしいな <td> には、指定を行う必要はありません。 複数列をまとめるというような意味なら 縦複数列まとめる場合には、span 属性を使うか col エレメントを使います。 あと、古いNNだと使えないので注意が必要です。 (使えるのはNN6以降) 質問の例だとこんな感じ <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>

yuyukina
質問者

お礼

とてもご丁寧な回答本当に有難う御座います。 なんとなく理解できてきたのですが、まだ少し分からない部分があるのでお聞きしてもよろしいでしょうか? ><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>に影響を与えるということでしょうか?? 飲み込み悪くてすみません・・・。 今一度アドバイスいただけたらと思います。 宜しくお願いします。

関連するQ&A