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

表の1列すべてに背景色を付ける方法

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

1行・1列すべてに背景色を付けるには

表に背景色を塗りたい場合、「セル単位」ではなく、「1行すべて」や「1列すべて」に同じ色を塗りたい場合があります。

「1行すべて」(横方向)の場合は比較的簡単ですが、「1列すべて」(縦方向)の場合はどうすれば良いでしょうか?
今回は、その方法をご紹介致します。

まずは、簡単な「1行すべて」の方からご紹介致しましょう。

1行すべてに背景色を付けるには

表に背景色を塗りたい場合、「1行すべて」(=横方向)に塗るのは簡単です。
表の1行は、tr要素(<tr>~</tr>)で構成されていますから、このtr要素に対して背景色を指定すれば良いだけです。
以下に、表示サンプルとソースを掲載しておきます。

横1行に背景色を付けた例
メディア 容量 価格 1MBあたり
Floppy 1.44MB 40 27/MB
ZIP 100MB 900 9/MB
MO 640MB 500 0.781/MB
CD-R 700MB 40 0.057/MB
DVD-RAM 4.7GB 800 0.166/MB

<table>
<tr><td> ... </td></tr>
<tr style="backgroud-color:pink"><td> ... </td></tr>
<tr><td> ... </td></tr>
</table>
背景色を付けたい行の<tr>タグにstyle属性を追記して、スタイルシートで色を付加しています。背景色は「background-color」プロパティで指定できます。上記の例では、ピンク(pink)色を指定しています。

……というわけで、「1行すべて」に背景色を付ける方法は簡単です。
では、「1列すべて」(=縦方向)に背景色を付けたい場合は、どうすればよいでしょうか?

次のページへ続きます →

  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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