Nwlapcug.com


Come stile di una tabella con i CSS

Come stile di una tabella con i CSS


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;

}

3Come stile di una tabella con i CSS


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

4Come stile di una tabella con i CSS


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.

6Come stile di una tabella con i CSS


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

7Come stile di una tabella con i CSS


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.

8Come stile di una tabella con i CSS


Si può scegliere di vertical-align: top o vertical-align: fondo. Ecco un esempio:

TD {

vertical-align: top;

}

9Come stile di una tabella con i CSS


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.