TABLE要素・タグ背景色設定

TABLEに背景色を設定するには

　table要素・タグの背景に関する設定をする為には、HTMLの属性、またはCSSプロパティ設定の2通りあり、CSSの設定方法には3通りあるのでtable背景色を設定するには以下の4つの方法があります。

1. table要素のbgcolor属性を設定【W3C非推奨】
2. table要素のstyle属性にCSS設定
3. headタグ内でstyle要素を定義、その内側でCSS設定
4. CSS専用ファイルに設定しHTML/XHTMLファイルに読み込んで設定

　1.項のtable要素bgcolor属性の設定方法は下記の通りです。

<table bgcolor="色">     <!-- 【W3C非推奨】 -->

　但し、W3Cでは構造にはHTML/XHTMLなどのマークアップ言語、装飾にはCSSという方針を打ち出しており、HTML定義済みの装飾系の属性があってもそれは非推奨とされているので実質、CSS設定による3通り、更に中でもCSS2含む以降はCSS外部ファイル設定が推奨されます。

　CSSにおける背景関係のプロパティには、スペース区切りで背景色以外にも複数まとめて設定可能なbackgroundプロパティと背景色を設定できるbackground-colorプロパティのように個々に特化した設定を行うことができるプロパティがあります(異なるプロパティ設定の区切りはセミコロン)。

　まず、2.項のtable要素のstyle属性にCSSのbackground-colorまたはbackgroundプロパティを設定する方法(CSSインライン設定)は下記の通りです。

<table style="background:色">

<table style="background-color:色">

　記述は、CSSプロパティ設定方法、「色」はCSSカラーの要領で設定することができますが、table要素のstyle属性の値として設定する場合のみ波カッコ{ }が不要である点には注意が必要です。

　次に3.項のheadタグ内でstyle要素を定義、その内側でtable要素・タグにCSSのbackground-colorまたはbackgroundプロパティを設定する方法(CSSファイル内部設定)は下記の通りです。

　そして4.項は、このプロパティ設定部分だけを記述して別ファイルとして保存、HTML/XHTMLで読み込む為の設定をすれば、そのファイル内にCSS設定が適用されます。

　尚、この背景に関するプロパティは、tr/th/td...ブロックレベル要素、インライン要素に関わらず、HTML/XHTMLのほぼ全ての要素・タグに適用可能です。

え？！テーブルにも背景画像？！

関連リンク