ホームページ キッチントップへ
Q&Aマップ | サイトマップ
フリー素材ホームページ HTML レシピホームページの配色ホームページ作成 環境ホームページ作成 ソフト
ホームページ キッチントップへ

-- テーブルデザインのためのCellpadding講座 --


透明のGif画像はspacer.gifなどと呼ばれます。セルにつっかえ棒として入れるために、「セルの中身の大きさ」を知ろう。

ちなみに、ホームページキッチンでは「spacer.gif」ではなく「S.gif」としています。ファイル名を短くするだけで、結構軽くなるんだわ(笑) 興味のある方は、ブラウザの「表示」→「ソース」で見てみてね。

 Cellpaddingとは?

cellpadding
テーブルのセル(TD)内の余白を指定する属性です

 Cellpaddingの扱い方

300px、セル余白5pxのTABLEを3等分して、中にピッタリspacer.gifを入れてみよう!
一緒にやってみてね(^^)

(わかりやすいようにセルに色をつけています)

これは一番左のセルです。
これは真ん中です。

HTMLソース- - - - - - -
<table width="300" border="0" cellspacing="0" cellpadding="5">
<tr>
<td></td>
<td></td>
<td></td></tr></table>
- - - - - - - - - - - - - -
単純に上のように書くと、セルの中に入っているデータ量に応じてセルの幅が自動的にきめられます。
では、TD width="100" を指定してみます。

これは一番左のセルです。
これは真ん中です。

HTMLソース- - - - - - -
<table width="300" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="100"></td>
<td width="100"></td>
<td width="100"></td></tr></table>
- - - - - - - - - - - - - -
こんどは綺麗に3等分されました。

ではspacer.gifを入れてみよう。(透明ではなく黒色の画像にしています)
まずは、単純に、TD内に、100pxの幅のspacer.gifを入れてみます。



 

HTMLソース- - - - - - -
<table width="300" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="100">
<img src="spacer.gif" width="100" height="1"></td>
<td width="100">
<img src="spacer.gif" width="100" height="1"></td>
<td width="100">
<img src="spacer.gif" width="100" height="1"></td></tr></table>
- - - - - - - - - - - - - -
TABLEの幅が300pxを超えてしまっています。
これは、TD widthというのは、cellpaddingの余白も含んだ長さだからです。

100 (セル幅) - 5 * 2 (左右の余白) = 90

より、今度は幅90pxのspacer.gifを入れてみました。



 

HTMLソース- - - - - - -
<table width="300" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="100">
<img src="spacer.gif" width="90" height="1"></td>
<td width="100">
<img src="spacer.gif" width="90" height="1"></td>
<td width="100">
<img src="spacer.gif" width="90" height="1"></td></tr></table>
- - - - - - - - - - - - - -
ピッタリですね♪

このように、余白を指定してあるTABLEの中にspacer.gifを入れるときには余白を引いた長さで入れてくださいね(^^

考えるのが面倒な方は、TABLEの属性はすべて0にしましょう(^^;)


| レシピトップへ |
| トップページへ |
-- CopyRight(C) ホームページキッチン 2006 Haruyo --