CSS border-spacing
La proprietà CSS border-spacing imposta lo spazio tra le celle della tabella (CSS3)
La proprietà border-spacing consente di aggiungere spazio tra le celle di una tabella. Può essere definito un singolo valore per lo spazio uniforme o due valori distinti per la distanza orizzontale e verticale.
Sintassi
Significato dei valori principali:
-
length: Imposta lo spazio tra le celle della tabella. Può essere un valore in pixel (
px), em (em), rem (rem), ecc. -
due valori: È possibile specificare due valori: il primo per la distanza tra le celle orizzontali (spazio tra le colonne), il secondo per la distanza tra le celle verticali (spazio tra le righe).
Esempio proprietà: border-spacing
Codice Esempio: border-spacing
table {
width: 80%;
border-collapse: separate; /* Necessario per applicare border-spacing */
border-spacing: 10px; /* Spazio di 10px tra le celle */
}th, td {
padding: 20px;
text-align: center;
border: 1px solid #50a14f;
}
Contenuto Esempio: border-spacing
Esempio di utilizzo di border-spacing
In questo esempio, la proprietà border-spacing viene utilizzata per aggiungere spazio tra le celle di una tabella:
| Nome | Cognome |
|---|---|
| Mario | Rossi |
| Luigi | Bianchi |
CSS e HTML per la tabella con spazio tra le celle:
<style>
table {
width: 80%;
border-collapse: separate; /* Necessario per applicare border-spacing */
border-spacing: 10px 20px; /* Spazio tra le celle 10px verticale, 20px orizzontale */
}
th, td {
padding: 20px;
text-align: center;
border: 1px solid #50a14f;
}
</style>
<table>
<tr>
<th>Nome</th>
<th>Cognome</th>
</tr>
<tr>
<td>Mario</td>
<td>Rossi</td>
</tr>
<tr>
<td>Luigi</td>
<td>Bianchi</td>
</tr>
</table>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
