Tabelle


Puoi definire delle tabelle per formattare la tua pagina tramite il tag <TABLE>. Ogni tabella contiene righe e celle. Puoi definire le righe tramite il tag <TR> e le celle tramite il tag <TD>.

  1. Definire una tabella
  2. Definire una riga
  3. Definire una cella
  4. Definire il titolo della tabella

Definire una TABELLA

<TABLE BORDER="numero" CELLSPACING="numero" CELLPADDING="numero" WIDTH="%" BGCOLOR="#nnnnnn">

Il parametro BORDER definisce il bordo della tabella:

1 riga, 1 cella, BORDER=1...

E questo e' il sorgente HTML della pagina:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR><TD>1 riga, 1 cella, BORDER="1"...</TD></TR>
</TABLE>
</BODY>
</HTML>

1 riga, 1 cella, BORDER=5...

E questo e' il sorgente HTML della pagina:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="5">
<TR><TD>1 riga, 1 cella, BORDER="1"...</TD></TR>
</TABLE>
</BODY>
</HTML>

1 riga, 1 cella, BORDER=0!

E questo e' il sorgente HTML della pagina:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="0">
<TR><TD>1 riga, 1 cella, BORDER=0!</TD></TR>
</TABLE>
</BODY>
</HTML>

Si, puoi usare il valore zero! Cio' e' utile per migliorare l' estetica della pagina senza un apparente uso di tabelle...

Ora guarda questa tabella:

riga 1: cella 1 riga 1: cella 2
riga 2: cella 3 riga 2: cella 4

Come puoi vedere, le celle sono separate le une dalle altre da un certo spazio: puoi definire lo spazio tra le celle come preferisci.

E questo e' il sorgente HTML della pagina:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1" CELLSPACING="10">
<TR><TD>riga 1: cella 1</TD><TD>riga 1: cella 2</TD></TR>
<TR><TD>riga 2: cella 3</TD><TD>riga 2: cella 4</TD></TR>
</TABLE>
</BODY>
</HTML>

Come potresti fare
questo senza usare tabelle?

Guarda la tabella sopra...Come potresti costruire qualcosa di simile senza usare tabelle?

E questo e' il sorgente HTML della pagina:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="0" CELLSPACING="40">
<TR><TD>Come potresti</TD><TD>fare</TD></TR>
<TR><TD>questo senza</TD><TD>usare tabelle?</TD></TR>
</TABLE>
</BODY>
</HTML>

Guarda questa tabella:

1 2
3 4

E questo e' il sorgente HTML della pagina:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1" CELLPADDING="40">
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
</BODY>
</HTML>

Ora usiamo sia CELLPADDING che CELLSPACING per forzare CELLSPACING="0"...
Guarda questa tabella:

1 2
3 4

E questo e' il sorgente HTML della pagina:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="40">
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
</BODY>
</HTML>

Cambiando CELLSPACING:

Come potresti fare
questo senza usare tabelle?

La stessa tabella cambiando CELLPADDING:

Come potresti fare
questo senza usare tabelle?

 

Guarda questa tabella:

1 2
3 4

E questo e' il sorgente HTML della pagina:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1" WIDTH="100%">
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
</BODY>
</HTML>

Dove WIDTH e' la percentuale di pagina riempita dalla tabella. Guarda:

1 2
3 4

E questo e' il sorgente HTML della pagina:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1" WIDTH="50%">
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
</BODY>
</HTML>

Infine, puoi cambiare i colori della tua tabella usando il parametro BGCOLOR:

cella 1 cella 2
cella 3 cella 4

E questo e' il sorgente HTML della pagina:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1" BGCOLOR="#000080">
<TR><TD>cella 1</TD><TD>cella 2<TD/></TR>
<TR><TD>cella 3</TD><TD>cella 4</TD></TR>
</TABLE>
</BODY>
</HTML>

Definire una RIGA

<TR ALIGN="allineamento orizzontale" VALIGN="allineamento verticale">

ALIGN puo' essere:

  1. LEFT
  2. CENTER
  3. RIGHT

VALIGN puo' essere:

  1. TOP
  2. MIDDLE
  3. BOTTOM
Come allineare il testo della pagina variando ALIGN e VALIGN:
1 ALIGN="LEFT"
2 ALIGN="CENTER"
3 ALIGN="RIGHT"

4
 VALIGN="TOP"

5
 VALIGN="MIDDLE"

6
 VALIGN="BOTTOM"

7
 ALIGN="LEFT" VALIGN="TOP"

8
 ALIGN="CENTER" VALIGN="TOP"

9
 ALIGN="RIGHT" VALIGN="TOP"

10
 ALIGN="LEFT" VALIGN="MIDDLE"

11
 ALIGN="CENTER" VALIGN="MIDDLE"

12
 ALIGN="RIGHT" VALIGN="MIDDLE"

13
 ALIGN="LEFT" VALIGN="BOTTOM"

14
 ALIGN="CENTER" VALIGN="BOTTOM"

15
 ALIGN="RIGHT" VALIGN="BOTTOM"

Bene, puoi provare tutte le combinazioni...

Definire una CELLA

<TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM ROWSPAN="numero" COLSPAN="numero" WIDTH="numero o % della tabella" BGCOLOR="#nnnnnn" NOWRAP>

ALIGN e VALIGN: vedi definire una RIGA

Puoi definire quante righe e colonne deve occupare una cella. Per defiire cio', devi usare i parametri ROWSPAN e COLSPAN. ROWSPAN significa quante righe deve occupare la cella e COLSPAN significa quante colonne deve occupare la cella:

