Oggi ci inoltreremo nella struttura delle tabelle , e più dettagliatamente il settaggio dei bordi con Cellpadding e Cellspacing a 0 senza dichiararlo dall’html, utilizzando il foglio di stile css:
Il codice incriminante è:
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td></td> </tr> </table>
Questa guida è dedicata sopratutto a chi ama l’automatizzazione da foglio di stile, avendo il controllo totale di qualsiasi elemento all’interno delle proprie pagine senza dover lasciare intatto nelle pagine codice non modificabile direttamente da css.
Prima di inoltrarci nel problema è bene spiegare velocemente la differenza tra cellpadding e cellspacing
Spacing a 10, distanzierà le singole celle l’una con l’altra di 10 pixels come in figura
<table border="0" cellpadding="0" cellspacing="10" > <tr><td></td></tr> </table> |
 |
Inoltre padding a 10, distanzierà il contenuto delle celle dal proprio bordo sinistro e destro di 10 pixels come in figura
<table border="0" cellpadding="10" cellspacing="10" > <tr><td></td></tr> </table> |
 |
Utilizzando l’HTML per rimuovere lo spazio tra le celle è molto semplice, infatti basta inserire dopo il tag table:
cellpadding="0" cellspacing="0"
che produce come risultato:
 |
 |
Bhe, vi dò un ottima notizia per codificarla in css basterà 1 sola dichiarazione per avere un risultato identico.
<style type="text/css">
.classetabella{border-spacing:0;}
</style>
<table class="classetabella" >
<tr>
<td style="background:blue;" width="100" height="100"> </td>
<td style="background:yellow;"> </td>
</tr>
<tr>
<td style="background:green;"> </td>
<td style="background:red;" width="100" height="100"> </td>
</table>