Як повністю видалити межі з таблиці 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.

Мені насправді дуже не подобається ця зміна (не працюйте з таблицями так часто). Це робить деякі завдання трохи складнішими. Наприклад, коли ви хочете включити дві різні рамки в одне місце (візуально), при цьому одна - TOP для одного рядка, а друга - BOTTOM для іншого рядка. Вони згортаються (= буде показаний лише один із них). Тоді ви повинні вивчити, як розраховується "пріоритет" кордону та які стилі кордону "сильніші" (подвійний проти твердого тощо).

Мені було так:

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

Тепер, при розпаді кордону, це не спрацює, оскільки завжди залишається одна межа. Я повинен це зробити іншим способом (є більше рішень ofc). Однією з можливостей є використання 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" "із лише однією рамкою. Але для мене це не оптимально, тому що я не можу контролювати обидва кольори.

Можливо, є якесь просте і приємне рішення для руйнування кордонів, але я цього ще не бачив і, чесно кажучи, не витратив на це багато часу. Можливо, хтось тут зможе показати мене / нас;)

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

Це видалило всі межі, які були показані на ряду столу.