La proprietà CSS display consente di impostare le regole per la visualizzazione che rendono la visualizzazione del contenuto come una griglia o come se si trattasse di un tavolo, quando in realtà il materiale non è una tabella. Utilizzando i CSS per creare un layout a griglia permette di controllare il layout senza mettere alcun tag table nel codice HTML. Le proprietà di visualizzazione che si riferiscono a un aspetto da tavolo come, tra ogni possibile proprietà e il valore, saranno descritti in questo articolo.

istruzione

1 display: table rende l'elemento di agire come un elemento di tabella. Se si righe nido o colonne di griglie all'interno di questo elemento, è necessario utilizzare una o più delle proprietà descritte prossimo.

2 display: table-row rende l'elemento di agire come un elemento riga della tabella. E 'possibile utilizzare il display: table-row in modo efficace senza averlo annidato in un elemento impostato su display: table. Questo perché il browser presuppone l'esistenza di un elemento tabella "anonimo" e si comporta come se fosse lì. (Vedere suggerimenti qui di seguito per di più su elementi "anonimi".) Ricordate, non si sta creando una tabella effettiva di dati tabellare; si stanno semplicemente creando un display a griglia.

3 display: table-cell rende l'elemento di agire come un elemento cella di tabella. E 'possibile utilizzare il display: table-cell in modo efficace senza avere l'elemento nidificato in un elemento impostato su display: table-row o display: table.

4 display: table-row-group rende l'elemento di agire come un elemento tavolo gruppo di righe. Utilizzare per un elemento che gruppi di una o più righe. E 'il modo CSS di esprimere ciò che tbody fa in HTML.

5 display: table-header-gruppo fa l'elemento di agire come un elemento di gruppo riga di intestazione della tabella. E 'il modo CSS di esprimere ciò che thead fa in HTML. Con i CSS, il tavolo-header-gruppo viene sempre visualizzato prima di tutte le altre righe e gruppi di righe e dopo tutte le didascalie superiori.

6 display: table-footer-group rende l'elemento di agire come un elemento di gruppo riga della tabella piè di pagina. Con i CSS, il tavolo-footer-gruppo fa quello tfoot fa in HTML. La tabella-footer-gruppo viene sempre visualizzato dopo tutte le altre righe e gruppi di righe e prima di qualsiasi didascalie inferiori. Stampanti possono ripetere le righe a piè di pagina su ogni pagina attraversato da un tavolo.

7 display: table-caption rende l'elemento di agire come un elemento di tabella didascalia.

8 display: table-column rende l'elemento di agire come un elemento colonna della tabella. E 'il modo CSS di esprimere ciò che col fa in HTML.

9 display: table-column-group rende l'elemento di agire come un gruppo di colonne della tabella. Usalo per gruppo una o più colonne. E 'il modo CSS di esprimere ciò che colgroup fa in HTML.

Consigli e avvertenze

• Qualsiasi display: elemento di tabella genererà automaticamente necessari oggetti per la tavola anonima su se stessa.
• Ogni selettore nel foglio di stile impostato su una di queste proprietà di visualizzazione può essere designato con la gamma completa di regole CSS inclusi imbottitura, margine, bordo, sfondo e le proprietà font-family.
• proprietà di visualizzazione CSS non sono supportate dalle versioni di Internet Explorer versione 8 di sotto.