Bordi tabella HTML
Le tabelle HTML possono avere bordi di stili e forme differenti.
Come aggiungere un bordo
Quando aggiungi un bordo a una tabella, aggiungi anche i bordi attorno a ciascuna cella della tabella:
Per aggiungere un bordo, usa la borderproprietà CSS su
table, th, e
tdelementi:
Esempio
table, th, td
{
border: 1px solid black;
}
Bordi del tavolo compressi
Per evitare di avere bordi doppi come nell'esempio sopra, imposta la border-collapse
proprietà CSS su collapse.
Questo farà crollare i confini in un unico confine:
Esempio
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Bordi della tabella di stile
Se imposti un colore di sfondo per ciascuna cella e dai al bordo un colore bianco (lo stesso dello sfondo del documento), avrai l'impressione di un bordo invisibile:
Esempio
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Bordi della tavola rotonda
Con la border-radiusproprietà, i bordi ottengono angoli arrotondati:
Esempio
table, th, td {
border: 1px solid
black;
border-radius: 10px;
}
Salta il bordo attorno al tavolo tralasciando tableil selettore CSS:
Esempio
th, td {
border: 1px solid
black;
border-radius: 10px;
}
Bordi del tavolo punteggiati
Con la border-styleproprietà è possibile impostare l'aspetto del confine.
Sono ammessi i seguenti valori:
dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden
Esempio
th, td {
border-style: dotted;
}
Colore del bordo
Con la border-colorproprietà è possibile impostare il colore del bordo.
Esempio
th, td {
border-color: #96D4D4;
}