<colgroup>は、表の縦列グループを表す要素です。<colgroup>要素を利用することで、表の縦列をグループ化して、まとめて属性やスタイルを適用することができます。グループ化せずに、複数の表の縦列にスタイルを適用したい場合は、<col>要素を利用します。混同しがちなので、適した使い方をするように気をつけましょう。
今回は、HTML5における<colgroup>タグの使い方をご紹介します。
HTML5における<colgroup>タグの使い方
表の縦列をグループ化して、まとめて属性やスタイルを適用します。必ず<table>〜</table>の中に設置します。<colgroup>は以下のように記述して使用します。
|
1 |
<colgroup> 〜 </colgroup> |
<colgroup>は、<span>属性でまとめたい列数を指定して使用します。以下のように記述した場合、縦列を2列指定していることになります。<colgropu>で、span要素を使用した場合、<col>要素は使用することができません。
|
1 |
<colgroup span="2" ></colgroup> |
直接スタイルを指定せずCSSに記述したい場合は、以下のようにidを指定して、CSS でスタイルを記述します。
|
1 2 |
<colgroup span="2" id="sample1"></colgroup> <colgroup span="3" id="sample2"></colgroup> |
