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/o in colonne. Intere tabelle possono poi essere a loro volta contenute all'interno di celle di altre tabelle, quindi nidificate, un po'  come succede con  quelle scatole cinesi una dentro l'altra.

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

<table border="1">
<tr>
   <td> qui andrà messo il contenuto della tabella </td>
</tr>
</table>

Questo il risultato grafico:

contenuto della tabella

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 adesso una tabella con due celle affiancate, praticamente due colonne, sarà sufficiente affiancare due elementi <TD>

<table border="1">
<tr>
   <td> cella sinistra </td><td> cella destra </td>
</tr>
</table>

Questo il risultato :

cella sinistra

cella destra

Lo definirei abbastanza semplice oltre che molto logico, quindi facile da capire  gestire e da ricordare. Spesso però le tabelle non sono regolari come questa, c'è bisogno di avere colonne irregolari con magari diverse celle di lato e/o viceversa. Questo accade molto spesso quando l'uso della tabelle non si limita alla semplice tabulazione per la raccolta di dati ma viene adoperato 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:

I due attributi: ROWSPAN e COLSPAN, servono rispettivamente per occupare più di una sola cella sia in senso orizzontale che in quello verticale, come tali 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):

Allo stesso modo volendo invece 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)

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

E' vero che in qualsiasi momento potremo sempre aggiungere o togliere righe e colonne, ma sarebbe meglio avere le idee chiare sin dalla fase di progettazione, questo renderebbe tutto molto più semplice, per cui tentare una pianificazione prima ancora di cominciare a cimentarvi con le tabelle sarebbe auspicabile.

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, 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:

Oltre al bordo, nell'elemento <TABLE> è 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 vengono specificati valori, i due attributi assumono come valore di default 2 .

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

testata pagina
colonna 1 colonna 1 colonna 1	colonna 2 colonna 2 colonna 2	colonna 3 colonna 3 colonna 3
piede pagina

E' anche possibile avere uno sfondo colorato a tinta unita o un motivo grafico. Gli attributi da adoperare sono: bgcolor="nome in inglese del colore" per il colore a tinta unita, o background="nome dello sfondo completo di estensione gif o jpg" per l'uso di un'immagine grafica 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 è anche possibile adoperare colori e sfondi diversi per ogni singola cella, in questo caso applicando lo stesso sistema visto per table e cioè gli stessi attributi, ma al solo elemento <TD>.

Gli attributi supportati dalle tabelle sono moltissimi, alcuni sono proprietari dei soli browser IE, altri sono talmente rari che difficilmente avrete modo di farne uso, quelli che invece si adoperano con frequente facilità sono :

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 sono certo al momento servirebbero soltanto a confondervi, potete fare riferimento alla mia guida html.

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.