[解決済み] HTMLのテーブルからボーダーを完全に削除する方法

質問

私の目標は、フォトフレームに似たHTMLページを作成することです。つまり、4枚の写真に囲まれた空白のページを作りたいのです。

これは私のコードです。

<table>
    <tr>
        <td class="bTop" colspan="3">
        </td>
    </tr>
    <tr>
        <td class="bLeft">
        </td>
        <td class="middle">
        </td>
        <td class="bRight">
        </td>
    </tr>
    <tr>
        <td class="bBottom" colspan="3">
        </td>
    </tr>                                                    
</table>

そして、CSSのクラスは以下の通りです。

.bTop
{
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackLeft.jpg');    

}

.middle
{
    width: 536px;
    height: 280px;
}

.bRight
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackRight.jpg');    
}

.bBottom
{        
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackBottom.jpg');       
}

問題は、テーブルのセルとセルの間に細い白い線が入ることです。つまり、絵の境界線が連続していないのです。どうすれば、このような白いスペースを避けることができるでしょうか？

解決方法を教えてください。

<table cellspacing="0" cellpadding="0">

そしてcssで。

table {border: none;}

EDITです。 iGELが指摘したように、この解決策は公式に非推奨とされています（まだ動作はします）ので、ゼロから始めるのであれば、jnpclのborder-collapse解決策を採用すべきです。

私は今のところ、この変更がかなり嫌いです（それほど頻繁にテーブルを扱うわけではありませんが）。いくつかの作業が少し複雑になるからです。例えば、2つの異なるボーダーを同じ場所に（視覚的に）含めたい場合、1つはある行のトップで、もう1つは別の行のボトムになります。この場合、2つのボーダーは折り畳まれます（つまり、どちらか一方だけが表示されます）。その場合、ボーダーの優先順位がどのように計算されるのか、また、どのボーダースタイルがより強いのか（ダブルとソリッドなど）を研究する必要があります。

こんな感じでやってました。

<table cellspacing="0" cellpadding="0">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>

----------

.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}

さて、ボーダーの折りたたみでは、常にボーダーが1つ削除されるため、これはうまくいきません。他の方法で対処する必要があります（もちろん、もっと多くの解決策があります）。1つの可能性は、CSS3 の box-shadow を使用することです。

<table class="tab">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>​​​

<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​
</style>

groove|ridge|inset|outset" のようなボーダースタイルを使用して、単一のボーダーだけを使用することも可能です。しかし、私にとっては、両方の色を制御できないので、これは最適ではありません。

もしかしたら、ボーダーを折りたたむためのシンプルで素敵なソリューションがあるかもしれませんが、私はまだそれを見たことがありませんし、正直あまり時間を費やしていないのです。多分、ここの誰かが私/私たちに教えてくれるでしょう;)