TABELLE

Le tabelle in una pagina web possono essere usate per :

1. presentare dati e informazioni;

2. dividere la pagina (ormai abbandonato con l'arrivo dei CSS);

3. creare dei menù;

4. ogni cella può contenere testo, link, immagini e possono avere uno sfondo colorato o uno sfondo immagine.

<table>

tag che formano la tabella

</table>

Dentro al tag di apertura <table attributi ….> posso inserire gli attributi sotto, che riguardano tutta la tabella, gli attributi dei tag interni hanno priorità rispetto agli stessi attributi generali.

align= left center right	Tabella allineata a sinistra Tabella al centro Tabella allineata a destra
background=filename	immagine inserita dietro alla tabella
bgcolor=#xxxxxx	colore dello sfondo
border=n	spessore del bordo
bordercolor=#xxxxxx	colore del bordo
bordercolordark=#xxxxxx	ombra del bordo
cellpadding=n	spazio tra le celle
cellspacing=n	distanza tra cella e contenuto
nowrap	impedisce l'interruzione di riga, anche se il contenuto è più grande della finestra del browser.
frame= void, above, below, lhs, rhs, hsides, vsides, box	elimina tutti i bordi esterni mostra il bordo solo in alto mostra il bordo solo in basso mostra il bordo solo sul lato sinistro mostra il bordo solo sul lato destro mostra il bordo solo sui lati orizzontali mostra il bordo solo sui lati verticali mostra il bordo su tutti i lati
valign= top bottom	allinea il contenuto con il lato superiore della cella allinea il contenuto con il lato inferiore della cella
width= n,n n,n%	ampiezza minima della tabella in pixel ampiezza minima in percentuale rispetto alla misura della finestra
summary=	Descrizione dettagliata per software vocali

Ogni riga della tabella si crea con il tag <tr> e all'interno si inseriranno i tag per creare le tabelle

<tr> crea una riga </tr>

Ogni colonna della tabella si crea con il tag <td> e all'inteno dell'elemento va inserito il contenuto della cella

<td> ogni blocco inserisce una colonna </td>

gli attributi che si possono attrubuire ai due tag di apertura <tr attributi ...> e <td attributi ...>.

align= left right center	allinea il contenuto a sinistra nelle celle allinea il contenuto a destra nelle celle allinea il contenuto al centro delle celle
background=filename	definisce un'immagine di sfondo per le celle
bgcolor=#xxxxxx	definisce un colore di sfondo per le celle
bordercolor=#xxxxxx	definisce il colore del bordo delle celle
bordercolordark=#xxxxxx	definisce il colore per l'ombra del bordo delle celle
valign= top middle bottom	allinea al lato superiore delle celle allinea al centro delle celle allinea al lato inferiore delle celle
width= n n%	specifica l'ampiezza minima delle celle in pixel specifica l'ampiezza minima delle celle in percentuale rispetto all'ampiezza della tabella
height= n n%	altezza minima delle celle in pixel altezza minima delle celle in percentuale rispetto all'altezza della tabella

Ci sono degli attributi che si possono usare solo con il tag <td attributi di td …..>

colspan=n	numero delle colonne nella cella (cioè unione colonne)
nowrap	impedisce l'interruzione di riga, anche se il contenuto della cella è più grande della finestra del browser.
rowspan=n	numero delle righe nella cella  (cioè unione righe)

Oss. 1 - A parità di attributo viene considerato quello delle colonne, cioè contenuto nel <td>

Per trasformare la prima riga in intestazione delle colonne, quindi un testo in grassetto, si racchiudono i tag che formano la prima riga e le colonne annesse all'interno di <thead> … </thead>

<table>

<!-- 1^ riga con 3 colonne (intestazioni colonne) -->

<thead>

<tr>

<td>1 rig 1 col</td> <td>1 rig 2 col</td> <td>1 rig 3 col</td>

</tr>

</thead>

<tbody>

<!-- 2^ riga con 3 colonne (1^ riga normale) -->

<tr>

<td>2 rig 1 col</td> <td>2 rig 2 col</td> <td>2 rig 3 col</td>

</tr>

<!-- 2^ riga con 3 colonne (1^ riga normale) -->

<tr>

<td>3 rig 1 col</td> <td>3 rig 2 col</td> <td>3 rig 3 col</td>

</tr>

</tbody>

</table>

Se si vuole evidenziare evidenziare l'ultima riga e non la prima si racchiudono i tag dell'ultima riga tra i tag <tfoot> … </tfoot>

<table>

<tbody>

<!-- 2^ riga con 3 colonne (1^ riga normale) -->

<tr>

<td>2 rig 1 col</td> <td>2 rig 2 col</td> <td>2 rig 3 col</td>

</tr>

<!-- 2^ riga con 3 colonne (1^ riga normale) -->

<tr>

<td>3 rig 1 col</td> <td>3 rig 2 col</td> <td>3 rig 3 col</td>

</tr>

</tbody>

<!-- ultima riga riga con 3 colonne (intestazioni colonne in basso) -->

<tfoot>

<tr>

<td>1 rig 1 col</td> <td>1 rig 2 col</td> <td>1 rig 3 col</td>

</tr>

</tfoot>

</table>

oss. 2 – dentro alla cella è possibile costruire una tabella con le stesse istruzioni.

L'ultimo tag che completa l'argomento delle tabelle è <caption> … </caption> che serve a scrivere a video il titolo o il nome della tabella. Questo tag viene scritto subito dopo il <table> ed accetta 4 attributi che definiscono dove va scritto il testo che racchiude :

ign=

Align= top right button left

sopra a destra sotto a sinistra

left
right
center