Comment supprimer complètement les bordures du tableau HTML

Mon objectif est de créer une page HTML similaire à un "cadre photo". En d'autres termes, je souhaite créer une page vierge entourée de 4 images.

Voici mon code:

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

Et les classes CSS sont les suivantes:

.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');       
}

Mon problème est que j'obtiens de fines lignes blanches entre les cellules du tableau, je veux dire que la bordure des images n'est pas continue. Comment éviter ces espaces blancs?

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

Et en css:

table {border: none;}

EDIT: Comme iGEL l'a noté, cette solution est officiellement obsolète (fonctionne toujours cependant), donc si vous partez de zéro, vous devriez aller avec la solution border-collapse de jnpcl.

En fait, je n'aime pas vraiment ce changement jusqu'à présent (je ne travaille pas avec des tables très souvent). Cela rend certaines tâches un peu plus compliquées. Par exemple, lorsque vous souhaitez inclure deux bordures différentes au même endroit (visuellement), l'une étant TOP pour une ligne et la seconde étant BOTTOM pour l'autre ligne. Ils s'effondreront (= un seul d'entre eux sera affiché). Ensuite, vous devez étudier comment la "priorité" de la bordure est calculée et quels styles de bordure sont "plus forts" (double contre solide, etc.).

J'ai aimé ceci:

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

Maintenant, avec la réduction de la bordure, cela ne fonctionnera pas car il y a toujours une bordure supprimée. Je dois le faire d'une autre manière (il y a plus de solutions ofc). Une possibilité est d'utiliser CSS3 avec 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>

Vous pouvez également utiliser quelque chose comme le style de bordure "groove | ridge | inset | outset" avec une seule bordure. Mais pour moi, ce n'est pas optimal, car je ne peux pas contrôler les deux couleurs.

Il existe peut-être une solution simple et intéressante pour réduire les frontières, mais je ne l'ai pas encore vue et honnêtement, je n'y ai pas passé beaucoup de temps. Peut-être que quelqu'un ici pourra me / nous montrer;)

table {
    border-collapse: collapse;
}

Pour moi, j'avais besoin de faire quelque chose comme ça pour supprimer complètement les bordures du tableau et de toutes les cellules. Cela ne nécessite pas du tout de modifier le HTML, ce qui a été utile dans mon cas.

table, tr, td {
    border: none;
}

Dans un environnement bootstrap, aucune des principales réponses n'a aidé, mais l'application de ce qui suit a supprimé toutes les bordures:

.noBorder {
    border:none !important;
}

Appliqué comme:

<td class="noBorder">

Dans un environnement bootstrap, voici ma solution:

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

C'est ce qui a résolu le problème pour moi:

Dans votre balise HTML tr, ajoutez ceci:

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

Cela a supprimé toutes les bordures affichées sur la ligne du tableau.