col要素

html

html一覧

共通属性

イベント属性

css

プロパティの値

sponsored links

サイト情報

このサイトについて

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属性

イベント属性

イベント属性