気の向くままに辿るIT/ICT
webzoit.netウェブサイトホームページ
HTML/XHTMLタグ・要素・属性・属性値

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外部ファイル設定が推奨されます。

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

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

<table background="画像ファイルパス">     <!-- 【W3C非推奨】 -->

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

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

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

<table style="background:url('画像ファイルパス')">

<table style="background-image:url('画像ファイルパス')">

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

<html>
<head>
<style>

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

/*
または

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

*/
</style>
</head>

<body>

</body>

</html>

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

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

入力フォームを作りたい『FORMタグ編』

各種HTMLとHTMLタグ/要素・属性・属性値

ウェブ造ホーム前へ次へ