Stilizza i bordi delle tabelle HTML con CSS: border-collapse, border-spacing, linee per singola cella, righe alternate e angoli arrotondati. Playground dal vivo con CSS da copiare.
Per rendere visibili le linee di una tabella metti un bordo sulle celle th e td, poi aggiungi border-collapse: collapse alla tabella, così le celle vicine condividono una sola linea invece di disegnarne due. Per avere spazi tra le celle usa border-collapse: separate con border-spacing. Gli angoli arrotondati richiedono il modello separate, perché i bordi collassati ignorano border-radius.
Le proprietà dei bordi delle tabelle in sintesi
Obiettivo
CSS
Dove si applica
Linee della griglia singole e condivise
border-collapse: collapse
Linee attorno a ogni cella
border: 1px solid #ccc
th, td
Spazi tra le celle
border-spacing: 4px
table (solo modello separate)
Righe alternate
tbody tr:nth-child(even) { background: #f5f5f5 }
Angoli esterni arrotondati
border-radius + border-collapse: separate
table e celle d'angolo
Linee solo tra le righe
border-bottom: 1px solid #ddd
th, td
Le tabelle hanno regole proprie per i bordi, diverse da quelle dei normali box, quindi il CSS che funziona su un div spesso su una tabella dà un risultato sbagliato. Usa il playground per passare dal modello collassato a quello separato, cambiare spessore delle linee, spaziatura e raggio degli angoli, poi copia il CSS esatto che genera.
Scegli il modello collapse o separate nel playground e guarda le linee doppie unirsi o separarsi.
Scegli quali linee disegnare: una griglia completa, solo le righe o solo una cornice esterna.
Attiva le righe alternate o gli angoli arrotondati; l'arrotondamento passa automaticamente la tabella al modello separate.
Copia il CSS generato, oppure parti da uno degli esempi modificabili più in basso.
Metti i bordi sulle celle, non solo sull'elemento table. Un bordo solo sulla tabella disegna una cornice esterna e niente all'interno.
Usa border-spacing: 0 con il modello separate quando vuoi angoli arrotondati ma nessuno spazio visibile.
Alterna i colori solo sulle righe di tbody, così la riga di intestazione mantiene il suo sfondo.
Tieni chiari i colori delle linee e lascia che sia soprattutto il padding a separare; le griglie pesanti rendono i numeri più difficili da scorrere.
Racchiudi le tabelle larghe in un contenitore con overflow-x: auto, così sui telefoni scorre la tabella invece dell'intera pagina.
Domande frequenti
Perché la mia tabella mostra bordi doppi?
Il valore iniziale di border-collapse è separate, quindi ogni cella disegna il proprio bordo e due celle vicine finiscono affiancate. Imposta border-collapse: collapse sulla tabella e i bordi adiacenti si uniscono in una sola linea.
Perché border-radius non funziona sulla mia tabella?
Gli angoli arrotondati vengono ignorati nel modello a bordi collassati. Passa la tabella a border-collapse: separate, imposta border-spacing: 0, poi arrotonda le celle degli angoli esterni oppure racchiudi la tabella in un div con border-radius e overflow: hidden.
L'attributo HTML border è ancora consentito sulle tabelle?
Lo standard HTML elenca l'attributo border su table come obsoleto e indica di usare il CSS. I browser lo disegnano ancora per le pagine vecchie, ma il codice nuovo dovrebbe impostare i bordi in un foglio di stile, così una sola regola controlla tutte le tabelle.
Quali valori accetta border-spacing?
Una lunghezza imposta lo spazio sia in orizzontale sia in verticale. Due lunghezze impostano prima lo spazio orizzontale tra le colonne e poi quello verticale tra le righe, per esempio border-spacing: 8px 4px. Non ha effetto quando la tabella è collassata.
Come aggiungo un bordo a una sola colonna?
Seleziona le celle di quella colonna con un selettore come td:nth-child(2), th:nth-child(2) e dai loro un bordo sinistro o destro. Stilizzare direttamente le celle funziona allo stesso modo in entrambi i modelli di bordo.
Due modelli di bordo
Nel modello separato ogni cella è un box a sé con il proprio bordo, e border-spacing imposta lo spazio tra questi box. È il predefinito, ed è per questo che una tabella semplice con bordi sulle celle appare doppia.
Nel modello collassato il browser risolve ogni bordo condiviso in una sola linea. È ciò che vuole la maggior parte delle tabelle di dati, al prezzo di perdere border-spacing e gli angoli arrotondati.
Tabelle di dati leggibili
Le linee orizzontali tra le righe guidano l'occhio lungo una fila di cifre meglio di una griglia fitta. Allinea a destra le colonne numeriche, mantieni una riga di intestazione chiara con elementi th e aggiungi un caption, così la tabella ha un nome per chi usa uno screen reader.
Le righe alternate aiutano nelle tabelle lunghe con molte colonne. Verifica che il colore delle strisce lasci ancora abbastanza contrasto per il testo che ci sta sopra.
Riferimento delle proprietà dei bordi delle tabelle
Proprietà che cambiano il modo in cui vengono disegnate le linee della tabella
Proprietà
Valori
Iniziale
Note
collapse, separate
Si imposta sulla tabella. Collapse unisce i bordi condivisi.
una o due lunghezze
Spazio orizzontale poi verticale. Ignorato quando è collassata.
spessore stile colore
Di solito si imposta su th e td.
Ignorato nel modello collassato.
Esempi modificabili di bordi delle tabelle
Griglia collassata con riga di intestazione
La classica tabella di dati: una linea tra tutte le celle e un'intestazione colorata.
Solo righe, con righe alternate
Nessuna linea verticale. Un bordo inferiore su ogni cella più un colore sulle righe pari rende facili da seguire anche le righe lunghe.
Angoli della tabella arrotondati
Il modello separate con spaziatura zero, bordi a destra e in basso su ogni cella e gli angoli esterni arrotondati.
L'attributo border obsoleto accanto alla versione CSS
Le due tabelle sembrano uguali. La seconda tiene lo stile nel CSS, come chiede lo standard HTML.
Playground dei bordi delle tabelle
Modello di bordo
Linee da disegnare
Griglia completa
Solo righe
Solo cornice esterna
Spessore linea: {n}px
Spaziatura celle: {n}px
Raggio angoli: {n}px
Righe alternate
Colore linea
Spaziatura e arrotondamento funzionano solo nel modello separate.