precedente successivo

Il blocco che definisce una tabella deve compreso fra i tag <TABLE> e </TABLE>.

L'elemento "CAPTION", se presente, definisce il titolo della tabella.

Il corpo della tabella viene definito definendo le singole righe.

Il codice del contenuto di una riga deve essere compreso fra i tag <TR> e </TR>; esso è costituito dalle definizioni delle celle presenti nella riga. Se la riga contiene una sola cella, i tag di riga possono essere omessi.

Una cella risulta vuota se, fra i tag di definizione (<TD> e </TD> o <TH> e </TH>), non viene inserito niente.

sia Explorer che Netscape, per visualizzare le celle, vogliono che non siano vuote.

Il codice seguente definisce una semplice tabella ( con titolo "tabella") di una riga, con due celle (la prima,definita con th, ha il testo in grassetto).

<table border="1" width="70%" align="center">
<caption align="center">tabella</caption>
<tr>
<th align="center" width="50%">PRIMA CELLA</th>
<td align="center">SECONDA CELLA</TD>
</tr>
</table>

tabella

PRIMA CELLA	SECONDA CELLA

Le celle, usando COLSPAN e ROWSPAN, possono avere larghezze ed altezze diverse.
Il codice seguente definisce la

tabella esempio 1 caratterzzata da una larghezza fissa.

<TABLE BORDER="1" CELLPADDING="15" CELLSPACING="8" WIDTH="450" ALIGN="center">
<CAPTION ALIGN="bottom"><H4>esempio 1</H4></CAPTION>

<TH COLSPAN="4">CELLA grande</TH> definisce una cella larga 4 colonne con contenuto enfatizzato

<TR> prima riga, con quattro celle; le due esterne sono alte tre righe.
     <TH ROWSPAN="3" WIDTH=20%" VALIGN="top">CAMPO 1</TH>
     <TH WIDTH="40%">CAMPO 2</TH>
     >TH WIDTH="40%">CAMPO 3</TH>
     <TH ROWSPAN="3" WIDTH=20%" VALIGN="middle">1.2.3</TH>
<TR>

<TR> seconda riga, con due celle perché le altre due sono inglobate in quelle esterne
     <TD>uno</td>
     <TD>due</TD>
</TR>

<TR> terza riga, con una cella larga due celle
     <TD colspan=2 align="right">tre</td>
</TR>

</TABLE>


da notare come le spaziature fra le celle alterano le larghezze delle celle stesse.

top

---

La tabella esempio 2 è caratterizzata da una larghezza relativa alla larghezza della finestra.

<TABLE BORDER="1" ALIGN="center" CELLPADDING="15" CELLSPACING="8" WIDTH="90%">
Se la larghezza (width) è = a 100%, l'attributo ALIGN=center non serve

<CAPTION>esempio 2</CAPTION>

<TH COLSPAN=4>CELLA grande</TH>

<TR>
     <TH WIDTH=20%>CAMPO 1</TH>
     <TH WIDTH=40%>CAMPO 2</TH>
     <TH WIDTH=40%>CAMPO 3</TH>
     <TH ROWSPAN=3 ALIGN="left" VALIGN="middle">1.2.3</TH>
</TR>

<TR>
     <TD>uno</TD>
     <TD>due</TD>
     <TD>tre</TD>
</TR>

<TR>
     <TDquattro</TD>
     <TD>cinque</TD>
     <TD>sei</TD>
</TR>

</TABLE>

top

---

esempio 3

L'altezza "n" di una cella che occupa una riga intera non può essere definita con ROWSPAN perché non ci sono, di fianco, altre altezze di riferimento. Per ottenere l'altezza voluta occorre esprimere l'altezza in pixel.

<TABLE BORDER="1" CELLPADDING="4" CELLSPACING="2" WIDTH="100%">
<CAPTION ALIGN="bottom"><font color=blue><b>esempio 3</b></font> </CAPTION>

<TR> riga 1
    <TH COLSPAN="3" HEIGHT="100">CELLA grande </TH>
</TR>

<TR> riga 2
    <TH HEIGHT="70">CAMPO 1</TH>
    <TH VALIGN="top">CAMPO 2</TH>
    <TH VALIGN="bottom">CAMPO 3</TH>
</TR>

<TR> riga 3
    <TD>uno</TD>
    <TD>due</TD>
    <TD>tre</TD>
</TR>

</TABLE>

00

top

---

Esempio di cella nidificata in un'altra cella.

In questo esempio si definisce una tabella inserita nella cella di destra della prima riga di un'altra tabella.

Come contenuto della seconda cella viene definita un'altra tabella.

esempio 4

CELLA DI SINISTRA	1 2 3 4 5
uno	due	tre

<TABLE BORDER="1" CELLPADDING="4" CELLSPACING="2" HEIGHT="200" WIDTH="100%"> <CAPTION ALIGN="bottom"> <FONT COLOR="blue"> <b>esempio 4</b> </FONT> </CAPTION>

<TR>
    <TD WIDTH="30%"><h3>CELLA DI<BR>SINISTRA</H3></TD> cella di sinistra (larga il 30% della larghezza della tabella), la larghezza della cella di destra è tutto lo spazio rimanente.

inizio del codice per nidificare una altra tabella nella cella, la tabella viene definita come contenuto della cella (dopo TD)

     <TD COLSPAN="2" ALIGN="center VALIGN="center">

<TABLE BORDER="1" CELLPADDING="2" CELLSPACING="4" HEIGHT="30%" WIDTH="50%">
<TR>      <TD COLSPAN="2"> </TD>      </TR>
<TR>      <TD> </TD> <TD> </TD>      </TR>
<TR>      <TD> </TD> <TD> </TD>      </TR>

</TABLE>         fine codice della tabella nidificata.

    </TD>

<TR>
     <TD>uno</TD>
     <TD WIDTH="35%">due</TD>
     <TD>tre</TD>
</TR>

</TABLE>

top

precedente successivo