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

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

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

【ブラウザ表示】

画像

画像	画像
画像	画像

ソース

外部ファイル

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>に直接記入する場合

■ 背景画像を指定しない

{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>

Follow @hp_master_2003

■ その他の項目

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

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

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

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

■ 背景画像を指定しない

■ その他の項目

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