col要素(table column)は table要素内で表の横列に対してまとめて横幅やテキストの揃え方の属性を指定したり、スタイルシート(CSS)での見栄えを指定します。終了タグはなく、内容をもたない空要素です。
col要素にはグループ化という意味はないので、この要素自身は見栄えをまとめて調整するだけで特に意味を持っていません。列をグループに分けて表の構造をはっきりさせ、グループごとに属性や CSS でスタイルをまとめて指定をする場合は colgroup要素を使用します。col要素は colgroup要素内でも、または table要素の子要素として col要素だけでも定義できます。
col要素でまとめたセルに含まれる内容の幅寄せや、テキストの桁揃えを指定します。行揃えの初期値は、td要素は "left" に 、th要素は "center"(Firefox は "left")になっています。値には次の5つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません(case-insensitive)。
align属性が有効なのは Windows版Internet Explorer, Opera, Safari のみです。Netscape, Firefox の Gecko系と Macintosh版Internet Explorer 5 では無効です。align属性は非推奨ではありませんが、td要素, th要素をセレクタに CSS の text-alignプロパティを指定することで同様の表現に代替できます。
align属性の値に "char" を指定した場合にセル内の位置揃えの軸となる文字を指定します。たとえば、日本語や英語であればピリオド(.)、フランス語であればカンマ(,)のように lang属性(XHTML では xml:lnag属性)で指定した言語に対応する小数点を指定することが可能です。"<col align="char" char=".">" のように指定すれば、セル内の文字がピリオド(.)に合わせて揃えられることが期待されます(現状、char属性に対応している UA はありません)。
char属性により位置揃えが指定された場合、charoff属性でその文字から水平方向にどの位置までずらして表示するかを指定します。たとえば、小数点以下2桁で揃えたい場合は、"<col align="char" char="." charoff="2">" と指定します。
また、文字揃えの際にずらす方向は dir属性による書字方向に依存します。dir属性の値が "ltr" の場合、左の余白からずれます。dir属性の値が "rtl" の場合、右の余白からずれます(仕様では char属性、及び charoff属性は必ずしもサポートする必要は無いとされているため対応している UA はありません)。
col要素でまとめる列数を "1" 以上の整数で指定します。まとめた列は col要素で定義した全ての属性を共有します。
初期値は "1" です。
col要素でまとめるセルの各幅を指定します。span属性の値に "2" 以上が指定された場合は複数の列のセル幅がそれぞれ width属性で指定された横幅で表示されます。Safari では span属性の値に "2" 以上が指定されると、width属性の指定は無効になります。col要素の width属性は非推奨ではありませんが、CSS の widthプロパティで同様の表現に代替できます。
width属性に指定できる値は MultiLength となっています。これは整数(ピクセル数で解釈)、パーセンテージ値(%)の他に相対比率を指定することが可能であることを意味します。整数はピクセル数による固定、パーセンテージ値(%)は表示域の横幅に対する割合です。そして相対比率の指定とは、分割可能なセルについて、アスタリスク(*)のついた整数の比率に従って分配します。値が "*" の場合、これは "1*" として計測します。たとえば、整数指定のピクセル値とパーセント値を割り当て終え、残り 60px分の横幅の指定が可能で、"<col width="*"><col width="2*"><col width="3*">" と分配した場合、1番目の "*" には 10px, 2番目の "2*" には 20px, "3*" には 30px が割り当てられることになります。
col要素でまとめたセルに含まれる内容の垂直(上下)方向の揃え方を指定します。値には次の4つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません(case-insensitive)。
valign属性が有効なのは Windows版Internet Explorer, Opera, Safari のみです。Netscape, Firefox の Gecko系と Macintosh版Internet Explorer 5 では無効です。valign属性は非推奨ではありませんが、td要素, th要素をセレクタに CSS の vertical-alignプロパティで同様の表現に代替できます。
<table border="1"> <caption>保元の乱</caption> <colgroup span="5" align="right"><col> <col style="background:#f96;"><col style="background:#ffc;"> <col style="background:#9fc;"><col style="background:#69f;"> </colgroup> <tr><th></th><th>天皇家</th><th>藤原氏</th><th>平氏</th><th>源氏</th></tr> <tr><th>天皇方</th><td>後白河</td><td>忠通</td><td>清盛</td><td>義朝</td></tr> <tr><th>上皇方</th><td>崇徳</td><td>頼長</td><td>忠正</td><td>為義</td></tr> </table>
http://w3g.jp/xhtml/dic/col実績:大阪学院 入試サイト New! / 三田市民病院 / 神戸女学院大学 入試サイト / 釣りサンデー