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

Presentazione sul tema: "HTML – Le Tabelle Laboratorio di Applicazioni Informatiche II mod. A."— Transcript della presentazione:

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

2 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, 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

3 Ecco un semplicissimo esempio di tabella: Risultati delle Gare Concorrente Posizione Mario Rossi 1 Carlo Bianchi 2 Luigi Verdi 3 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 Il listato precedente potrebbe produrre pertanto la seguente visualizzazione: Laboratorio di Applicazioni Informatiche II mod. A HTML – Le Tabelle

5 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. A HTML – Le Tabelle Vediamo ora gli attributi di. 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. A HTML – Le Tabelle 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:

8 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:

9 Risultati delle Gare Concorrente Posizione Emanuele Mario Rossi-Bernardi 1,2 Carlo Bianchi 23,4 Luigi Verdi 345,6 Teodoro Ce 4567,8 Laboratorio di Applicazioni Informatiche II mod. A HTML – Le Tabelle è prodotta dal seguente listato:

10 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

11 Menu tabella Vai col surf | Huntington Beach | Maui | Ft. Lauderdale |