HTML5 - Stili avanzati per le tabelle

All'interno delle nuove specifiche di HTML5 sì CSS Esistono diversi stili che possono essere applicati alle tabelle per definire ulteriormente e adattare il loro comportamento a ciò che abbiamo come concetto in mente per realizzare le nostre pagine o documenti, gli elementi che possiamo modificare sono i bordi delle tabelle, il gestione delle celle vuote, compresa la disposizione della stessa tabella.
confine-collasso
Specifica come vengono gestiti i bordi nelle celle adiacenti, i valori che questa proprietà può assumere sono: crollo sì separato.
Con questa proprietà possiamo controllare il comportamento di come il browser disegna i bordi, vediamo questa immagine di come il browser lo gestisce di default:

Osserviamo che viene disegnato un bordo sulla tabella e un altro bordo viene disegnato in ogni cella della stessa, questo genera un effetto doppio bordo, vediamo ora come con confine-collasso possiamo gestire questo problema.

 Esempio 
 Risultati dell'indagine Frutta 2011 

 
 
Rango
patata dolce
Colore
 
Dimensioni e voti
 

 

 

 
 
Preferito:
Mele
Verde
 
medio
500
 

 
 
2° preferito:
Arance
arancia
 
Grande
450
 

 

 
 
 Imprese di dati sulla frutta
 

 

 

Vediamo cosa genera questo codice nel browser prima di continuare con la spiegazione:

Il valore di collasso che poniamo nella proprietà border-collapse ci dice che non vogliamo che venga disegnato un bordo su ogni elemento adiacente, il che crea l'effetto che abbiamo visto nell'immagine precedente.
Impostazione dei bordi separati
Se invece di usare crollo usiamo il valore predefinito separato della proprietà border-collapse, possiamo usare proprietà aggiuntive come spaziatura dei bordi Per definire lo spazio tra i bordi di elementi adiacenti, vediamo l'esempio:

 Esempio 
 Risultati dell'indagine Frutta 2011 

 
 
Rango
patata dolce
Colore
 
Dimensioni e voti
 

 

 

 
 
Preferito:
Mele
Verde
 
medio
500
 

 
 
2° preferito:
Arance
arancia
 
 

 

 
 
Imprese di dati sulla frutta
 

 

 

In questo esempio specifichiamo semplicemente che il bordo avrà uno spazio di 10 pixel per gli elementi adiacenti, vediamo l'esempio di come questo si traduce nel browser:

Gestire le celle vuote
Come abbiamo visto nell'immagine precedente, il browser assegna anche uno spazio con un bordo per le celle vuote, questo a volte potremmo non volerlo nella nostra tabella, quindi possiamo apportare la seguente modifica al codice precedente per poter gestire il vuoto cellule.

Vediamo come appare nel browser:

In effetti, siamo stati in grado di eliminare le celle vuote senza perdere il formato della nostra tabella.
Con questo finiamo il tutorial, come possiamo vedere possiamo apportare molte modifiche alle nostre tabelle per adattarle a ciò che possiamo concettualizzare e adattare alle nostre esigenze.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo