 |
角の丸いテーブルや可愛い模様の入ったテーブルを見かけることがありますよね！？
それには、こんなちょっとした技を使っているのです。
ちょっと面倒・・・なんて思うのはわたしだけかもしれないけれど（^^;
一度お試しください♪テーブル画像はMaterialページにもあります。
まずは、基本的なものから！ |
|
 |
 ▲ |
 |
| ▲ |
ここに文字を入れます。
わかり易いように枠を表示しています。
実際は、border=0にしてくださいね！
|
▲ |
 |
▲ |
 |
|
１．3×3のテーブルを作ります。
２．角のセルにそれぞれの画像を配置します。
３．▲のセルには、背景にそれぞれの画像を配置します。（背景にすることで、テーブルの大きさがお好みの大きさに！）
４．古いバージョンのネットスケープ用に▲のセルに
透明の画像を配置します。
※古いバージョンのNNでは、空のセルの背景が表示 されません。
５．中央のセルに文字を入れれば完成♪
下のタグを参考にしてくださいね。 |
<table border="0"
cellspacing="0" cellpadding="0">
<tr>
<td><img src="top1_l.gif"
width="25" height="25"></td>
<td background="top2_c.gif"
align="center">
<img src="spacer.gif"width="25"
height="25"></td>
<td><img src="top3_r.gif"
width="25" height="25"></td>
</tr>
<tr>
<td background="cen1_l.gif"></td>
<td> ここに文字を入れます。</td>
<td background="cen2_r.gif"></td>
</tr>
<tr>
<td><img src="bot1_l.gif"
width="25" height="25"></td>
<td background="bot2_c.gif"align="center">
<img src="spacer.gif"width="25"
height="25"> </td>
<td><img src="bot3_r.gif"
width="25" height="25"></td>
</tr>
</table> |
※１行目の「border/cellspacing/cellpadding」は必ず0に！
水色の文字の所は、使用する画像の名前に変えてください。
緑色の文字の「spacer.gif」は、透明の画像です。（旧NN対策）
|
|
|
では、ちょっと応用編！？
写真のネガ風にしてみましょう。
ネガ風画像はよろしければこちらからダウンロードしてね♪ |
|
|
|
１．まず、３行１列のテーブルを作ります。
２．一番上の行と一番下の行の背景にネガ風の画像を指定します。この時、行の高さは１行分だけしか表示されないので、画像の高さ分を指定してあげます。（ここでは20）
３．真ん中の行に好きな画像を貼り付けます。
４．上でも説明しましたが、旧NN対策に、一番上と一番下の行に透明の画像を1つ入れておきましょう。
これで、完成☆ |
<table border="0" cellspacing="0"
cellpadding="0" align="center">
<tr>
<td background="nega_t.gif"
height="20"><img src="spacer.gif"
width="20" height="20"></td>
</tr>
<tr>
<td><img src="●●.jpg" width="100"
height="75"><img src="●●.jpg" width="100"
height="75"></td>
</tr>
<tr>
<td background="nega_b.gif"
height="20"><img src="spacer.gif"
width="20" height="20"></td>
</tr>
</table> |
|
