備考: <colgroup> と <col>
前ページの例では、<colgroup>を次のように使用していました。
<colgroup span="1" class="Title"></colgroup> <colgroup span="2" class="Other"></colgroup> <colgroup span="1" class="Price"></colgroup>
<colgroup>~</colgroup>の中には何も含んでいません。
前ページの表は、次のように記述した方が分かりやすかったかも知れません。
<colgroup span="1" class="Title"></colgroup> <colgroup>
<col span="2" class="Other">
<col span="1" class="Price">
</colgroup>
<colgroup>~</colgroup>の中に、<col>タグが増えています。
しかし、指定している内容は変わりません。表示も全く同じです。
※<col>は空要素なので終了タグ(閉じるタグ)は存在しません。
<colgroup>は「列を構造的な意味でグループ化する要素」であり、 <col>は「列に対してスタイルシートや属性をまとめて指定するための要素」です。
その意味の違いだけで、できること(指定できる属性)は同じです。
前ページの例の表の場合、構造的には、「タイトル列」と「中身の列」の2つに分けられそうですから、 まず<colgroup>でその2つに分割してから、各列に<col>でスタイルを指定する方が、 用途的に合っているような気がします。
※見え方は前ページの場合と同じです。
メディア | 容量 | 価格 | 1MBあたり |
---|---|---|---|
FD | 1.44MB | 40円 | 27円/MB |
ZIP | 100MB | 900円 | 9円/MB |
MO | 640MB | 500円 | 0.781円/MB |
PD | 650MB | 1000円 | 1.538円/MB |
CD-R | 700MB | 50円 | 0.071円/MB |
MO (Giga) | 1.3GB | 1100円 | 0.826円/MB |
DVD-RAM | 4.7GB | 800円 | 0.166円/MB |
DVD-R/+R | 4.7GB | 600円 | 0.124円/MB |
※2002年11月現在、筆者の環境(Windows XP)で試したところ、 Internet Explorer 6.0 では完全に表示されました。Netscape Navigator 7.0 では、列の横幅の指定は有効でしたが、それ以外(背景色や右寄せの指定)は無効でした。 Opera 6.05 では、<col>に記述した場合のみ、列の横幅の指定だけ有効でしたが、それ以外は無効でした。
colgroup要素やcol要素は、特に独自拡張というわけではありません。HTMLの仕様に含まれる要素ですから、そのうち多くのブラウザで表示できるようになるでしょう。
おわりに
今回は、表の列全体に背景色などをまとめて指定する方法をご紹介致しました。
ぜひ、ご活用下さい。
【関連記事】