TABLEタグ・要素背景画像設定

え？！テーブルにも背景画像？！『TABLE BACKGROUND(HTML) BACKGROUND-IMAGE(CSS)編』

TABLEタグ背景画像設定

TABLEに背景画像を設定するには

　W3C仕様HTML4ではtable要素・タグに限らず、背景画像を設定するには以下の4つの方法がありますが、HTML4においても下記1.項のHTML属性による設定方法は非推奨となっており、CSSによる設定もCSS1で2.項、3.項が定義されましたが、CSS2(CSS 2.0/CSS 2.1)含む以降はスタイル設定には4.項のCSS外部ファイル設定が推奨されます。

table要素のbackground属性を設定
(HTML3.2で定義／【W3C非推奨】)
table要素のstyle属性にCSS設定
(CSS1/HTML3.2で定義)
headタグ内でstyle要素を定義、その内側でCSS設定
(CSS1/HTML4で定義)
CSS専用ファイルに設定しHTML/XHTMLファイルに読み込んで設定
(CSS2/HTML4で定義)

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

　このHTMLの[background]アトリビュート(属性)は背景画像しか設定できませんが、CSSにおける背景関係のプロパティには、スペース区切りで背景画像以外にも複数まとめて設定可能な同名のbackgroundプロパティと背景画像を設定できるbackground-imageプロパティのように個々に特化した設定を行うことができるプロパティがあります(異なるプロパティ設定の区切りはセミコロン)。

　以降、CSSによる設定は、HTML/XHTML共通でCSSプロパティの記述は、CSSプロパティ設定方法、URL指定方法はCSS URI/URL/URN設定方法の要領で設定します。

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

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

<html>

<head>

<style>

table { background:url('画像ファイルパス') }

または

table { background-image:url('画像ファイルパス') }

</style>

</head>

<body>