Proprietà delle tabelle. Table-layout, border-collapse, border-spacing, empty-cells, caption-side

In questo tutorial analizzeremo le proprietà CSS checi permettono il controllo del layout delle tabelle.

table-layout

La prima proprietà che prenderemo in considerazioneè Table-Layout; questa proprietà specifical' algoritmo che viene usato per disporre una tabella ouna tabella inline (elemento avente la proprietàdisplay impostata a inline-table). Sonodisponibili due algoritmi: automatic e fixed.

Il primo viene normalmente impiegato se la proprietàwidth della tabella è impostata ad autoin quanto permetterà al client di scegliere l'algoritmo della tabella, in base a fattori intrinsechi quali,appunto, la proprietà width; fixed inveceimposta un ben preciso algoritmo ed è quindi indicatonel caso in cui pure proprietà come width vengonoimpostate arbitrariamente.

Ecco un esempio:

#results {  width: 24em;  table-layout: fixed;}

La proprietà risulta perfettamente compatibile contutti i browser, da Internet Explorer a a Safari, da Firefoxad Opera.

border-collapse

La seconda proprietà che andiamo ad analizzareè border-collapse, usata per specificare come dovrannoessere trattati i bordi della tabella.

Può assumere due valori: collapse eseparate. La prima impone che, nel caso vengaimpostato un bordo, le celle della tabella debbanocondividerlo; la seconda invece, impone che ciascuna celladella tabella abbia un proprio bordo, indipendente e separatoda quelli delle altre.

Ecco un esempio:

#results { border-collapse: collapse;}

Come per la precedente, la compatibilità-browsersè massima.

border-spacing

La terza proprietà è border-spacing, cheimposta lo spazio tra due celle adiacenti della stessatabella. Bisogna prestare attenzione però al fatto chese la proprietà border-collapse èimpostata a collapse, border-spacing vieneignorata. Altro fattore da tenere in considerazione èil fatto che la spaziatura impostata andrà a sommarsia quella impostata nel padding.

Richiede come parametri dei valori numerici; il primo impostala spaziatura orizzontale, il secondo quella verticale. Nelcaso venga dato un solo valore, questo verrà impostatosia per la spaziatura orizzontale che per quella verticale.

Ecco un esempio:

#results {  border-collapse: separate;  border-spacing: 1em 0.5em;}

Tutti i browsers supportano questa proprietà, eccettointernet explorer in tutte le sue versioni, compresa la 7.

empty-cells

La quarta proprietà che andiamo ad analizzare èempty-cells che, come suggerisce il nome, riguarda lecelle prive di contenuto visibile; si occupa infatti diimpostare lo sfondo ed i bordi delle celle vuote. puòessere utilizzata nel caso in cui la tabella usi i bordiseparati e nel caso border-collapse non sia impostatoa collapse. E' applicabile inoltre solamente aquegli elementi la cui proprietà display havalore table-cell.

Da specificare cosa si intende per cella contenente contenutonon visibile:

  • è del tutto priva di contenuto
  • contiene unicamente carrelli di ritorno, caratteri tab o spazi
  • ha la proprietà visibility impostata ad hidden

Può assumere due valori: show ed hide.Nel primo caso i bordi verranno lo stesso disegnati e, seesiste, verrà mostrato il background; nel secondo casoinvece, niente di tutto ciò verrà mostrato.

Ecco un semplice esempio:

#results {  empty-cells: hide;}

Se le prime tre proprietà trattate non presentavanoingenti problemi di compatibilità, il discorso quiè un po' diverso:

  • Internet Explorer 7 per Windows non la supporta, e si comporta come se tutte le tabelle avessero la proprietà empty-cells impostata ad hide
  • Firefox 2 non nasconde le righe nel caso tutte le celle di una tabella contengano contenuti non visibili
  • Opera 9.2 ed inferiori mostrano lo sfondo in ogni caso

caption-side

Ed infine, eccoci alla proprietà caption-side.Questa imposta la posizione verticale del testi che vogliamoimpostare come <caption> della tabella.

Per influire sull' allineamento orizzontale del testoè invece necessario impostare la proprietàtext-align.

Supporta due valori: top e bottom. Nel primocaso scrive la caption nel lato superiore della tabella,mentre nel secondo la scrive sul lato inferiore.

Compatibile con tutti i browsers fuorchè tutte leversioni di Internet Explorer



Ti potrebbe interessare anche

commenta la notizia