/ Code Css border-spacing | Résultat du code Css border-spacing | Copie d'écran / J'ai vu une erreur dans cette page

Exemple de code de la propriété CSS border-spacing.

<style>
.border-spacing-1{  : 5px; } 
.border-spacing-2{  : 5px 20px; } 

.exemple{ margin-bottom:5px; width:300px}
.exemple td {background-color : #FFEFD5; padding :2px; }
.exemple, .exemple td { border:1px solid red; }
.exemple + .exemple{ margin-bottom:10px; }
/* simule un effet border-spacing pour les bordures du table */
table.padding { padding:10px}
/* annule l'effet border-spacing */
table.collapse {border-collapse : collapse; }
</style>
Sans propriété Css border-spacing
<table class="exemple" cellspacing="10">
 <tr> 
  <td>Avec attribut cellspacing</td>
  <td>  </td>
 </tr>
 <tr> 
  <td>Avec attribut cellspacing</td>
  <td>  </td>
 </tr>
</table>
<table class="exemple">
 <tr> 
  <td>Sans attribut cellspacing</td>
  <td>  </td>
 </tr>
<tr> 
  <td>Sans attribut cellspacing</td>
  <td>  </td>
 </tr>
</table>

table{ border-spacing : 5px} 
<table class="exemple border-spacing-1" cellspacing="10">
 <tr>
   <td>Avec attribut cellspacing</td>
   <td></td>
 </tr>
 <tr> 
  <td>Avec attribut cellspacing</td>
  <td>  </td>
 </tr>
</table>
<table class="exemple border-spacing-1">
 <tr> 
  <td>Sans attribut cellspacing</td>
  <td>  </td>
 </tr>
  <tr> 
  <td>Sans attribut cellspacing</td>
  <td>  </td>
 </tr>
</table>

table{ border-spacing : 5px 20px } 
<table class="exemple border-spacing-2" cellspacing="10">
 <tr> 
  <td>Avec attribut cellspacing</td>
  <td>  </td>
 </tr>
  <tr> 
  <td>Avec attribut cellspacing</td>
  <td>  </td>
 </tr>
</table>
<table class="exemple border-spacing-2">
 <tr> 
  <td>Sans attribut cellspacing</td>
  <td>  </td>
 </tr>
 <tr> 
  <td>Sans attribut cellspacing</td>
  <td>  </td>
 </tr>
</table>
  
table{ border-spacing : 5px 20px; padding:10px} 
<table class="exemple border-spacing-2 padding" cellspacing="10">
 <tr> 
  <td>Avec attribut cellspacing</td>
  <td>  </td>
 </tr>
  <tr> 
  <td>Avec attribut cellspacing</td>
  <td>  </td>
 </tr>
</table>
<table class="exemple border-spacing-2 padding">
 <tr> 
  <td>Sans attribut cellspacing</td>
  <td>  </td>
 </tr>
 <tr> 
  <td>Sans attribut cellspacing</td>
  <td>  </td>
 </tr>
</table>

table{ border-spacing : 5px 20px; border-collapse : collapse; } 
<table class="exemple border-spacing-2 collapse" cellspacing="10">
 <tr> 
  <td>Avec attribut cellspacing</td>
  <td>  </td>
 </tr>
  <tr> 
  <td>Avec attribut cellspacing</td>
  <td>  </td>
 </tr>
</table>
<table class="exemple border-spacing-2 collapse">
 <tr> 
  <td>Sans attribut cellspacing</td>
  <td>  </td>
 </tr>
 <tr> 
  <td>Sans attribut cellspacing</td>
  <td>  </td>
 </tr>
</table>

Interprétation du code de la propriété border-spacing CSS par votre navigateur.

Sans propriété Css border-spacing
Avec attribut cellspacing
Avec attribut cellspacing
Sans attribut cellspacing
Sans attribut cellspacing
table{ border-spacing : 5px}
Avec attribut cellspacing
Avec attribut cellspacing
Sans attribut cellspacing
Sans attribut cellspacing
table{ border-spacing : 5px 20px }
Avec attribut cellspacing
Avec attribut cellspacing
Sans attribut cellspacing
Sans attribut cellspacing
table{ border-spacing : 5px 20px; padding:10px}
Avec attribut cellspacing
Avec attribut cellspacing
Sans attribut cellspacing
Sans attribut cellspacing
table{ border-spacing : 5px 20px; border-collapse : collapse;}
Avec attribut cellspacing
Avec attribut cellspacing
Sans attribut cellspacing
Sans attribut cellspacing

Interprétation normale du code de la propriété CSS border-spacing (copie d'écran).

copie d'écran de l'affichage de la propriété CSS border-spacing