Personalizzazione della tabella coi CSS
- Confini della tabella border
- Come impostare la larghezza e l'altezza della tabella
- Come impostare lo sfondo della tabella
- Le colonne della tabella
- Come aggiungere un'intestazione alla tabella
- Come rimuovere lo spazio tra i bordi delle cellule
- Come aumentare lo spazio tra i bordi di cellule
- Come nascondere le cellule vuote della tabella
- Formattazione layout della tabella utilizzando la proprietà table-layout
1. I confini di una tabella. Border
Tabella e cellule all suo interno di default vengono mostrati nel browser senza confini visibili. I confini di una tabella vengono introdotti con la proprietà border:
I confini di ogni cellula del titolo della colonna vengono specificati per elemento th:
I confini delle celle del corpo della tabella vengono specificati atrverso elemento td:
Lo spessore del bordo di celle adiacenti non viene raddoppiato, quindi posiamo impostare lo spessore del bordo delle cellule nella tabela cosi:
Il bordo esterno della tabella posimo evidenziare aumentanbdo lo spessore del bordo
Posimo imostare bordo anche parzialmente:
Maggiori informazioni su la proprietà border potete leggere qui.
2. Come impostare la larghezza e l'altezza della tabella
La larghezza predefinita e l'altezza della tabella dipende dal contenuto delle sue cellule. Se la larghezza non è specificata, sarà uguale alla larghezza della riga più larga .
La larghezza per la tabella e le colonne viene impostata utilizzando la proprietà width . Se per la tabella è impostato table {width: 100%;} la larghezza della tabella sara uguale alla larghezza del blocco contenitore in cui si trova.
La larghezza della tabella e delle colonne di solito vengono impostati in px o %, per esempio:
Fissare l'altezza utilizzando la proprietà height non è raccomandato.. L'altezza delle righe della tabella può essere controllata attraverso padding superiore ed inferiore per elementi <td> e <th>.
3. Come impostare lo sfondo per una tabella
Di default lo sfondo delle celle della tabella è trasparente. Se una pagina o il blocco contenente la tabella, hanno uno sfondo, sarà visibile attraverso la tabella. Se lo sfondo è impostato per la tabella e le celle, lo sfondo delle cellule avrà precedenza e sarà visibile sopra lo sfondo del corpo della tabella . Come lo sfondo per la tabella e le cellule posiamo usare soliti proprietà :
colore solido,
gradiente,
immagine di sfondo.
4. Le colonne della tabella
Concetto della tabella in CSS è focalizzato principalmente sulle righe, formati dal tag <tr>. In pratica, ci sono casi in cui è necessario applicare formattazione speciale solo alle colonne, le possibilità che abbiamo sono queste :
utilizzando tag <col> è possibile impostare lo sfondo per qualsiasi numero di colonne;
tramite selettore table td:first-child , table td:last-child è possibile specificare gli stili per la prima o l'ultima colonna della tabella (ad eccezione della prima cella della intestazione della tabella);
tramite seletore table td:nth-child(regole per selezionare colonne ) è possibile impostare gli stili per ualsisi colonna della tabella.
Maggiori informazioni di tag <col>, potete leggere qui.
Ulteriori informazioni di CSS-selettori potete leggere qui.
5. Come aggiungere un'intestazione alla tabella
Aggiungere un titolo al tabella è possibile attraverso tag <caption> e utilizzando la proprietà caption-side posiamo mettere titolo prima o dopo la tablla. Per l'allineamento in orizzontale del testo del titolo vine utilizzata le proprietà text-align. Si eredita.
caption-side | |
---|---|
Valore: | |
top | Intestazione della tabella e situata sopra la tabella. E il valore di default. |
bottom | Posiziona l'intestazione della tabella sotto di essa. |
initial | Imposta il valore della proprietà al suo valore di default. |
inherit | eredita valore della proprietà del elemento genitore. |
Company | Q1 | Q2 | Q3 | Q4 |
---|---|---|---|---|
Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
50.2 | 40.63 | 45.23 | 39.3 | |
Apple | 25.4 | 30.2 | 33.3 | 36.7 |
6. Come rimuovere gli spazzi tra i bordi delle cellule
Bordi delle cellule di default sono separati da un piccolo spazio. Se impostare border-collapse: collapse per la tabella allora lo spazio sara rimosso. La proprietà viene ereditata.
border-collapse | |
---|---|
Valore: | |
separate | Bordi delle celle sono disposte separatamente. |
collapse | Bordi delle cellule vicini vengono uniti, e gli spazi tra i bordi vengono rimossi. |
initial | Imposta il valore della proprietà al suo valore di default. |
inherit | Eredita valore della proprietà del elemento genitore. |
Sintassi

7. Come aumentare lo spazio tra i bordi delle cellule
Con la proprietà border-spacing è possibile modificare la distanza tra i bordi delle cellule. Questa proprietà si applica a tutta la tabella . Si eredita.
border-spacing | |
---|---|
Valore: | |
valore numerico valore numerico | Aggiunge gli spazzi tra i bordi sia verticalmente che orizzontalmente. Se si specificano due valori , il primo sempre definisce lo spazio in orizzontale, e secondo in verticale. |
initial | Imposta il valore della proprietà al suo valore di default. |
inherit | Eredita valore della proprietà del elemento genitore. |
Sintassi
8.Come nascondere le cellule vuote della tabella
Le proprietà empty-cells nasconde o mostra cellule vuote . Esso agisce solo sulle cellule che non contengono alcun contenuto. Se per una cellula è impostato lo sfondo e per tabella è impostato table {border-collapse: collapse;} allora la cellula vuota non sara nascosta. Si eredita
empty-cells | |
---|---|
Valore: | |
show | Bordo e sfondo delle celle vuote saranno visualizzate uguale alle celle con contenuto . |
hide | Se tutte le celle nella riga sono vuote, allora l'intera stringa viene visualizzata come se fosse impostato display: none. |
initial | Imposta il valore della proprietà al suo valore di default. |
inherit | Eredita valore della proprietà del elemento genitore. |
Markup html della tabella
Stili CSS della tabella
Company | Q1 | Q2 | Q3 |
---|---|---|---|
Microsoft | 20.3 | 30.5 | |
50.2 | 40.63 | 45.23 |
9. Formattazione del layout della tabella utilizzando la proprietà table-layout
Formattazione del layout della tabella è determinato da uno dei due metodi : layout fisso e layout responsivo. Sotto formattazione del layout in questo caso si intende come sara distribuita la larghezza della tabella fra le cellule. La proprietà non si ereditata.
table-layout | |
---|---|
Valore: | |
auto | Valore di default. La larghezza del layout della tabella è determinata dalla larghezza del suo contenuto incluso valori della proprieta padding-left, padding-right, border-left width piu una largezza di border-right del'ultima cella della riga. Se la larghezze delle cellule non sono impostate chiaramente, esso possono avere larghezze diverse. |
fixed | La proprietà funziona solo se è impostata la larghezza per la tabella. Le larghezze delle cellule saranno uguali, me nelle cellule dove il contenuto è piu lungo della cellula esso coprirà il contenuto della cellula vicina. |
initial | Imposta il valore della proprietà al suo valore di default. |
inherit | Eredita valore della proprietà del elemento genitore. |
Sintassi