1行・1列すべてに背景色を付けるには
表に背景色を塗りたい場合、「セル単位」ではなく、「1行すべて」や「1列すべて」に同じ色を塗りたい場合があります。
「1行すべて」(横方向)の場合は比較的簡単ですが、「1列すべて」(縦方向)の場合はどうすれば良いでしょうか?
今回は、その方法をご紹介致します。
まずは、簡単な「1行すべて」の方からご紹介致しましょう。
1行すべてに背景色を付けるには
表に背景色を塗りたい場合、「1行すべて」(=横方向)に塗るのは簡単です。
表の1行は、tr要素(<tr>~</tr>)で構成されていますから、このtr要素に対して背景色を指定すれば良いだけです。
以下に、表示サンプルとソースを掲載しておきます。
メディア | 容量 | 価格 | 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列すべて」(=縦方向)に背景色を付けたい場合は、どうすればよいでしょうか?