Utilizzare i CSS per rendere il vostro tavolo di dati, attraente e facile da capire.
Istruzioni
CSS per i bordi
1
Creare la tabella nel tuo solito modo. Se la tabella utilizza colonne per organizzare i dati, utilizzare l'elemento HTML th per creare le intestazioni di colonna. Se la tabella utilizza righe per organizzare i dati, è possibile utilizzare l'elemento th HTML per creare le intestazioni di riga.
2
La creazione di bordi in CSS richiede due regole nel CSS. Con la prima regola, si imposta un bordo per l'esterno della tabella. È inoltre possibile impostare la regola di confine-crollo, cosicché avrete solo una linea di confine tra le celle della tabella. (Se volete doppi bordi tra le celle della tabella, non impostare la proprietà border-collapse per comprimere.) Ecco un esempio di regola:
tabella {
border-width: 1px;
border-style: solid;
border-color: #000000;
border-collapse: collapse;
}
3
Successivamente, si aggiunge un bordo per l'intestazione della tabella (th) e celle di tabella dati (td) nella tabella. Se è stato utilizzato border-collapse: collasso sulla regola della tabella, ci sarà una linea di bordo singolo tra le celle. Ecco un esempio di regola:
TH, td {
border-width: 1px;
border-style: solid;
border-color: #000000;
}
Si noti che il selettore raggruppato th, td crea la stessa regola CSS per gli elementi sia la th e td.
CSS per le didascalie e intestazioni
4
Se la tabella ha una didascalia, è possibile utilizzare CSS per lo stile. La tabella mostrata nell'immagine nella sezione 1, punto 3 avere una didascalia. Ecco un semplice esempio di una regola di stile per esso.
didascalia () {
font-size: 1.4em;
font-weight: bold;
padding-bottom: 4px;
}
Confrontare l'effetto di questa regola con lo spettacolo di aspetto nella sezione 1, punto 3.
5
È possibile posizionare la barra del titolo nella parte superiore o la parte inferiore della tabella utilizzando un didascalia-lato: superiore o una didascalia-laterale: dichiarazione nella regola didascalia in basso.
6
Il th elemento è in grassetto e centrato (se è in una colonna) per impostazione predefinita. Se si desidera modificare il suo aspetto in qualche modo, è possibile scrivere una regola per il selettore di th. Questa regola, ad esempio, cambia il colore, il font-variant e la letter-spacing.
TH {
font-variant: small-caps;
color: #666666;
letter-spacing: 0.2em;
}
CSS per l'allineamento di cella
7
Il valore predefinito per l'allineamento verticale del testo nelle celle della tabella è centrale. Per mostrare questo, un po' più testo è stato aggiunto alla tabella di esempio.
8
Si può scegliere di vertical-align: top o vertical-align: fondo. Ecco un esempio:
TD {
vertical-align: top;
}
9
Per allineare il testo orizzontalmente in celle di tabella, sia a sinistra, a destra, o centro, utilizzare la proprietà text-align. Poiché il valore predefinito è di sinistra, la regola di esempio modificherà il valore al centro.
TD {
vertical-align: top;
text-align: center;
}
Consigli & Avvertenze
- La regola per la tabella può contenere altre proprietà come larghezza, background, padding, dimensione del carattere e altre proprietà CSS.
- Altre proprietà possono essere usate durante lo styling dell'elemento th, ad esempio larghezza, colore di sfondo e allineamento del testo.