<COL>
テーブル（表）のたて列の属性をまとめて指定する
Columnの略である<COL>は<COLGROUP>タグと同様、表の縦列の属性をまとめて指定したいときに使用します。<COLGROUP>や<COL>で各列の幅を指定しておく事で、ブラウザによっては表データの読み込みがすべて終わるのを待たずに横一行づつ表示させることが可能です。
<TABLE>内の<CAPTION>より後、<THEAD>より前に置いてください。また<CALGROUP>タグと併用する際には<COL>タグを<COLGROUP>タグの中に置くようにしてください。終了タグ</COL>は省略が可能です。
<COLGROUP>と<COL>タグは<COLGROUP>タグが縦列を構造的な意味でグループ化するのに対し、 <COL>タグは縦列をグループ化しないということです。
属性
- span="対象となる縦列数"
- 属性やスタイルシート設定の対象とする縦列の数を1以上の整数で指定します。この属性を指定しない場合、初期値は1となります。
- width="縦列の幅"
- 指定した各縦列の幅の初期値を指定します。<COLGROUP>で幅が指定されている場合でも、その内部の<COL>で幅を指定すると、<COL>で指定した幅が優先されます。
- align="横方向の位置揃え"
- left（左寄せ）、right（右寄せ）、center（中央揃え）、justify（両端揃え）、char（char属性で指定した文字の位置を揃える）
- valign="縦方向の位置揃え"
- top（上寄せ）、middle（中央揃え）、bottom（下寄せ）、baseline（1行目のベースラインを揃える）
- char="位置を揃える文字"
- align="char"とした場合の、位置を揃える文字を指定します。何も文字を指定しない場合の初期値は｢.（ピリオド）｣です。
- charoff="位置を揃えるまでの距離"
- align="char"とした場合の、セルの端からchar属性で指定した文字までの距離を指定します。セル内に指定文字がない場合には、末尾が指定文字の直前に揃えられます。
ソース
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>タイトル</title>
</head>
<body>
<table border="1" width="300" cellspacing="0" cellpadding="5" bordercolor="#333333">
<caption>取り扱い商品の説明</caption>
<colgroup align="center">
<col span="2" width="100">
</colgroup>
<colgroup>
<col width="100">
<col width="150">
</colgroup>
<thead>
<tr bgcolor="#000000">
<th><font color="#FFFFFF">製品名</font></th>
<th width="150"><font color="#FFFFFF">説明</font></th>
<th width="200"><font color="#FFFFFF">価格</font></th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3" bgcolor="#CCCCCC" align="right">商品仕様</td>
</tr>
</tfoot>
<tbody>
<tr>
<td bgcolor="#99CC00" align="right" nowrap>商品A</td>
<td bgcolor="#FFFFFF" valign="top" width="150">商品Bより頑丈である</td>
<td bgcolor="#FFFFFF" valign="top" width="200">800円</td>
</tr>
<tr>
<td bgcolor="#99CC00" align="right" nowrap>商品B</td>
<td bgcolor="#FFFFFF" valign="top" width="150">商品Aよりしなやかである</td>
<td bgcolor="#FFFFFF" valign="top" width="200">600円</td>
</tr>
</tbody>
</table>
</body>
</html>
対応ブラウザ
NS3・・・×- NS4・・・×
- NS6・・・○
- NS7・・・○
IE3・・・○- IE4・・・○
- IE5・・・○
- IE5.5・・・○
- IE6・・・○
O6・・・○- O7・・・○
FX1・・・○
更新履歴
- 2008.8.7
- linkページのリンクに、リンク先のサイトサムネイルを表示させるようにしました。
PORTFOLIOのページもサムネイルをクリックすることにより、画像を拡大して表示するようにしました。 - 2008.7.4
- linkに3件追加
- 2008.6.22
- Portfolioに1件追加
サイトデザイン修正 - 2008.6.17
- linkに1件追加
- 2008.1.19
- Portfolioに1点追加
- 2008.1.16
- Portfolioに2点追加
- 2007.9.29
- BLOG開始
- 2007.8.6
- HTMLに一件追加
- 2007.8.3
- サイトリニューアル
- 2007.6.19
- Portfolioに1点追加
- 2006.9.13
- Portfolioに1点追加
- 2006.8.11
- Portfolioに1点追加
- 2006.8.11
- Blog更新、BBS削除しました、LINKに1件追加
DARKNESS
このサイトへのリンクはフリーです。ご連絡していただければ相互リンクもいたします。リンクの際は下記バナをご利用ください。
- 31×31px
- 88×31px
- 188×29px