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

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

【ブラウザ表示】

<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);}

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

■ 背景画像を指定しない

【ブラウザ表示】

<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;
}

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

■ その他の項目

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