最近なのですが、<COLGROUP>、<col>というものの存在を知りました。
色々調べてみるのですが、飲み込みの悪い私にはいまいち理解することが出来ません。
これは表をグループ化するものなのですよね?
私の理想とマッチしている機能であれば使ってみたいのですが・・・
例えば横3列、縦10列あった場合、一番左は背景赤、中hは青、右は黄と背景を指定する場合、最初に<COLGROUP>で各グループ化しておけば、<td>や<tr>を構わなくともcssで指定した<COLGROUP>にclassなどで指定を行っておけば、縦10列に一発で指定が反映されるのでしょうか??
すみません、説明すら間々ならない状態なのですが、こんな使い方をする為のものでしょうか??
ただ私の今の設定だと、先ほどの縦10列合った場合、それがclassだった場合は、10個全ての<td>に指定を行わなければならないので、ちょっとおかしいなと思っている次第です。
どなたか、私のお話がご理解いただける方がいらっしゃいましたら、アドバイスいただけたら幸いです。
よろしくお願いいたします。
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つの列(全体)を表しますので、
その並びがそれぞれの列に対応します。
影響の範囲は、実際にブラウザで表示して確かめてみれば、聞いてみるまでもなく明かなことです。
何度も有難う御座いました。
大変ご丁寧な説明を頂き、私でもなんとか理解が出来ました。
あとは自分で色々試して効果などを勉強したいと思います。
本当に有難う御座いました。
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></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></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> </td>→1
<td> </td>→2
<td> </td>→3
</tr>
これが1で<colgroup class="colleft"></colgroup>
これが2、<colgroup class="colmid"></colgroup>
これが3、<colgroup class="colright"></colgroup>
という順序で各<tr>、<td>に影響を与えるということでしょうか??
飲み込み悪くてすみません・・・。
今一度アドバイスいただけたらと思います。
宜しくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- 統計学 t検定を繰り返してはいけない理由について教えて下さい。 2 2022/05/15 12:37
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- Excel(エクセル) Excel 、この式はどのように解釈すればいいのでしょうか 4 2023/02/03 08:53
- デスクトップパソコン パソコンについて質問です。 指定時間に使ってなかったら シャットダウンするように設定したいのですが 1 2023/05/30 13:48
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- Visual Basic(VBA) 指定列最終行までのスペースを改行するVBAについて 2 2022/06/01 19:50
- USBメモリー・SDカード・フラッシュメモリー 銀行が振込データの受け渡しに未だにFDを使っている理由は「FDDがAドライブ固定だから」って本当? 11 2022/06/02 03:53
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
値が0なら非表示にしたい
-
テーブルの入れ子について
-
HTMLで外部ファイルの読み込み
-
テーブルの位置
-
HTMLの表で幅を指定しても折り...
-
テーブルの行を折りたたみたい...
-
テーブルの外側の線を消す
-
テーブルの装飾
-
逆L字の表(table)組み
-
テーブルの行の高さを指定する...
-
テーブルをCSSの外部ファイ...
-
【HTMLタグ】テーブルを教えて...
-
tableにul,または,olを入れられ...
-
テーブルのヘッダとボディの幅...
-
テーブルの任意の列を非表示に...
-
HTMLのテーブルで桁をそろ...
-
HTML <td></td>タグ セル内余...
-
中に<table></table>が使えるア...
-
TRタグの余白をcssで設定するには
-
テーブルの上に空行が入る・・...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
テーブルの任意の列を非表示に...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
cssで、表示されるテキストによ...
-
HTML <td></td>タグ セル内余...
-
テーブルのヘッダとボディの幅...
-
文字列が入っているtdを削除せ...
-
テーブルのセルに画像をピッタ...
-
テーブルの行の高さを指定する...
-
テーブルの表示がずれます
-
ホームページ 表の上の余白を...
-
テーブルのセルにアンカー
-
逆L字の表(table)組み
-
テーブルタグのセルの幅の一部...
-
中に<table></table>が使えるア...
-
tableでcolspanを使うと次行以...
-
スタイルシートで colspan=3と...
-
TABLE内の枠線を一部消すには
-
テーブルの上に空行が入る・・...
おすすめ情報