※ ChatGPTを利用し、要約された質問です（原文：テーブルに関する質問です。）
このQ&Aのポイント
wordpressで作成したHPのテーブルが思った通りの形にならないため、htmlドキュメントで同じテーブルを作り直したが同じ現象が起きた。
テーブルのセルとセルの間隔を1pxにする方法がうまくいかず、2pxの間隔になってしまう。
一部のブラウザ（Firefox）では思った通りのレイアウトになるが、IE6では一行目のセルに線が付き抜けて表示されてしまう。
テーブルに関する質問です。
wordpressでHPを作っているのですが、テーブルが思った通りの形にならない為
試しにhtmlドキュメントで同じテーブルを作ろうと試みたのですが
やはり同じ現象が起き、思った通りのレイアウトにならないです。
一行目のテーブルと二行目のテーブルはくっつけて、
二行目の列のテーブルのセルとセルの間隔を1px空けてやりたいのですが
(1)のwidth:0;の空きセルを作って、それをセルとセルの間に挿入することによって
間隔を空けるという方法は、どうやっても1pxではなく2pxの間隔になってしまい、
(2)の白いborderをセルの右側だけに表示させるという方法では、
Firefoxでは思った通りのレイアウトなのですが、
IE6で見た場合に一行目のセルに線が付きぬけて表示されてしまいます。
色によっては誤魔化かされて付き出てない様に見えるのですが。
どうしたら良いでしょうか？
よろしくお願いします。
(1)
<HTML>
<HEAD>
<TITLE>テスト</TITLE>
<STYLE type="text/css">
<!--
table {
border-collapse: collapse;
border-spacing: 0;
}
a img {
border: none;
}
-->
</STYLE>
</HEAD>
<BODY>
<table border="0">
<tbody>
<td style="background-color:#b7a193; width: 300px; height: 30px; padding:0px" colspan="5"></td>
<tr>
<td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td>
<td style="background-color: #ffffff; width: 0px; height: 40px; border-collapse: collapse;"></td>
<td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td>
<td style="background-color: #ffffff; height: 40px; width: 0px; border-collapse: collapse;"></td>
<td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td>
</tbody>
</table>
</BODY>
</HTML>
(2)
<HTML>
<HEAD>
<TITLE>テスト</TITLE>
<STYLE type="text/css">
<!--
table {
border-collapse: collapse;
border-spacing: 0;
}
a img {
border: none;
}
-->
</STYLE>
</HEAD>
<BODY>
<table border="0">
<tbody>
<td style="background-color: b7a193; width: 300px; height: 30px; padding:0px" colspan="3"></td>
<tr>
<td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td>
<td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td>
<td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td>
</tbody>
</table>
</BODY>
</HTML>
お礼
こんばんわ。 とても判り易い説明とソースコードありがとうございます！ こんなに早く回答を頂けているとは思いませんでした。 borderのpx分、全体のセルのサイズも増やさなければならないのですね。 無事、HPにも適用する事が出来、IE6でもレイアウト崩れしなくなりました。 重ね重ね感謝です。