ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >テーブル

テーブルやセルに画像を指定する

{background-image:url(画像);}でテーブル全体、セルに画像を指定するこ とが出来ます。


背景画像の細かな指定方法は ボックスの背景画像の表示方法を指定する の項目を参照してください。 下の2番目の例では上の2つのセルは行全体に画像に指定し 下の2つのセルは個別に画像を指定しています。

【ブラウザ表示】

画像

画像画像
画像画像

ソース

<table class="sample9">
<tr>
<td>画像</td>
</tr>
</table>
<table class="bor1">
<tr class="gyou1">
<td class="bou1">画像</td><td class="bou1">画像</td>
</tr>
<tr>
<td class="bor2">画像</td><td class="bor2">画像</td>
</tr>
</table>

外部ファイル

table.sample9{
border:1px black solid;
background-image:url(../image/ichigo.gif);
}
table.bor1{border:1px black solid;}
tr.gyou1{background-image:url(../image/ichigo.gif);}
td.bou1{border:1px black solid;}
td.bor2{
border:1px black solid;
background-image:url(../image/ball3.gif);}


<body>〜</body>に直接記入する場合

<table style="border:1px black solid; background-image:url(../image/ichigo.gif); ">
<tr>
<td>画像</td>
</tr>
</table>
<table style="border:1px black solid;">
<tr style="background-image:url(../image/ichigo.gif);">
<td style="border:1px black solid;">画像</td>
<td style="border:1px black solid;">画像</td>
</tr>
<tr>
<td style="border:1px black solid; background-image:url(../image/ball3.gif);">画像</td>
<td style="border:1px black solid; background-image:url(../image/ball3.gif);">画像</td>
</tr>
</table>

■ 背景画像を指定しない

{background-image:none;}でテーブルやセルの 背景画像を指定しないようにすることができます。(デフォルト)
下の例ではテーブル全体は背景画像を指定していません。セルの 背景画像は行全体の背景画像をイチゴの画像にしていますが 右側のセルだけnoneを指定しているので背景画像は 表示されません。

【ブラウザ表示】

イチゴ画像になっています背景画像無し

ソース

<table class="gazounashi">
<tr class="gyo3">
<td class="bo3">イチゴ画像になっています</td>
<td class="gazounashi2">背景画像無し</td>
</tr>
</table>

外部ファイル

table.gazounashi{
border:1px black solid;
background-image:none;
}
tr.gyo3{background-image:url(../image/ichigo.gif);}
td.bo3{border:1px black solid;}
td.gazounashi2{
border:1px black solid;
background-image:none;
}


<body>〜</body>に直接記入する場合

<table style="border:1px black solid; background-image:none;">
<tr style="background-image:url(../image/ichigo.gif);">
<td style="border:1px black solid;">イチゴ画像になっています</td>
<td style="border:1px black solid; background-image:none;">
背景画像無し
</td>
</tr>
</table>

■ その他の項目

枠線の太さ、色、種類を指定する
枠線を重ねて表示する
テーブルやセルの幅、高さを指定する
外側、内側の余白を指定する
セルの文字の位置を指定する
テーブルに文字を回り込ませる
テーブルやセルに背景色を指定する

スタイルシート一覧のページに戻る

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.