上下のBOXの隙間を取り除きたい

質問

現在外部CSSでHPを作っています。
ブラウザはIE6で、Dreamweaver4を使っています。

http://okwave.jp/qa3346133.html

上記で最初の質問をさせていただきました。
最初の質問とはタイトルが違うのですが、
解決していきつつ他の問題が出てきてしまったので
新規で再度質問をさせていただいています。

ページ内にエクセルの表のようなものを作りたいと思っています。
セルで例えて説明しますと、
A1にタイトル・B1に本文、A2にタイトル・B2に本文と繰り返し、
数十行の表を作ろうと思っています。

最初はAとBの高さもバラバラだったのですが、
何度もアドバイスをいただきABに入れる文言の文字数が違っても高さはあうようになりました。
ですが、A1B1とA2B2の間に16pxの隙間ができてしまい、ぴったり合わないのです。

左右上下ともに隙間がないものが理想です。
その隙間はどのようにして取り除けば良いですか？

どうか皆さまのお力をお貸しください。
よろしくお願いいたします。

回答No.1

chie65536

全体を「外枠なし、内枠なしの表」にして、一つ目のセルに中にA1B1を、２つ目のセルにA2B2を入れる。

はっきり言って、幅と高さを合わせ、隙間を開けないようにしようと思ったら、ＣＳＳ使ってる時点で「問題外」です。

1x1の透明のGIF画像を用意して、
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td><table cellspacing="0" cellpadding="0" border="0">
<tr>
<td></td>
<td><img border=0 src="1x1.gif" hieght=1 width=「全体の幅－１」></td>
</tr>
<tr>
<td><img border=0 src="1x1.gif" hieght=「タイトル１の高さ－１」 width=1></td>
<td>タイトル１</td>
</tr>
<tr>
<td><img border=0 src="1x1.gif" hieght=「本文１の高さ」 width=1></td>
<td>本文１</td>
</tr>
<tr>
<td><img border=0 src="1x1.gif" hieght=「タイトル２の高さ」 width=1></td>
<td>タイトル２</td>
</tr>
<tr>
<td><img border=0 src="1x1.gif" hieght=「本文２の高さ」 width=1></td>
<td>本文２</td>
</tr>
</table></td>
</tr>
</table>
と書きましょう。

「幅と高さを合わせ、隙間を開けないようにするには、tableを使う」が鉄則。
「幅、高さを固定するのにimgにhieghtかwidthを指定した透明画像を使う」のは、ブラウザの種類やバージョンに影響されず、一番確実だから。

ＣＳＳをマトモにサポートしてない古いブラウザで見た場合、質問者さんが何日も何時間もかけていた苦労は「すべて無駄骨」になります。古いブラウザでは確実に表示がグチャグチャになりますからね。

ＣＳＳで苦労して無駄骨になるなら、どんなに古いブラウザでもサポートしているtableタグを使いましょう。

お礼

ご回答ありがとうございます。
最初はtableを組んで作っていたのですが、
途中からCSSでできないだろうかと思い質問させていただきました。
やっぱりまだまだtableの方が良いということなのですね。
勉強になりました＾＾

しかし前回たくさんのアドバイスをいただき、
何もわからない状態からここまで来ることができましたので、
どうせなら解決したいと思っています。
もしお分かりになるようでしたらぜひ方法を教えてください。

よろしくお願い致します。