CSS
tabelle
Ricerca…
Sintassi
- disposizione della tabella: auto | fisso;
- border-collapse: separato | crollo;
- interlinea: <lunghezza> | <lunghezza> <lunghezza>;
- celle vuote: mostra | nascondere;
- didascalia: in alto | parte inferiore;
Osservazioni
Queste proprietà si applicano sia a <table> elements (*) che a elementi HTML visualizzati come display: table o display: inline-table
(*) Gli elementi <table> sono ovviamente disegnati in modo nativo da UA / browser come display: table
Le tabelle HTML sono semanticamente valide per i dati tabulari. Non è consigliabile utilizzare tabelle per il layout. Invece, usa CSS.
table-layout
La proprietà di table-layout modifica l'algoritmo utilizzato per il layout di una tabella.
Sotto un esempio di due tabelle entrambe impostate in width: 150px :
La tabella a sinistra ha il table-layout: auto mentre quella a destra ha il table-layout: fixed . Il primo è più largo della larghezza specificata (210px invece di 150px) ma i contenuti si adattano. Quest'ultimo prende la larghezza definita di 150 px, indipendentemente dal fatto che il contenuto esca o meno.
| Valore | Descrizione |
|---|---|
| auto | Questo è il valore predefinito. Definisce il layout della tabella per essere determinato dal contenuto delle sue 'celle. |
| fisso | Questo valore imposta il layout della tabella in base alla proprietà width fornita alla tabella. Se il contenuto di una cella supera questa larghezza, la cella non verrà ridimensionata ma, al contrario, il contenuto si sovrapporrà. |
border-collapse
La proprietà border-collapse determina se i bordi di una tabella devono essere separati o uniti.
Di seguito un esempio di due tabelle con valori diversi per la proprietà border-collapse :
La tabella a sinistra ha un border-collapse: separate mentre quello a destra ha border-collapse: collapse .
| Valore | Descrizione |
|---|---|
| separato | Questo è il valore predefinito. Rende i bordi del tavolo separati gli uni dagli altri. |
| crollo | Questo valore imposta i bordi della tabella per unire insieme, anziché essere distinti. |
border-spacing
La proprietà di border-spacing dei border-spacing determina la spaziatura tra le celle. Ciò non ha alcun effetto a meno che il border-collapse sia impostato per separate .
Di seguito un esempio di due tabelle con valori diversi per la proprietà border-spacing :
La tabella a sinistra ha border-spacing: 2px (predefinito) mentre quella a destra ha border-spacing: 8px .
| Valore | Descrizione |
|---|---|
| <length> | Questo è il comportamento predefinito, anche se il valore esatto può variare tra i browser. |
| <lunghezza> <lunghezza> | Questa sintassi consente di specificare rispettivamente valori orizzontali e verticali separati. |
empty-cells
La proprietà empty-cells determina se le celle senza contenuto devono essere visualizzate o meno. Ciò non ha alcun effetto a meno che il border-collapse sia impostato per separate .
Sotto un esempio con due tabelle con valori diversi impostati sulla proprietà empty-cells :
La tabella a sinistra ha empty-cells: show mentre quella a destra ha empty-cells: hide . Il primo mostra le celle vuote mentre il secondo no.
| Valore | Descrizione |
|---|---|
| mostrare | Questo è il valore predefinito. Mostra le celle anche se sono vuote. |
| nascondere | Questo valore nasconde una cella del tutto se non ci sono contenuti nella cella. |
Maggiori informazioni:
- https://www.w3.org/TR/CSS21/tables.html#empty-cells
- https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells
- http://codepen.io/SitePoint/pen/yfhtq
- https://css-tricks.com/almanac/properties/e/empty-cells/
caption-side
La proprietà del caption-side determina il posizionamento verticale dell'elemento <caption> all'interno di una tabella. Questo non ha alcun effetto se tale elemento non esiste.
Sotto un esempio con due tabelle con valori diversi impostati sulla proprietà del caption-side :
La tabella a sinistra ha caption-side: top mentre quella a destra ha caption-side: bottom .
| Valore | Descrizione |
|---|---|
| superiore | Questo è il valore predefinito. Posiziona la didascalia sopra il tavolo. |
| parte inferiore | Questo valore posiziona la didascalia sotto la tabella. |