HTML – Le Tabelle

HTML – Le Tabelle

Laboratorio di Applicazioni Informatiche II mod. A

HTML possiede tre importanti funzionalità:

• le tabelle; • i frame (o riquadri);• i form (o moduli).

Le tabelle rappresentano un metodo molto flessibile per ordinare gli oggetti secondo una griglia, fornendo una certa coesione visiva a una pagina Web.

Una tabella viene definita dalla coppia di tag <table> </table>, al cui interno si inseriscono i tag:

• caption identifica il titolo (principale) della tabella;• tr identifica le righe;• th identifica una cella che funge da

intestazione;•td identifica una cella contenente i dati.

Laboratorio di Applicazioni Informatiche II mod. A HTML – Le Tabelle


Ecco un semplicissimo esempio di tabella:

<table> <caption>Risultati delle Gare</caption> <tr><th>Concorrente</th><th>Posizione</th></tr> <tr><td>Mario Rossi</td><td>1</td></tr> <tr><td>Carlo Bianchi</td><td>2</td></tr> <tr><td>Luigi Verdi</td><td>3</td></tr></table>

I browser trattano gli elementi th e td in maniera differente: di solito il contenuto di una cella th viene visualizzato grassetto e centrato, mentre gli elementi td vengono allineati a sinistra.

Il listato precedente potrebbe produrre pertanto la seguente visualizzazione:



Tuttavia l’allineamento orizzontale dei paragrafi sulle righe di una tabella può essere variato inserendo nel tag td l’attributo align, che può assumere uno dei seguenti valori:

• left: allinea il testo a sinistra (valore preimpostato);• center: allinea il testo al centro;• right: allinea il testo a destra.


Vediamo ora gli attributi di <table>.

align: specifica l’allineamento orizzontale della tabella rispetto allo schermo (non quello del contenuto della tabella). I valori possibili sono:

•left: allineamento al margine sinistro dello schermo (valore preimpostato);

•right: allineamento al margine destro;•center: allineamento al centro dello schermo.


border=“3”

crea un bordo largo tre pixel intorno alle celle.

border: fa sì che il browser visualizzi un bordo attorno alle celle della tabella (in sua assenza la tabella non ha alcuna griglia attorno ai dati contenuti).

Si può impostare lo spessore del bordo fornendo a questo attributo un valore intero. Per esempio:


cellpadding: consente di specificare il numero di pixel di cui vanno separate le celle della tabella;

cellspacing: consente di specificare il numero di pixel che si vogliono come contorno dei dati in ciascuna cella;

width: specifica la larghezza della tabella: se viene indicato in % rappresenta la percentuale di larghezza della tabella rispetto allo schermo, altrimenti il numero di pixel (questa possibilità è sconsigliata, in quanto non si conosce la larghezza della finestra dei browser che verranno utilizzati dall’utente).

La tabella seguente:

<html> <head></head> <body> <table align="center" border="3"> <caption aling="left">Risultati delle Gare</caption> <tr><th>Concorrente</th><th>Posizione</th></tr> <tr><td colspan="1">Emanuele Mario Rossi-Bernardi</td> <td>1,2</td></tr> <tr><td align="center">Carlo Bianchi</td> <td>23,4</td></tr> <tr><td align="right">Luigi Verdi</td> <td>345,6</td></tr> <tr><td>Teodoro Ce</td><td>4567,8</td></tr> </table> </body></html>


è prodotta dal seguente listato:

Un utilizzo molto frequente delle tabelle si ha per creare spazi vuoti tra una parola e l’altra, come mostra il listato seguente:

MenuTabella.html



<html> <head><title>Menu tabella</title></head> <body text="navy" link="navy" vlink="navy" alink="navy"> <table align="center" rows=2> <tr><th valign="top" align="left"> <font size="+4" face="dombold bt" color="#ff8429"> Vai col surf</font></th></tr></table> <table align=center border=0 cols=7 width="55%"> <tr align=center> <td width="1%">|</td> <td width="27%"><a href="hnbch.htm">Huntington Beach</a></td> <td width="1%">|</td> <td width="17%"><a href="maui.htm">Maui</a></td> <td width="1%">|</td> <td width="27%"><a href="ftlaud.htm">Ft. Lauderdale</a></td> <td width="1%">|</td></tr></table> </body></html>

Documents

HTML – Le Tabelle