L'aspetto di una tabella HTML può essere notevolmente migliorata con i CSS:
| Società | contatto | Nazione |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germania |
| Berglunds snabbkop | Christina Berglund | Svezia |
| Centro comercial Moctezuma | Francisco Chang | Messico |
| Ernst Handel | Roland Mendel | Austria |
| Isola Trading | Helen Bennett | UK |
| Koniglich Essen | Philip Cramer | Germania |
| Ridere Bacco Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italia |
Tabella Borders
Per specificare bordi della tabella in CSS, utilizzare il border di proprietà.
L'esempio seguente specifica un bordo nero per <table> , <th> , e <td> elementi:
Si noti che la tabella nell'esempio sopra ha doppie confini. Questo perché sia il tavolo e il <th> e <td> elementi hanno confini separati.
Collapse Tabella Borders
Il border-collapse proprietà imposta se i bordi della tabella devono essere compressi in un unico confine:
Esempio
table
{
border-collapse: collapse;
}
table, th, td
{
border: 1px solid black;
} Prova tu stesso " Se si desidera solo un bordo intorno al tavolo, specificare solo il border di proprietà per <table> :
Tabella Larghezza e Altezza
Larghezza e l'altezza di un tavolo sono definiti dalle width e height proprietà.
L'esempio seguente imposta la larghezza della tabella al 100%, e l'altezza del <th> elementi 50px:
Allineamento orizzontale
Il text-align proprietà imposta l'allineamento orizzontale (come a sinistra, destra o al centro) del contenuto in <th> o <td> .
Per impostazione predefinita, il contenuto di <th> elementi sono allineato al centro e il contenuto di <td> elementi sono allineate a sinistra.
L'esempio che segue sinistra allinea il testo in <th> elementi:
Allineamento verticale
Il vertical-align proprietà imposta l'allineamento verticale (come in alto, in basso, o medio) del contenuto in <th> o <td> .
Per impostazione predefinita, l'allineamento verticale del contenuto in una tabella è centrale (sia per <th> e <td> elementi).
L'esempio seguente imposta l'allineamento del testo in verticale verso il basso per <td> elementi:
Tabella Imbottitura
Per controllare lo spazio tra il bordo e il contenuto di una tabella, utilizzare il padding proprietà su <td> e <th> elementi:
divisori orizzontali
| Nome | Cognome | risparmi |
|---|---|---|
| Pietro | Grifone | $ 100 |
| Lois | Grifone | $ 150 |
| Joe | Swanson | $ 300 |
Aggiungere il border-bottom proprietà <th> e <td> per i divisori orizzontali:
Tabella Hoverable
Utilizzare il :hover selettore <tr> per evidenziare le righe della tabella al passaggio del mouse:
| Nome | Cognome | risparmi |
|---|---|---|
| Pietro | Grifone | $ 100 |
| Lois | Grifone | $ 150 |
| Joe | Swanson | $ 300 |
tabelle a righe
| Nome | Cognome | risparmi |
|---|---|---|
| Pietro | Grifone | $ 100 |
| Lois | Grifone | $ 150 |
| Joe | Swanson | $ 300 |
Per le tabelle zebrati, utilizzare il nth-child() del selettore e aggiungere un background-color a tutte le righe pari (o dispari) della tabella:
Tabella di colore
L'esempio che segue specifica il colore di sfondo e il testo di <th> elementi:
| Nome | Cognome | risparmi |
|---|---|---|
| Pietro | Grifone | $ 100 |
| Lois | Grifone | $ 150 |
| Joe | Swanson | $ 300 |
Tabella responsive
Una tabella reattivo mostrerà una barra di scorrimento orizzontale se lo schermo è troppo piccola per visualizzare il contenuto completo:
| Nome | Cognome | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti | Punti |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | fabbro | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
| vigilia | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
| Adamo | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Aggiungere un elemento contenitore (come <div> ) con overflow-x:auto in tutto il <table> elemento per rendere più reattivo:
Esempio
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
Prova tu stesso " 
Altri esempi
Fare un tavolo di fantasia
Questo esempio dimostra come creare una tabella di fantasia.
Impostare la posizione della didascalia tavolo
Questo esempio dimostra come posizionare la didascalia di tabella.
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 » Esercizio 6»
Proprietà tabella CSS
| Proprietà | Descrizione |
|---|---|
| border | Imposta tutte le proprietà del bordo in una dichiarazione |
| border-collapse | Specifica se i bordi delle tabelle devono essere crollati |
| border-spacing | Specifica la distanza tra i bordi delle celle adiacenti |
| caption-side | Specifica il posizionamento di una didascalia tavolo |
| empty-cells | Specifica se visualizzare o meno i bordi e lo sfondo su celle vuote in una tabella |
| table-layout | Imposta l'algoritmo di layout da utilizzare per un tavolo |