Corsi on-line

Simulazione di tabelle con CSS

La simulazione delle tabelle tramite CSS è un metodo per l’allineamento dei contenuti alternativo all’utilizzo dei tag HTML per la creazione delle tabelle, questi ultimi infatti andrebbero adottati soltanto per intabellare dati e non per allineare altre tipologie di elementi come per esempio i testi, le immagini e i video che rappresentano i contenuti centrali di una pagina Web.

css3Un semplice esempio di simulazione delle tabelle tramite CSS potrebbe essere il seguente basato sull’allineamento delle divbox:

<div class="parent">
<div class="child">
      Blah! Blah!
    </div>
 </div>

La divbox che funge da contenitore, associata nel nostro esempio al selettore parent, funge quindi da divbox “padre” e ha il compito di mostrare la tabella tramite la proprietà CSS display che ha la funzione di specificare il tipo di box utilizzato per un elemento HTML. Tale regola di stile dovrà essere applicata in questo modo:

.parent {
    display: table;
  }

La divbox che viene utilizzata come contenuto, associata nel nostro caso al selettore child, è invece destinata alla formattazione delle celle contenute nella tabella, anche in questo caso tramite la proprietà display.

.child {
    display: table-cell;
    ... 
  }

Alle celle è possibile associare una regola di stile per l’allineamento in modo da formattare anche i dati contenuti al loro interno:

.child {
    display: table-cell;
    vertical-align: middle;
  }

Uno dei vantaggi derivanti dalla simulazione delle tabelle riguarda il fatto che sia la tabella che le celle potranno avere qualsiasi altezza, ma verranno comunque allineate verticalmente in modo corretto. Dal punto di vista degli svantaggi andrebbe invece segnalata l’incompatibilità con i browser Web meno aggiornati.

Post correlati
I più letti del mese
Tematiche