colgroup要素

colgroup要素 表の縦の列をグループ化 table要素の子要素

colgroup要素は表の列をグループ化します。colgroup要素は見栄えを変更するだけでなくグループ分けの意味もあります。
caption要素がある場合その次に書きます。ない場合はtr要素の上に書きます。colgroup要素の内容は空でも大丈夫です。グループ分けするときはspan属性を使います。値にはグループ化する列の数をいれます。span属性の値を2にすると縦2列をグループ化できます。cssで縦の列のグループごとにデザインを指定できるので便利です。

内容にできる要素

col要素

<table border="1">
<colgroup span="1" style="color: red;"></colgroup>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>

実際の表示

セル	セル
セル	セル

指定できる属性

span属性

span属性でグループ分けできます。
値には何列を指定するか数字をいれます。

 span="2"

width属性

width属性で縦の列の幅を指定できます。
値にはpxをあらわす整数かパーセント

 width="100"

align属性

グループ化した縦の列の横方向の文字の配置をまとめて指定する。
値にはleft左寄せ center中寄せ right右寄せ justify両端揃え

 align="right"

valign属性

グループ化した縦の列の縦方向の文字の配置をまとめて指定する。
値にはtop 上揃え middle 中央揃え bottom 下揃え baseline ベースライン揃え

 valign="top"

cssでデザインを指定する場合

html

<colgroup class="a"></colgroup>

css

縦の列のセルの背景色の指定

値には色を表す値を指定します。

colgroup.a { background-color: #FFCC00; }

グループ化した縦の列のセルの中の内容の横方向の配置

値には「left」左揃え「center」中央揃え「right」右揃え

colgroup.a { text-align: center; }

グループ化した縦の列のセルの中の内容の縦方向の配置

表のセルの値にはbaseline、middle（中央揃え）、top（上揃え）、bottom（下揃え）

colgroup.a { vertical-align: top; }

要素の幅を変える

値には長さ、パーセンテージなど

colgroup.a { width: 100px; }

文字の大きさの指定

文字が大きすぎる場合や小さすぎる場合cssで文字の大きさを調整をします。

colgroup.a { font-size: 12px; }

文字の斜体の指定

em要素の内容の文字は斜体になります。普通に戻したい場合はnormalを指定します。
値には「italic」斜体（イタリック体）「normal」通常「oblique」斜体

colgroup.a { font-style: normal; }

文字の太さの指定

値には「bold」太字「normal」通常「bolder」やや太く「ligher」やや細く

colgroup.a { font-weight: normal; }

文字の配置指定

値には「left」左揃え「center」中央揃え「right」右揃え

colgroup.a { text-align: center; }

文字色の指定

値には色を指定する値が使えます

colgroup.a { color: red; }

共通属性

指定できる共通属性

id属性 class属性 style属性 title属性 lang属性 dir属性

イベント属性

イベント属性