{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>
■ その他の項目
・
枠線の太さ、色、種類を指定する
・
枠線を重ねて表示する
・
テーブルやセルの幅、高さを指定する
・
外側、内側の余白を指定する
・
セルの文字の位置を指定する
・
テーブルに文字を回り込ませる
・
テーブルやセルに背景色を指定する
スタイルシート一覧のページに戻る
|