Tabelle -prima parte-

La tabella, elemento fondamentale

Ora ci accingeremo a scrivere il codice di quello che rappresenta croce e delizia di chiunque abbia a che fare con HTML.
Infatti le tabelle sono un ottimo mezzo per ottenere il posizionamento preciso di tutti gli oggetti che via via inseriremo nelle nostre pagine. La comprensione della loro struttura probabilmente non sarà immediata, ma con un pò di pratica riusciremo ad impadronirci della tecnica. Quella che segue è la tabella più semplice che HTML ci mette a disposizione.

<TABLE BORDER=1>
<TR>
<TD>Cella 1</TD>
</TR>
</TABLE>

Avrete notato la presenza dell'attributo BORDER=1 all'interno del tag TABLE, serve infatti ad evidenziare il bordo della tabella stessa. Impostandolo a BORDER=0 otterremmo questo risultato:

Cella 1

Proviamo ora ad aumentarne il valore a 6:

<TABLE BORDER=6>
<TR>
<TD>Cella 1</TD>
</TR>
</TABLE>

Passiamo ora ad illustrare un paio attributi che ci aiuteranno a definire meglio le proprietà della nostra tabella: CELLPADDING e CELLSPACING

CELLPADDING permette di ottenere una spaziatura tra il bordo interno della tabella ed il suo contenuto, in questo caso 10 pixel

<TABLE BORDER=1 CELLPADDING=10>
<TR>
<TD>Cella 1</TD>
</TR>
</TABLE>

Applicando CELLSPACING, in pratica, possiamo variare lo spessore del bordo

<TABLE BORDER=1 CELLSPACING=10>
<TR>
<TD>Cella 1</TD>
</TR>
</TABLE>

Applichiamo contemporaneamente i due attributi

<TABLE BORDER=1 CELLSPACING=10 CELLPADDING=10>
<TR>
<TD>Cella 1</TD>
</TR>
</TABLE>

Diamo valore 0 a CELLPADDING e CELLSPACING e guardiamo cosa succede:

Cella 1

La tabella a piu' celle

Una tabella composta da una sola cella avrebbe ben poche applicazioni pratiche.
Il prossimo esempio mostra una tabella composta da due celle affiancate.

<TABLE BORDER=1>
<TR>
<TD>Cella 1</TD>
<TD>Cella 1</TD>
</TR>
</TABLE>

Il prossimo esempio ci mostrera' il metodo per costruire una semplice tabella a due celle sovrapposte

<TABLE BORDER=1>
<TR>
<TD>Cella 1</TD>
</TR>
<TR>
<TD>Cella 2</TD>
</TR>
</TABLE>

Prima di passare alla descrizione dei prossimi elementi proviamo ad "assemblare" i due esempi raffigurati in precedenza.

<TABLE BORDER=1>
<TR>
<TD>Cella 1</TD>
<TD>Cella 2</TD>
</TR>
<TR>
<TD>Cella 3</TD>
<TD>Cella 4</TD>
</TR>
</TABLE>

Si puo' notare che in realta' costruire simili tabelle non e' complicato come potrebbe sembrare a prima vista.

Ecco le regole di base:

Il tag <TD> ..contenuto.. </TD> ci permette di costruire il "contenitore" per i nostri dati e di conseguenza per espandere la tabella in senso orizzontale.

Il tag <TR> invece "spezza" la riga permettendoci di sovrapporre le celle sviluppando la tabella in senso verticale.

Colspan e rowspan

Questi due attributi offrono l'opportunita' di unire due o piu' celle, sia in senso orizzontale che in senso verticale. Ecco un paio di esempi corredati di relativo sorgente.

L'attributo COLSPAN permette di unire due celle disposte in senso orizzontale.

<TABLE BORDER=1>
<TR>
<TD COLSPAN=2> COLSPAN </TD>
<TD> cella 1 </TD>
</TR>
<TR>
<TD> cella 2 </TD>
<TD> cella 3 </TD>
<TD> cella 4 </TD>
</TR>
</TABLE>

Mentre ROWSPAN permette la "fusione" in verticale.

<TABLE BORDER=1>
<TR>
<TD ROWSPAN=2> ROWSPAN </TD>
<TD> cella 1 </TD>
<TD> cella 2 </TD>
</TR>
<TR>
<TD> cella 3 </TD>
<TD> cella 4 </TD>
</TR>
</TABLE>

TH

L'elemento <TH> e' in realta' ben poco usato, in quanto l'unica caratteristica che lo differenzia da una normale cella definita con <TD> e' l'impostazione in grassetto del testo che eventualmente vi verra' inserito.

<TABLE BORDER=1>
<TR>
<TH> Cella TH </TH>
<TH> Cella TH </TH>
</TR>
<TR>
<TD> Cella 1 </TD>
<TD> Cella 2 </TD>
</TR>
</TABLE>

CAPTION

Anche <CAPTION> e' assai poco usato. La sua caratteristica e' di definire una cella che occupa tutto lo spazio orizzontale della tabella, in modo simile a COLSPAN. La differenza sta nel fatto che si puo' usare solo ad inizio tabella e che non viene visualizzato il bordo della cella stessa.

<TABLE BORDER=1>
<CAPTION> Cella CAPTION </CAPTION>
<TR>
<TD> cella 1 </TD>
<TD> cella 2 </TD>
</TR>
</TABLE> 

Il colore

Non va dimenticata la possibilita' di colorare una tabella data l'utilita' sia dal lato estetico, sia funzionale. L'attributo BGCOLOR puo' essere definito all'interno del tag <TABLE>, <TR> e dei vari tag che definiscono le celle.

<TABLE BORDER=1 BGCOLOR=yellow>
<TR>
<TD> cella 1 </TD>
</TR>
</TABLE> 

In questo esempio abbiamo impostato il colore all'interno dei vari tag a disposizione. Si noti che l'eventuale bordo mantiene il colore definito in <TABLE>.

<TABLE BORDER=1 BGCOLOR=yellow>
<TR>
<TD>Cella 1</TD>
<TD>Cella 2</TD>
</TR>
<TR BGCOLOR=aqua>
<TD>Cella 3</TD>
<TD>Cella 4</TD>
</TR>
<TR>
<TD BGCOLOR=lime>Cella 5</TD>
<TD BGCOLOR=silver>Cella 6</TD>
</TR>
</TABLE>

Prossimo capitolo