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

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


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

 Cellspacingとは?

cellspacing
テーブルのセル間隔を指定する属性です

 Cellspacingの扱い方

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

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

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

HTMLソース- - - - - - -
<table width="300" border="0" cellspacing="5" cellpadding="0">
<tr>
<td></td>
<td></td>
<td></td></tr></table>
- - - - - - - - - - - - - -
単純に上のように書くと、セルの中に入っているデータ量に応じてセルの幅が自動的にきめられます。 幅が300pxより小さく見えるのは、cellspacingには色が付かないからです。(余白なので当然ですが^^;)
では、TD width="100" を指定してみます。

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

HTMLソース- - - - - - -
<table width="300" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="100"></td>
<td width="100"></td>
<td width="100"></td></tr></table>
- - - - - - - - - - - - - -
Internet Explorerを使っている人にはきちんと3等分されたように見えるかもしれませんが、同じTABLEをNetscapeで見ると崩れています。

=> Windows NN4.7 view(スクリーンショットの画像)

どこか書き方が間違っているので崩れるわけなのです。
cellspacingはTD widthに含まれないのかな?
300(幅) - 5 * 4(余白が4つ) = 280
280 / 3 = 93 あまり1 (^^;)
ということで、TDを93、93、94で割ってみます。

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

HTMLソース- - - - - - -
<table width="300" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="93"></td>
<td width="93"></td>
<td width="94"></td></tr></table>
- - - - - - - - - - - - - -
今度はNetscapeでもきちんと3等分されています(正確には1pxずれています)

=> Windows NN4.7 view(スクリーンショットの画像)

cellspacingは、TD widthに含まれないようです。
このセルの中にピッタリとspacer.gifを収めるには、



 

HTMLソース- - - - - - -
<table width="300" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="93">
<img src="spacer.gif" width="93" height="1"></td>
<td width="93">
<img src="spacer.gif" width="93" height="1"></td>
<td width="94">
<img src="spacer.gif" width="94" height="1"></td></tr></table>
- - - - - - - - - - - - - -
で、いいですね(^^)p

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