r1 c1 r1 c2 r1 c3 r1 c4
r2 c1
r3 c1 r3 c2
r4 c1 r4 c2 r4 c3

Nell' esempio sopra, la prima riga (r1) ha 4 celle:

  1. cella1 (c1), che occupa 1 riga
  2. cella2 (c2), che occupa 2 righe
  3. cella3 (c3), che occupa 3 righe
  4. cella4 (c4), che occupa 4 righe

La seconda riga ha 1 cella, la terza ha 2 celle, la quarta ha 3 celle!!

E questo e' il sorgente HTML della pagina:

</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD>r1 c1</TD><TD ROWSPAN="2">r1 c2<TD ROWSPAN="3">r1 c3</TD><TD ROWSPAN="4">r1 c4</TD>
</TR><TD>r2 c1</TD>
<TR>
<TD>r3 c1</TD><TD>r3 c2</TD>
</TR>
<TR>
<TD>r4 c1</TD><TD>r4 c2</TD><TD>r4 c3</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Ora guarda qui:

r1 c1 r1 c2 r1 c3 r1 c4
r2 c1 r2 c2 r2 c3
r3 c1 r3 c2
r4 c1

Nell' esempio sopra, la prima riga (r1) ha 4 celle.

La seconda riga ha 3 celle:

  1. cella1 (c1), che occupa 2 colonne
  2. cella2 (c2)
  3. cella3 (c3)

La terza riga ha 2 celle:

  1. cella1 (c1), che occupa 3 colonne
  2. cella2 (c2)

La quarta riga ha 1 cella:

  1. cella1 (c1), che occupa 4 colonne

E questo e' il sorgente HTML della pagina:

</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD>r1 c1</TD><TD>r1 c2<TD>r1 c3</TD><TD>r1 c4</TD>
</TR>
<TR>
<TD COLSPAN="2">r2 c1</TD><TD>r2 c2<TD>r2 c3</TD>
</TR>
<TR>
<TD COLSPAN="3">r3 c1</TD><TD>r3 c2</TD>
</TR>
<TR>
<TD COLSPAN="4">r4 c1</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Puoi definire l' ampiezza (WIDTH) della cella. Puoi specificare o 'pixel' o 'percentuale di tabella'. Percio' puoi usare WIDTH="numero" o WIDTH="%".

c1 c2 c3
c4 c5 c6
c7 c8 c9

Nell' esempio precedente, c5 e' definita cosi': WIDTH="10".

E questo e' il sorgente HTML della pagina:

</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD>c1</TD><TD>c2<TD>c3</TD></TD>
</TR>
<TR>
<TD>c4</TD><TD WIDTH="10">c5<TD>c6</TD></TD>
</TR>
<TR>
<TD>c7</TD><TD>c8<TD>c9</TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Ora guarda qui:

c1 c2 c3
c4 c5 c6
c7 c8 c9
Qui c5 e' definita cosi': WIDTH="10%". Cioe' significa: 10% della tabella.

E questo e' il sorgente HTML della pagina:

</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD>c1</TD><TD>c2<TD>c3</TD></TD>
</TR>
<TR>
<TD>c4</TD><TD WIDTH="10%">c5<TD>c6</TD></TD>
</TR>
<TR>
<TD>c7</TD><TD>c8<TD>c9</TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Ora vediamo i colori:

. . .
. . .
. . .

Qui sto usando il parametro BGCOLOR.

E questo e' il sorgente HTML della pagina:

</HEAD>
<TABLE BORDER="1" WIDTH="100%">
<TR>
<TD BGCOLOR="#ffffff">.</TD><TD BGCOLOR="#ff0000">.</TD><TD BGCOLOR="#0000ff">.</TD>
</TR>
<TR>
<TD BGCOLOR="#00ff00">.</TD><TD></TD><TD BGCOLOR="#ffff00">.</TD>
</TR>
<TR>
<TD BGCOLOR="#808080">.</TD><TD BGCOLOR="#00ffff">.</TD><TD BGCOLOR="#ffffff">.</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Puoi cambiare anche i colori del testo!

E questo e' il sorgente HTML della pagina:

</HEAD>
<TABLE BORDER="1" WIDTH="100%">
<TR>
<TD BGCOLOR="#00ffff"><FONT COLOR="#0000ff">Puoi cambiare</FONT></TD>
<TD BGCOLOR="#00ffff"><FONT COLOR="#0000ff">anche i colori del testo!</FONT></TD></TR>
</TR>
</TABLE>
</BODY>
</HTML>

Definire il titolo della tabella

Puoi mettere dei titoli nella tua tabella usando il tag <CAPTION>:

<CAPTION ALIGN=TOP|BOTTOM>

Titolo
     

E questo e' il sorgente HTML della pagina:

</HEAD>
<BODY>
<TABLE BORDER="1" WIDTH="100%">
<CAPTION ALIGN="TOP">Titolo</CAPTION>
<TR>
<TD>.</TD><TD>.</TD><TD>.</TD>
</TR>
</TABLE>
</BODY>
</HTML>

     
Titolo

E questo e' il sorgente HTML della pagina:

</HEAD>
<BODY>
<TABLE BORDER="1" WIDTH="100%">
<CAPTION ALIGN="BOTTOM">Titolo</CAPTION>
<TR>
<TD>.</TD><TD>.</TD><TD>.</TD>
</TR>
</TABLE>
</BODY>
</HTML>


      Home  Pag. prec.  Pag. succ.       Chi siamo?  Scrivici!

Copyright © 1998-2005 Wowarea