HTML CSS 講座 トップページへ

ホームページ作成 いまさらHTML,CSS講座
|  Home  |  ホームページ作成の知識  |  HTML 講座  |  HTML TABLE 講座  |  スタイルシート(CSS) 講座  |  携帯サイト 作成 講座  |
[HTMLテンプレートカテゴリ] [未分類カテゴリ]

いまさらHTML,CSS講座トップ > HTML4.01 TABLE 講座インデックス > テーブル table　背景
様々なブックマークサービスがご利用頂けます。

テーブル table 背景

■ bgcolor 属性 （非推奨）
表に背景色を指定します。
table要素に指定すると、表全体に、tr要素に指定すると、tr要素で囲まれた行全体に、th要素または、td要素に指定すると、各セルに背景色を指定することができます。
ソース  ソース　基本
表全体に指定
<table bgcolor="#c0c0c0">
　　<tr><td>1972</td><td>1973</td><td>1974</td></tr>
　　<tr><td>1975</td><td>1976</td><td>1977</td></tr>
</table>

行、セルに指定
<table>
　<tr bgcolor="#c0c0c0">
　　<td>1972</td><td>1973</td><td>1974</td>
　</tr>
　<tr>
　　<td>1975</td>
　　<td bgcolor="silver">1976</td>
　　<td>1977</td>
　</tr>
</table>

表示  表　示
 代替指定
background-colorプロパティで代替指定することが推奨されています。
■ background 属性
表に背景画像を指定します。
table要素に指定すると、表全体に、tr要素に指定すると、tr要素で囲まれた行全体に、th要素または、td要素に指定すると、各セルに背景画像を指定することができます。
ソース  ソース　基本
表全体に指定
<table background="back/back.png">
　　<tr><td>1972</td><td>1973</td><td>1974</td></tr>
　　<tr><td>1975</td><td>1976</td><td>1977</td></tr>
</table>

行、セルに指定
<table>
　<tr background="back/back.png">
　　<td>1972</td><td>1973</td><td>1974</td>
　</tr>
　<tr>
　　<td>1975</td>
　　<td background="back/back.png">1976</td>
　　<td>1977</td>
　</tr>
</table>

表示  表　示
 background属性
background属性はブラウザの独自機能の為、正式な仕様ではありません。
また、一部ブラウザでは、tr 属性には無効です。background-imageプロパティで代替指定しましょう。

テーブル　背景 スタイルシート
■ background-colorプロパティ
bgcolor属性の代わりに、background-colorプロパティで、背景色を指定することが推奨されています。
値はカラーネーム、又はRGBコードを指定します。
ソース  ソース　基本
<table style="background-color : #c0c0c0 ; ">
　<tr><td>1972</td></tr>
</table>
表示  表　示
■ background-imageプロパティ
background属性の代わりにbackground-imageプロパティで、背景画像を指定することが推奨されています。
値は、url( ) の括弧( ) 内に画像の所在となる URI を指定します。
ソース  ソース　基本
<table style="background-image : url(back/back.png) ; ">
　<tr><td>1972</td></tr>
</table>
表示  表　示
  スタイルを head 要素に記述する場合
指定するスタイルが多い場合、head要素でまとめて指定しておくと、body要素での記述を短くできます。また、細かくスタイルの指定もできます。
ソース  ソース　head要素
<style type="text/css">
<!--
.backcolor { background-color : #eeeeee ; }
.backimage { background-image : url(back/back.png) ; }
--> </style>
ソース  ソース　body要素

表全体に指定

<table class="backcolor">
　<tr><td>1972</td></tr>
　<tr><td>1973</td></tr>
</table>

列、セルに指定

<table>
　<tr class="backimage">
　　<td>1972</td>
　　<td>1973</td>
　　<td>1974</td>
　</tr>
　<tr>
　　<td class="backcolor">1975</td>
　　<td>1976</td>
　　<td class="backimage">1977</td>
　</tr>
</table>
表示  表　示
⇒ 背景関連のスタイルシート

(C) いまさらHTML CSS講座 2002-2008 All right reserved