Le Tabelle: i vari attributi.

Abbiamo visto nella lezione precedente come creare una tabella e come sia possibile modificare la sua struttura, vediamo adesso alcuni degli attributi più interessanti:.

Oltre al già citato border una tabella ha molti altri attributi, per esempio per regolare lo spazio fra una cella e l'altra o lo spazio fra il bordo ed il contenuto della cella si adopera border-spacing (non supportato dai browser IE) e padding.

Questo il codice nel foglio di style:

Questo il codice html:

Questo il risultato :

Ad una tabella è possibile assegnare una larghezza predefinita impostando dei valori fissi (numero di pixel) o in qualsiasi altro valore ammesso dai fogli di style come per esempio "%" in percentuale rispetto alla larghezza della finestra del browser. Si raccomanda di usare questo attributo per evitare che la tabella si ridimensioni dinamicamente con risoluzioni video elevate sconvolgendo di fatto l'impaginazione iniziale.

L'attributo per impostare la larghezza è width che oltre alla tabella è possibile assegnare anche alle singole celle, a questo proposito si consideri che in una colonna di celle con valori impostati diversamente per ogni singola cella avrà prevalenza la cella più larga che costringerà tutte le altre facenti parte della stessa colonna ad adeguarsi alla sua misura massima.

Senza una definizione di dimensioni la tabella risulterà essere dinamica, ovvero si allargherà a seconda del contenuto delle sue celle, qui sotto lo stesso esempio visto sopra con del testo aggiuntivo sulle varie celle per dare l'idea di cosa succede.

La tabella si è allargata fino alle sue misure massime per via del testo scritto nella cella 1 che con colspan 3 occupa lo spazio di tre colonne, la cella 2 che forma la colonna 1 ha molto testo che ne allarga le dimensioni adeguando alle stesse anche la colonna 5 che ha meno testo.

Vediamo cosa succede assegnando adesso un valore di width 450 pixel a table ed un valore del 33% a td. La stessa tabella risulta con una larghezza fissa e con celle delle stesse dimensioni ( 33% = un terzo delle dimensioni della tabella), in questo caso è il testo ad adattarsi dinamicamente alle misure impostate.

Il bordo è possibile definirlo singolarmente e persino differentemente per ognuno dei 4 lati di una cella, abbiamo visto negli esempi precedenti che è possibile impostare il valore numerico in pixel per il suo spessore, adesso con la proprietà border-color: inserita nel CSS è possibile definire il colore ma esiste anche il tipo di bordo.

Quello da noi adoperato fino a questo momento è sempre stato solid ma ne esistono altri che però non sono tutti supportati dai vari browser (IE è uno di questi). Vediamoli descritti con il relativo esempio, ovviamente chi non dovesse vedere differenze sarà soltanto a causa del proprio browser.

Queste le parole chiave per definire il tipo di bordo:

Ecco il risultato per i browser che supportano i vari tipi.

Abbiamo detto che IE non supporta la proprietà border-spacing che regola lo spazio fra i bordi delle celle e fra il bordo delle celle e quello della tabella. Per eliminare questo spazio esiste la proprietà border-collapse che accetta due valori: separate e collapse, rispettivamente per separare o unire le celle:

Le celle possono essere allineate oltre che orizzontalmente (con le stesse proprietà e modalità viste per l'allineamento del testo) anche verticalmente con la proprietà: vertical-align: che oltre ai valori numerici accetta le seguenti parole chiave: top, middle, bottom, super, sub, baseline, text-top, text-bottom.

Si possono cambiare i colori dei bordi ed anche quelli degli sfondi questi ultimi possono essere fatti oltre che da tinte unite anche da immagini grafiche di tipo gif, jpg o png, proprio come abbiamo visto in precedenza per lo sfondo della pagina web e per questo valgono le stesse regole.

Con questa lezione abbiamo imparato ad usare le tabelle per mostrare i dati in modo ordinato ed elegante.

Nella prossima lezione vedremo i moduli, meglio conosciuti come "forms" che servono per comunicare ed interagire direttamente col visitatore del nostro sito.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti in apposita area XHTML.