Tabelle CSS
L'aspetto di una tabella HTML può essere notevolmente migliorato con CSS:
Società | Contatto | Nazione |
---|---|---|
La mangiatoia di Alfred | Maria Anders | Germania |
Il supermercato di Berglund | Cristina Berglund | Svezia |
Centro commerciale Montezuma | Francisco Chang | Messico |
commercio serio | Roland Mendel | Austria |
Commercio dell'isola | Helen Bennett | UK |
Cibo reale | Filippo Cramer | Germania |
Cantine di Bacco che ride | Yoshi Tannamuri | Canada |
Magazzini Alimentari Riuniti | Giovanni Rovelli | Italia |
Bordi del tavolo
Per specificare i bordi della tabella in CSS, utilizzare la border
proprietà.
L'esempio seguente specifica un bordo nero per gli elementi <table>, <th> e <td>:
Esempio
table, th, td {
border: 1px solid black;
}
Tavolo a tutta larghezza
La tabella sopra potrebbe sembrare piccola in alcuni casi. Se hai bisogno di una tabella che dovrebbe occupare l'intero schermo (a larghezza intera), aggiungi width: 100%
all'elemento <table>:
Esempio
table {
width: 100%;
}
Doppi confini
Si noti che la tabella negli esempi precedenti ha i bordi doppi. Questo perché sia la tabella che gli elementi <th> e <td> hanno bordi separati.
Per rimuovere i doppi bordi, dai un'occhiata all'esempio seguente.
Riduci i bordi della tabella
La border-collapse
proprietà imposta se i bordi della tabella devono essere compressi in un unico bordo:
Esempio
table
{
border-collapse: collapse;
}
Se vuoi solo un bordo attorno alla tabella, specifica solo la border
proprietà per <table>:
Esempio
table
{
border: 1px solid black;
}