ホームページ作成/HTML・スタイルシート(CSS)の基礎

表の1列すべてに背景色を付ける方法(3ページ目)

表を作成する際、1行(横)や1列(縦)全体を同じ背景色で塗りたい場合がありますね。セル1つ1つに背景色を指定するのは面倒すぎます。1列まとめて一気に背景色や属性などを指定する方法をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

備考: <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>でスタイルを指定する方が、 用途的に合っているような気がします。

そのように記述してみた例:
※見え方は前ページの場合と同じです。
MEDIA PLICE LIST
メディア 容量 価格 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の仕様に含まれる要素ですから、そのうち多くのブラウザで表示できるようになるでしょう。

おわりに

今回は、表の列全体に背景色などをまとめて指定する方法をご紹介致しました。
ぜひ、ご活用下さい。

【関連記事】

【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます