Jak całkowicie usunąć obramowanie z tabeli HTML

Moim celem jest stworzenie strony HTML podobnej do „ramki na zdjęcia”. Innymi słowy, chcę zrobić pustą stronę otoczoną 4 obrazkami.

To jest mój kod:

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

A klasy CSS są następujące:

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

Mój problem polega na tym, że między komórkami tabeli pojawiają się cienkie białe linie, chodzi mi o to, że obramowanie zdjęć nie jest ciągłe. Jak mogę uniknąć tych spacji?

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

A w css:

table {border: none;}

EDYCJA: Jak zauważył iGEL, to rozwiązanie jest oficjalnie przestarzałe (chociaż nadal działa), więc jeśli zaczynasz od zera, powinieneś skorzystać z rozwiązania jnpcl border-collapse.

Jak dotąd nie podoba mi się ta zmiana (nie pracuję tak często z tabelami). To sprawia, że ​​niektóre zadania są nieco bardziej skomplikowane. Np. Gdy chcesz zawrzeć dwie różne obramowania w tym samym miejscu (wizualnie), podczas gdy jedna jest NA GÓRZE w jednym rzędzie, a druga na DOLE w drugim. Zawalą się (= zostanie wyświetlony tylko jeden z nich). Następnie musisz zbadać, w jaki sposób obliczany jest „priorytet” obramowania i jakie style obramowania są „silniejsze” (podwójne czy pełne itp.).

Podobało mi się to:

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

Teraz, w przypadku zwinięcia obramowania, to nie zadziała, ponieważ zawsze jest usuwane jedno obramowanie. Muszę to zrobić w inny sposób (rozwiązań jest więcej). Jedną z możliwości jest użycie CSS3 z 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>

Możesz także użyć stylu obramowania „groove | ridge | inset | outset” z pojedynczym obramowaniem. Ale dla mnie to nie jest optymalne, ponieważ nie mogę kontrolować obu kolorów.

Może jest jakieś proste i fajne rozwiązanie na zawalenie granic, ale jeszcze go nie widziałem i szczerze mówiąc nie spędziłem nad tym zbyt wiele czasu. Może ktoś tutaj będzie mógł mi / nas pokazać;)

table {
    border-collapse: collapse;
}

Dla mnie musiałem zrobić coś takiego, aby całkowicie usunąć obramowania ze stołu i wszystkich komórek. Nie wymaga to w ogóle modyfikowania HTML, co było pomocne w moim przypadku.

table, tr, td {
    border: none;
}

W środowisku bootstrap żadna z najpopularniejszych odpowiedzi nie pomogła, ale zastosowanie następujących zasad usunęło wszystkie granice:

.noBorder {
    border:none !important;
}

Stosowany jako:

<td class="noBorder">

W środowisku bootstrap oto moje rozwiązanie:

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

Oto, co rozwiązało problem dla mnie:

W tagu HTML tr dodaj to:

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

Spowodowało to usunięcie wszystkich granic wyświetlanych w wierszu tabeli.