Distanțări ale celulelor și spațieri între celulele tabelelor în HTML

Elementul <table> are trei atribute care oferă un control de bază asupra spațierii din jurul celulelor tabelului: chenar, distanțare și spațiere. Aceste trei atribute de tabel sunt similare cu proprietățile CSS chenar, umplutură și margine. Să vedem cum funcționează.

Mai întâi vom crea un tabel fără margini, distanțare sau spațiere între celule. Pentru a face lucrurile mai ușor de văzut, vom folosi CSS pentru a colora fundalul tabelului (verde) și celulele individuale ale tabelului (galben).

Exemplul 4.6. Tabel: fără spațiere

 <html>
 <cap>
 <stil>
 tabel { background: #009900; }
 td { background: #ffff00; }
 </stil>
 </cap>
 <corp>
 <tabel
 border="0" cellpadding="0" cellspacing="0"
 summary="Fără umplutură, spațiere sau chenare">
 <tr>
 <td>Celula stângă</td>
 <td>Celula din mijloc</td>
 <td>Celula din dreapta</td>
 </tr>
 </tabel>
 </corp>
 </html>

Fără chenar, spațiere sau distanțare celulară, cele trei celule ale noastre sunt atât de înghesuite încât nu putem vedea fundalul verde al tabelului – doar fundalul galben al celulelor individuale. Să încercăm să setăm fiecare dintre aceste atribute la „5” cinci pixeli) separat. Vom menține aceeași schemă de colorare verde și galben.

Exemplul 4.7. Tabel: 5px spațiere

 <html>
 <cap>
 <stil>
 tabel { background: #009900; }
 td { background: #ffff00; }
 </stil>
 </cap>
 <corp>

 <h4>Chenar de 5 pixeli</h4>
 <tabel
 border="5" cellpadding="0" cellspacing="0"
 summary="Tabel cu chenar de 5 pixeli">
 <tr>
 <td>Celula stângă</td>
 <td>Celula din mijloc</td>
 <td>Celula din dreapta</td>
 </tr>
 </tabel>

 <h4>5 px Cellpadding</h4>
 <tabel
 border="0" cellpadding="5" cellspacing="0"
 summary="Tabel cu 5px cellpadding">
 <tr>
 <td>Celula stângă</td>
 <td>Celula din mijloc</td>
 <td>Celula din dreapta</td>
 </tr>
 </tabel>

 <h4>Spațierea celulelor de 5 pixeli</h4>
 <tabel
 border="0" cellpadding="0" cellspacing="5"
 summary="Tabel cu spațierea celulelor de 5 pixeli">
 <tr>
 <td>Celula stângă</td>
 <td>Celula din mijloc</td>
 <td>Celula din dreapta</td>
 </tr>
 </tabel>

 </corp>
 </html>

Care sunt rezultatele?

În primul tabel, border=”5″. Vedem un chenar de cinci pixeli în jurul marginii tabelului.
În al doilea tabel, cellpadding=”5″. Dimensiunea fiecărei celule s-a extins cu cinci pixeli în fiecare direcție.
În al treilea tabel, cellspacing=”5″. Fiecare celulă este separată de vecinii ei de cinci pixeli. Această distanță ne permite să vedem fundalul verde al mesei în sine.

În cele din urmă, să setăm toate cele trei atribute. Vom seta chenarul la 5 px, spațierea dintre celule la 10 px și distanțierea celulei la 20 px.

Exemplul 4.8. Tabel: Spațiere variabilă

 <html>
 <cap>
 <stil>
 tabel { fundal: #009900;}
 td { background: #ffff00; }
 </stil>
 </cap>
 <corp>
 <tabel
 border="5" cellpadding="20" cellspacing="10"
 summary="Tabel cu chenar de 5 pixeli,
 20px cellpadding și 10px cellspacing">
 <tr>
 <td>Celula stângă</td>
 <td>Celula din mijloc</td>
 <td>Celula din dreapta</td>
 </tr>
 </tabel>
 </corp>
 </html>

Chenarul crestat din jurul tabelului are o lățime de cinci pixeli, celulele sunt la zece pixeli una de cealaltă, iar celulele în sine au douăzeci de pixeli de distanțiere. Unele browsere vor afișa chenarul colorat cu culoarea de fundal, verde; altele vor lăsa marginea crestată incoloră.