col要素

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

col要素は表の列の見栄えを変更することを目的にしています。col要素にはグループ化の意味はありません。
colgroup要素を使わずにtable要素の子要素としてcol要素を使うこともできます。
caption要素がある場合その次に書きます。ない場合はtable要素とtr要素の間に書きます。col要素は終了タグがありません。
列を分けるときはspan属性を使います。値には列の数をいれます。span属性の値を2にすると縦2列を指定できます。cssでspan属性で指定した縦の列ごとにデザインを指定ができます。

内容にできる要素

なし

<table border="1" width="200">
<colgroup span="2" align="right">
<col style="color: red;">
<col style="color: blue;">
</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

<col class="a"></col>

css

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

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

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

指定した縦の列のセルの中の内容の横方向の配置

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

col.a { text-align: center; }

指定した縦の列のセルの中の内容の縦方向の配置

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

col.a { vertical-align: top; }

要素の幅を変える

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

col.a { width: 100px; }

文字の大きさの指定

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

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

文字の斜体の指定

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

col.a { font-style: normal; }

文字の太さの指定

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

col.a { font-weight: normal; }

文字の配置指定

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

col.a { text-align: center; }

文字色の指定

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

col.a { color: red; }

共通属性

指定できる共通属性

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

イベント属性

イベント属性