HTML5における<colgroup>タグの使い方

<colgroup>は、表の縦列グループを表す要素です。<colgroup>要素を利用することで、表の縦列をグループ化して、まとめて属性やスタイルを適用することができます。グループ化せずに、複数の表の縦列にスタイルを適用したい場合は、<col>要素を利用します。混同しがちなので、適した使い方をするように気をつけましょう。

今回は、HTML5における<colgroup>タグの使い方をご紹介します。

HTML5における<colgroup>タグの使い方

表の縦列をグループ化して、まとめて属性やスタイルを適用します。必ず<table>〜</table>の中に設置します。<colgroup>は以下のように記述して使用します。

<colgroup> 〜 </colgroup>

<colgroup>は、<span>属性でまとめたい列数を指定して使用します。以下のように記述した場合、縦列を2列指定していることになります。<colgropu>で、span要素を使用した場合、<col>要素は使用することができません。

<colgroup span="2" ></colgroup>

直接スタイルを指定せずCSSに記述したい場合は、以下のようにidを指定して、CSS でスタイルを記述します。

<colgroup span="2" id="sample1"></colgroup>
<colgroup span="3" id="sample2"></colgroup>