WEB技術の辞書・解説・使用例

TOP > HTML >  HTMLタグ辞典 >  <col>
<col>  テーブル  表  グループ化 

表の縦列の属性をまとめて指定する。

<COL>とはColumnの略で。テーブルのカラム（列）グループに対して、横幅のサイズや文字配置など一括指定します。

使用上の注意

・<COLGROUP>や<COL>は、 <TABLE>内の<CAPTION>より後、<THEAD>より前に置いてください。
・<COL>タグを<COLGROUP>タグの中に置くようにしてください。

<COL>タグと<COLGROUP>タグの違い

<COLGROUP>タグが縦列を構造的な意味でグループ化するのに対し、 <COL>タグは縦列をグループ化しないということです。

主要なパラメーター

span="グループ化する縦列数"
グループ化する縦列の数を1以上の整数で指定します。span="3"とすると、3列分まとめて指定できます。初期値は1。
<COLGROUP>内に<COL>を含んでいる場合には、この属性は無視されます。

width="n"
指定した各縦列の幅の初期値を指定します。<COLGROUP>で幅が指定されている場合でも、その内部の<COL>で幅を指定すると、<COL>で指定した幅が優先されます。

align="left/right/center/justify/char" …横方向の文字位置
　left（左寄せ）、right（右寄せ）、center（中央揃え）、justify（両端揃え）、char（char属性で指定した文字の位置を揃える）

valign="top/middle/bottom/baseline" …縦方向の文字位置
　top（上寄せ）、middle（中央揃え）、bottom（下寄せ）、baseline（1行目のベースラインを揃える）

bgcolor="色" …背景色を指定。

その他のパラメーター

char="x" …位置を揃える文字
　align="char"とした場合の、位置を揃える文字を指定。初期値は｢.（ピリオド）｣。

charoff="位置を揃える文字までの距離"
　align="char"とした場合の、セルの端からchar属性で指定した文字までの距離を指定します。セル内に指定文字がない場合には、末尾が指定文字の直前に揃えられます。

サンプルコード

<table border="1">
<caption>成績表</caption>
<colgroup align="center" bgcolor="skyblue">
<col span="2" width="100">
</colgroup>

<colgroup>
<col width="50" bgcolor="green">
<col width="150" bgcolor="orange">
</colgroup>
 <thead>
<tr><th>名前</th><th>国語</th><th>数学</th><th>物理</th></tr>
</thead>

<tbody>
<tr><td>青木</td><td>90</td><td>80</td><td>100</td></tr>
<tr><td>太田</td><td>85</td><td>50</td><td>80</td></tr>
<tr><td>加藤</td><td>70</td><td>65</td><td>75</td></tr>
<tr><td>山田</td><td>80</td><td>70</td><td>90</td></tr>
</tbody>
</table>

成績表
名前国語数学物理
青木9080100
太田855080
加藤706575
山田807090

HTMLの一般属性

属性説明
class="～"クラス名を指定。使用例
id="～"IDを指定します。使用例
style="～"スタイルシートを直接記述。使用例
title="～"タイトルを指定します。
dir="ltr|rtl"文字の表示方向を指定。 ltr(左から右)、rtl(右から左)
lang="～"言語を指定。日本語の場合は"ja"