1 / 11

HTML – Le Tabelle

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).

liang
Télécharger la présentation

HTML – Le Tabelle

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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 identifica il titolo (principale) della tabella; • tr identifica le righe; • thidentifica una cella che funge da intestazione; • tdidentifica una cella contenente i dati.

  3. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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.

  4. Laboratorio di Applicazioni Informatiche II mod. AHTML – Le Tabelle Il listato precedente potrebbe produrre pertanto la seguente visualizzazione:

  5. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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.

  6. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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.

  7. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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.

  8. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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:

  9. Laboratorio di Applicazioni Informatiche II mod. AHTML – Le Tabelle è prodotta dal seguente listato: <html> <head></head> <body> <tablealign="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>

  10. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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

  11. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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>

More Related