Laboratorio di Applicazioni Informatiche II mod. A HTML – Le Tabelle Laboratorio di Applicazioni Informatiche II mod. A HTML – Le Tabelle 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 • tr • th • td identifica identifica identifica identifica il titolo (principale) della tabella; le righe; una cella che funge da intestazione; 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. Laboratorio di Applicazioni Informatiche II mod. A HTML – Le Tabelle Il listato precedente potrebbe produrre pertanto la seguente visualizzazione: Laboratorio di Applicazioni Informatiche II mod. A HTML – Le Tabelle 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. Laboratorio di Applicazioni Informatiche II mod. A HTML – Le Tabelle 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. Laboratorio di Applicazioni Informatiche II mod. A HTML – Le Tabelle 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: border=“3” crea un bordo largo tre pixel intorno alle celle. Laboratorio di Applicazioni Informatiche II mod. A HTML – Le Tabelle 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: Laboratorio di Applicazioni Informatiche II mod. A HTML – Le Tabelle è prodotta dal seguente listato: <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> Laboratorio di Applicazioni Informatiche II mod. A HTML – Le Tabelle 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 Laboratorio di Applicazioni Informatiche II mod. A HTML – Le Tabelle <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>
Scarica
