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;}

編集： iGELが指摘したように、このソリューションは正式に非推奨になっています（ただし、機能します）。最初から始める場合は、jnpclのborder-collapseソリューションを使用する必要があります。

これまでのところ、この変更はかなり嫌いです（頻繁にテーブルを操作しないでください）。一部のタスクが少し複雑になります。たとえば、2つの異なる境界線を同じ場所に（視覚的に）含める場合、1つは1つの行のTOPで、もう1つは他の行のBOTTOMです。それらは崩壊します（=そのうちの1つだけが表示されます）。次に、ボーダーの「優先度」がどのように計算され、どのボーダースタイルが「より強い」か（ダブル対ソリッドなど）を調査する必要があります。

私はこれが好きでした：

<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つの境界線が削除されているため、これは機能しません。私は他の方法でそれをしなければなりません（cのより多くのソリューションがあります）。1つの可能性は、ボックスシャドウでCSS3を使用することです。

<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"ボーダースタイルのように、ボーダーを1つだけ使用することもできます。しかし、私には両方の色を制御できないため、これは最適ではありません。

おそらく、境界線を折りたたむためのシンプルで素晴らしい解決策があるかもしれませんが、私はまだそれを見ていません。多分ここの誰かが私/私たちを表示することができるでしょう;）

table {
    border-collapse: collapse;
}

私にとっては、テーブルとすべてのセルから境界線を完全に削除するために、このようなことをする必要がありました。これはHTMLを変更する必要がまったくないので、私の場合は役に立ちました。

table, tr, td {
    border: none;
}

ブートストラップ環境では、トップの回答はどれも役に立ちませんでしたが、以下を適用するとすべての境界が削除されました。

.noBorder {
    border:none !important;
}

適用：

<td class="noBorder">

ブートストラップ環境では、ここに私の解決策があります：

    <table style="border-collapse: collapse; border: none;">
        <tr style="border: none;">
            <td style="border: none;">
            </td>
        </tr>
    </table>    

これは私にとって問題を解決したものです：

HTML trタグに、これを追加します。

style="border-collapse: collapse; border: none;"

これにより、テーブルの行に表示されていたすべての境界線が削除されました。