HTML5|on Note

HTML5で使用する要素

on Note

colgroup要素

colgroup要素を使うことで、親要素であるtable要素の表内で、1つ以上の列をまとめて1つのグループにする。列をグループ化することで、その列に意味を持たせることができる他、CSSを使ってグループ単位でスタイルを指定できる。

グループ化の対象とする列は、colgroup要素のspan属性、または記述するcol要素で指定する。

colgroup要素は、table要素内でcaption要素の後ろ、thead、tbody、tfoot、trの各要素の前に記述する。

colgroup要素で指定できる属性

span属性
span="数値"
列の数を1以上の整数で指定。
グローバル属性
グローバル属性参照。

colgroup要素が子要素にできるもの

colgroup要素自身がspan属性を持つか持たないかによって、子要素にできるものが変わる。

span属性を持たない場合、子要素にできるものはcol要素

span属性を持つ場合、子要素にできるものはない。この場合の(span属性を持つ)colgroup要素は空要素になる

span属性を使って対象の列を指定する

span属性を使う際は、値として「1」以上の整数を指定する。グループ化する列の数をspan属性の値で示す

この場合、colgroup要素は子要素やコンテンツを持たない空要素となる。

<table border="">
<caption>テーブルタイトル</caption>
<colgroup span="2" class="abc">
<tbody>
(省略)
</tbody>
</table>

子要素にcol要素を含めて対象の列を指定する

子要素にcol要素を含める際は、グループに含める各列をcol要素で指定する。グループ化する列の数を記述するcol要素の数で示す

この場合、colgroup要素にspan属性は指定しない

<table border="">
<caption>テーブルタイトル</caption>
<colgroup class="abc"><col><col></colgroup>
<colgroup class="def"><col><col></colgroup>
<tbody>
(省略)
</tbody>
</table>
メニュー