• Programmazione » CSS » Tutorial CSS

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

table-layout

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

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

Ecco un esempio:

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

La proprietà risulta perfettamente compatibile con tutti i browser, da Internet Explorer a a Safari, da Firefox ad Opera.

border-collapse

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

Può assumere due valori: collapse e separate. La prima impone che, nel caso venga impostato un bordo, le celle della tabella debbano condividerlo; la seconda invece, impone che ciascuna cella della tabella abbia un proprio bordo, indipendente e separato da 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, che imposta lo spazio tra due celle adiacenti della stessa tabella. Bisogna prestare attenzione però al fatto che se la proprietà border-collapse è impostata a collapse, border-spacing viene ignorata. Altro fattore da tenere in considerazione è il fatto che la spaziatura impostata andrà a sommarsi a quella impostata nel padding.

Richiede come parametri dei valori numerici; il primo imposta la spaziatura orizzontale, il secondo quella verticale. Nel caso venga dato un solo valore, questo verrà impostato sia 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à, eccetto internet 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 le celle prive di contenuto visibile; si occupa infatti di impostare lo sfondo ed i bordi delle celle vuote. può essere utilizzata nel caso in cui la tabella usi i bordi separati e nel caso border-collapse non sia impostato a collapse. E' applicabile inoltre solamente a quegli elementi la cui proprietà display ha valore table-cell.

Da specificare cosa si intende per cella contenente contenuto non 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, se esiste, verrà mostrato il background; nel secondo caso invece, niente di tutto ciò verrà mostrato.

Ecco un semplice esempio:

#results {
  empty-cells: hide;
}

Se le prime tre proprietà trattate non presentavano ingenti 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 vogliamo impostare 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 primo caso scrive la caption nel lato superiore della tabella, mentre nel secondo la scrive sul lato inferiore.

Compatibile con tutti i browsers fuorchè tutte le versioni di Internet Explorer