Le Tabelle.

Nelle lezioni precedenti abbiamo imparato a creare un sito, siamo in grado di suddividerlo in frames, adesso però ci accorgiamo che con le nostre conoscenze non è per nulla semplice riuscire a posizionare gli elementi che compongono la pagina così come avremo voluto.

I metodi più evoluti prevedono l'uso dei CSS ovvero Cascading Style Sheet ma al momento noi da buoni principianti non ci occuperemo di queste tecniche. Affronteremo il problema in modo tradizionale, facendo uso delle care vecchie tabelle.

Le tabelle contrariamente a quanto si potrebbe pensare non servono soltanto per incolonnare e tabulare dati, la struttura di una tabella serve anche come "contenitore" per testi ed immagini, proprio come ho fatto io per creare questa rubrica Primi Passi. In questo caso ho reso i bordi della tabella invisibili in modo da non compromettere l'aspetto estetico della pagina.

Vediamo come si crea una semplice tabella: <table>

Questo è l'elemento che dichiara una tabella, da solo dice poco o niente, necessita di altri elementi, almeno due: <tr> e <td> che si trovano annidati al suo interno e che servono rispettivamente per suddividere la tabella in righe e in colonne. Intere tabelle possono poi essere a loro volta contenute all'interno di celle di altre tabelle, da qui il termine nidificate, un po' come succede con quelle scatole cinesi dove una è all'interno di un'altra.

Iniziamo nel modo più semplice possibile, supponendo di volere una tabella con una sola cella, questa la sua definizione:

Questo il risultato grafico:

Da notare che ogni elemento che riguarda la tabella necessita del relativo elemento (o tag) di chiusura /, dove <tr> decreta l'inizio di una nuova riga, mentre <td> è la cella vera e propria. Dovendo creare una tabella con due celle affiancate, praticamente due colonne, sarà sufficiente affiancare due elementi <td> all'interno di uno stesso elemento <tr>

Questo il risultato:

Con la stessa logica è possibile aggiungere tutte le righe e le celle che servono, quindi:

Questo il risultato grafico:

Definirei questo meccanismo abbastanza semplice e molto logico, quindi facile da capire. Spesso però servono tabelle che non sono regolari come quella appena vista, c'è bisogno di avere colonne e/o righe irregolari. Questo accade abbastanza spesso quando l'uso della tabelle non si limita alla semplice tabulazione dei dati ma viene adoperata come contenitore di oggetti quali: immagini, applets, scripts, testi, e tutto quello che può far parte di una pagina web.

Vediamo allora come creare delle tabelle particolari facendo uso di altri due attributi: rowspan e colspan che servono rispettivamente per occupare più di una sola cella in senso orizzontale e più di una sola colonna in senso verticale. Visto che modificano la cella sono applicabili al solo elemento (o tag) <td>.

Vediamo un esempio: supponendo di dover occupare con una sola cella più colonne di una tabella regolare, adopereremo colspan specificando il numero di colonne da occupare che nel nostro caso potrà essere al massimo 2 (ovvio la nostra tabella in questo caso è formata da 2 sole colonne):

Questo il risultato grafico:

Allo stesso modo volendo occupare più righe di una tabella regolare, si farà uso di rowspan specificando il numero di righe da occupare, che nel nostro caso potrà essere al massimo 2 (ovvio la nostra tabella in questo caso è formata da 2 sole  righe):

Questo il risultato grafico:

Come abbiamo appena avuto modo di vedere combinando questi attributi è possibile ottenere una struttura ottimale, tutto dipende da come e che cosa vogliamo impaginare.

Vediamo un altro esempio, supponendo di volere un tipo di impaginazione stile giornale quotidiano: testata, colonne e piede pagina; questo il codice:

questo il risultato:

Tutto il testo inserito all'interno degli elementi <td> seguirà l'impaginazione dettata dalla struttura della tabella stessa, la tabella in questo modo risulta essere dinamica, cioè modificherà le proprie dimensioni adattandosi perfettamente alle dimensioni dei testi:

Il bordo in alcuni casi potrebbe risultare fastidioso, oppure per qualche strano motivo lo si potrebbe preferire più vistoso, uno degli attributi dell'elemento <table> è proprio border che se impostato a zero non produce alcun bordo, viceversa è possibile specificarne lo spessore in pixel. Questo sotto un esempio con bordo a zero:

<table border="0">

Mentre questo, lo stesso esempio, con bordo a 5:

<table border="5">

Oltre al bordo è possibile specificare quanto spazio lasciare fra le singole celle: cellspacing ed anche quanto spazio lasciare fra il bordo e i dati contenuti all'interno della singola cella: cellpadding. Se non viene specificato alcun valore, i due attributi assumono come valore di default 2.

<table border="1" cellspacing="10" cellpadding="8">

E' anche possibile avere uno sfondo colorato a tinta unita o un motivo grafico. Gli attributi da adoperare sono: bgcolor per il colore a tinta unita, o background per un'immagine grafica valida (gif, jpg, png) da usare come sfondo. Valgono praticamente le stesse regole viste per l'elemento body in una delle lezioni precedenti.

Ovviamente laddove si adoperasse un colore a tinta unita non sarebbe possibile adoperare anche uno sfondo grafico e viceversa. Se inseriti all'interno dell'elemento <table> avranno effetto su tutta la tabella, ma è possibile adoperare colori o sfondi diversi per ogni singola cella, in questo caso invece di applicare gli attributi al tag table si applicano al tag cella <td>.

Gli attributi supportati dalle celle sono molti: align con i parametri: right, left, center, justify che servono per allineare il contenuto delle celle rispettivamente a: destra, sinistra, centro, giustificato.

width con i parametri espressi in pixel o in % per fissare le dimensioni in larghezza.

height con i parametri espressi in pixel o in % per fissare le dimensioni in altezza.

Per tutti gli altri, che al momento servirebbero soltanto a confondervi, potete fare riferimento alla mia guida html.

Con questa lezione abbiamo imparato ad impaginare gli elementi di una pagina web facendo uso di tabelle.

Nella prossima lezione vedremo i moduli, meglio conosciuti come: "forms" che servono a creare questionari o semplici mezzi per poter interagire direttamente col visitatore del nostro sito.

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

per stampare questa pagina