Costruire un Sito Web 4a Lezione: Martedì 20 Febbraio – HTML – Tabelle Perché usare le tabelle? Sia per inserire informazioni in forma tabellare: Ma, soprattutto, sono utili per creare graziose pagine web, che possono essere costruite semplicemente facendo buon uso dei <TABLE> tags! Esempio di pagina web creata utilizzando le tabelle La stessa pagina con uno sfondo grigio e i bordi della tabella evidenziati Come si creano le tabelle? Il tutto si ottiene giocando in pratica su TRE soli tags: <TABLE> <TR> TableRow definisce una riga orizzontale di <TD> (TableData) celle. <TD> Il tag principale. Utilizzato per indicare al browser "questa é una tabella", assieme ad altri attributi come le dimensioni, i bordi ecc... Specifica i singoli elementi o celle in una riga. Idea: Una tabella é fatta di righe fatte a loro volta di celle. Esempio di tabella Perché imparare i tags delle tabelle? Se si è davvero intenzionati ad imparare a fare delle belle pagine web, allora é necessario perdere un po' di tempo ad imparare i vari tags Se ci si basa esclusivamente sui "table wizards" degli editor HTML le possibilità verranno seriamente limitate, inoltre il risultato finale potrà essere differente da quello che si vuole ottenere I migliori editor cercano infatti di rendere più facile la creazione delle pagine Non cercheranno di creare le pagine al posto vostro! Esempio 1 Aprire il Blocco Note e copiare il seguente codice: <HTML> <HEAD> <TITLE>Primo esempio di tabelle</TITLE> </HEAD> <BODY> </BODY> </HTML> Ora salvatelo come tabella1.html nella cartella Lezione4 da creare sul desktop Esempio 1 - continua Ora scriviamo i tags di tabella Questi significano semplicemente "qui comincia una tabella" e "qui finisce la tabella“ <HTML> <HEAD> <TITLE>Primo esempio di tabelle</TITLE> </HEAD> <BODY> <TABLE> </TABLE> </BODY> </HTML> Esempio 1 - continua Ogni tabella ha bisogno di perlomeno UNA riga <HTML> <HEAD> <TITLE>Primo esempio di tabelle</TITLE> </HEAD> <BODY> <TABLE> <TR> </TR> </TABLE> </BODY> </HTML> Esempio 1 - continua E ovviamente ogni riga necessita di perlomeno una cella di dati <HTML> <HEAD> <TITLE>Primo esempio di tabelle</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD></TD> </TR> </TABLE> </BODY> </HTML> Esempio 1 - continua D'ora in poi, per semplificarci la vita, scriverò solo le istruzioni che riguardano le tabelle Ometterò quindi HEAD, BODY, TITLE, etc.. <TABLE> <TR> <TD></TD> </TR> </TABLE> Esempio 1 - continua Adesso ci serve qualcosa da mettere nella cella Che ne dite di Scarlett Johansson (le ragazze possono inserirci George Clooney)? mettiamo Scarlett Johansson nella <TD> cell <TABLE> <TR> <TD>Scarlett Johansson</TD> </TR> </TABLE> Esempio 1 - continua Ora proviamo a vedere cosa abbiamo creato fino ad ora….. Questo è quello che abbiamo creato... Scarlett Johansson Questa è la prima tabella che abbiamo creato! Esempio 1 - continua Dato che quello che abbiamo creato fino ad ora assomiglia poco ad una tabella, facciamolo somigliare di più ad una tabella e diamogli un bordo <TABLE BORDER=1> <TR> <TD>Scarlett Johansson</TD> </TR> </TABLE> Esempio 1 - continua Proviamo a fare il bordo un po' più grosso <TABLE BORDER=5> <TR> <TD>Scarlett Johansson</TD> </TR> </TABLE> Esempio 1 - continua E se lo facessimo ENORME? <TABLE BORDER=25> <TR> <TD>Scarlett Johansson</TD> </TR> </TABLE> Esempio 1 - continua E se lo levassimo di mezzo? <TABLE BORDER=0> <TR> <TD>Scarlett Johansson</TD> </TR> </TABLE> Come potete vedere il valore di default è bordo nullo! Esempio 1 - continua Per ora lavoriamo con un bordo non troppo largo <TABLE BORDER=3> <TR> <TD>Scarlett Johansson</TD> </TR> </TABLE> Esempio 1 - continua Se non viene specificata alcuna dimensione la tabella verrà visualizzata grande quel tanto che basta <TABLE BORDER=3> <TR> <TD>Scarlett Johansson, Angelina Jolie</TD> </TR> </TABLE> Esempio 1 - continua In ogni caso non è difficile specificare la grandezza della tabella <TABLE BORDER=3 WIDTH=100% > <TR> <TD>Scarlett Johansson, Angelina Jolie</TD> </TR> </TABLE> Esempio 1 - continua Se vogliamo specificare una grandezza per la tabella è meglio farlo in modo sensato! <TABLE BORDER=3 WIDTH=75% > <TR> <TD>Scarlett Johansson, Angelina Jolie</TD> </TR> </TABLE> Esempio 1 - continua Per adesso leviamoci dalle scatole Angelina Jolie <TABLE BORDER=3 WIDTH=75% > <TR> <TD>Scarlett Johansson</TD> </TR> </TABLE> Esempio 1 - continua Riduciamo la dimensione della tabella al 50% della dimensione totale della finestra del Browser <TABLE BORDER=3 WIDTH=50% > <TR> <TD>Scarlett Johansson</TD> </TR> </TABLE> Esempio 1 - continua Proviamo a specificare una dimensione di 50 invece che il 50% <TABLE BORDER=3 WIDTH=50> <TR> <TD>Scarlett Johansson</TD> </TR> </TABLE> Esempio 1 - continua Ora 100 <TABLE BORDER=3 WIDTH=100> <TR> <TD>Scarlett Johansson</TD> </TR> </TABLE> Come potete vedere ci sono due modi di specificare la dimensione di un tabella Ciascuno dei due ha la sua utilità ma discuteremo un'altra volta i criteri per la scelta di uno dei due Esempio 1 - continua Potremmo essere anche interessati all'altezza. <TABLE BORDER=3 WIDTH=100 HEIGHT=75 > <TR> <TD>Scarlett Johansson</TD> </TR> </TABLE> Esempio 1 - continua E' possibile controllare il punto della cella in cui appariranno i dati <TABLE BORDER=3 WIDTH=100 HEIGHT=75 > <TR> <TD ALIGN=CENTER>Scarlett Johansson</TD> </TR> </TABLE> Esempio 1 - continua <TABLE BORDER=3 WIDTH=100 HEIGHT=75 > <TR> <TD ALIGN=RIGHT>Scarlett Johansson</TD> </TR> </TABLE> <TABLE BORDER=3 WIDTH=100 HEIGHT=75 > <TR> <TD ALIGN=LEFT>Scarlett Johansson</TD> </TR> </TABLE> Come potete vedere il valore di default è ALIGN=LEFT Esempio 1 - continua E' anche possibile controllare la visualizzazione verticale all'interno di una cella. <TABLE BORDER=3 WIDTH=100 HEIGHT=75 > <TR> <TD ALIGN=LEFT VALIGN=TOP>Scarlett Johansson</TD> </TR> </TABLE> Esempio 1 - continua <TABLE BORDER=3 WIDTH=100 HEIGHT=75 > <TR> <TD ALIGN=LEFT VALIGN=BOTTOM>Scarlett Johansson</TD> </TR> </TABLE> <TABLE BORDER=3 WIDTH=100 HEIGHT=75 > <TR> <TD ALIGN=LEFT VALIGN=MIDDLE>Scarlett Johansson</TD> </TR> </TABLE> In questo caso per default i dati vanno nel mezzo Esempio 1 - continua Adesso vediamo qualcosa di diverso Le immagini possono essere incasellate e manipolate come facenti parte di dati di una tabella Proviamo ad andare su Internet e cercare una foto di Scarlett Johansson Copiatela nella directory in cui state lavorando (quella dove c'è tabella1.html per intendersi) Sostituite il testo Scarlett Johansson con un Tag di immagine Esempio 1 - continua <TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC= "Scarlett.jpg" WIDTH=50 HEIGHT=50></TD> </TR> </TABLE> Ricordatevi che è buona norma includere gli attributi di altezza e larghezza in tutti i tag di immagine Senza scendere nel dettaglio, farlo rende la vita più facile al browser e evita sorprese sgradite Esempio 1 - continua Torniamo un attimo indietro alla semplice Scarlett Johansson <TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=LEFT VALIGN=MIDDLE>Scarlett Johansson</TD> </TR> </TABLE> Esempio 1 - continua Per semplicità leviamo gli attributi di allineamento Già sappiamo cosa accadrà dal momento che conosciamo quali sono i valori di default A questo proposito, un TAG dice al browser di fare qualcosa Un ATTRIBUTO va dentro al TAG e specifica al browser come farlo <TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD>Scarlett Johansson</TD> </TR> </TABLE> Esempio 1 - continua Adesso ingrandiamo di un po’ la tabella <TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD>Scarlett Johansson</TD> </TR> </TABLE> Esempio 1 - continua L'amica di Scarlett, Angelina é tornata e vuole la sua cella personale stavolta! <TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD>Scarlett Johansson</TD> <TD>Angelina Jolie</TD> </TR> </TABLE> Esempio 1 - continua Quando non viene fornita alcuna istruzione al browser, di solito (ma non sempre) ogni cella assume una dimensione diversa E' sempre una buona idea specificare quanto é grande ciascuna cella Controllate attentamente che i vostri calcoli siano giusti, altrimenti quello che la gente vedrà visualizzato sarà MOLTO diverso da quello che volete fargli vedere! <TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=150 >Scarlett Johansson</TD> <TD WIDTH=150 >Angelina Jolie</TD> </TR> </TABLE> Esempio 1 - continua Gli attributi di LARGHEZZA possono anche essere espressi come valori percentuale <TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=50% >Scarlett Johansson</TD> <TD WIDTH=50%>Angelina Jolie</TD> </TR> </TABLE> Esempio 1 - continua Assegnamo a Scarlett una cella più grande visto che lei é qui dall'inizio! <TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=80% >Scarlett Johansson</TD> <TD WIDTH=20%>Angelina Jolie</TD> </TR> </TABLE> Esempio 1 - continua Adesso pure Monica é arrivata e, ovviamente, anche lei vuole la sua cella personale Dobbiamo decidere quanto spazio assegnarle Direi che il 20% é più che sufficiente Fate attenzione ad aggiustare pure la quota di spazio che spetta a Scarlett! <TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=60% >Scarlett Johansson</TD> <TD WIDTH=20%>Angelina Jolie</TD> <TD WIDTH=20%>Monica Bellucci</TD> </TR> </TABLE> Esempio 1 - continua Esempio 1 - continua Tre tizi sull'altro lato della strada vedono quello che sta succedendo e decidono che pure loro vogliono stare nella tua tabella! Mi sa che dovremo assegnare una riga tutta per loro <TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=60% >Scarlett Johansson</TD> <TD WIDTH=20%>Angelina Jolie</TD> <TD WIDTH=20%>Monica Bellucci</TD> </TR> <TR> <TD>Luca</TD> <TD>Gianmichele</TD> <TD>Nicola</TD> </TR> </TABLE> Esempio 1 - continua ATTENZIONE: Gli attributi di LARGHEZZA vengono estesi anche alle righe successive! Esempio 1 - continua Se Nicola si scoccia e se ne va la tabella resta intatta Al suo posto rimane una casella vuota <TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=60% >Scarlett Johansson</TD> <TD WIDTH=20%>Angelina Jolie</TD> <TD WIDTH=20%>Monica Bellucci</TD> </TR> <TR> <TD>Luca</TD> <TD>Gianmichele</TD> </TR> </TABLE> Esempio 1 - continua Esempio 1 - continua Rimettiamo Nicola al suo posto e leviamo tutti gli attributi tranne il BORDER <TABLE BORDER=3> <TR> <TD >Scarlett Johansson</TD> <TD>Angelina Jolie</TD> <TD>Monica Bellucci</TD> </TR> <TR> <TD>Luca</TD> <TD>Gianmichele</TD> <TD>Nicola</TD> </TR> </TABLE> Esempio 1 - continua Adesso parleremo di due attributi che si chiamano CELLPADDING e CELLSPACING Sono entrambi definiti all'interno del Tag <TABLE> iniziale CELLPADDING é lo spazio che c'é fra il bordo della cella e il contenuto della cella stessa Il valore di default per questo attributo é 1. La ragione per cui il default é 1 e non 0 é che altrimenti il testo starebbe schiacciato contro i bordi della cella e questo non é bello a vedersi (in ogni caso se lo desiderate si può specificare 0) Esempio 1 - continua <TABLE BORDER=3 CELLPADDING=12> <TR> <TD >Scarlett Johansson</TD> <TD>Angelina Jolie</TD> <TD>Monica Bellucci</TD> </TR> <TR> <TD>Luca</TD> <TD>Gianmichele</TD> <TD>Nicola</TD> </TR> </TABLE> Esempio 1 - continua Se sostituiamo CELLSPACING al posto di CELLPADDING otteniamo un effetto un po' diverso <TABLE BORDER=3 CELLSPACING=12> <TR> <TD >Scarlett Johansson</TD> <TD>Angelina Jolie</TD> <TD>Monica Bellucci</TD> </TR> <TR> <TD>Luca</TD> <TD>Gianmichele</TD> <TD>Nicola</TD> </TR> </TABLE> Il valore di default per CELLSPACING é 2 Esempio 1 - continua Ovviamente siamo anche liberi di usare una combinazione dei due attributi <TABLE BORDER=3 CELLPADDING=12 CELLSPACING=12> <TR> <TD >Scarlett Johansson</TD> <TD>Angelina Jolie</TD> <TD>Monica Bellucci</TD> </TR> <TR> <TD>Luca</TD> <TD>Gianmichele</TD> <TD>Nicola</TD> </TR> </TABLE> Esempio 1 - continua Leviamoci di torno CELLPADDING e CELLSPACING e torniamo alla nostra vecchia e semplice tabella <TABLE BORDER=3> <TR> <TD >Scarlett Johansson</TD> <TD>Angelina Jolie</TD> <TD>Monica Bellucci</TD> </TR> <TR> <TD>Luca</TD> <TD>Gianmichele</TD> <TD>Nicola</TD> </TR> </TABLE> Esempio 1 - continua Una caratteristica interessante è la possibilità di specificare un colore di sfondo per ciascuna cella, riga o per l'intera tabella Per fare questo si usa l'attributo BGCOLOR <TABLE BORDER=3 BGCOLOR=“GREEN"> <TR> <TD >Scarlett Johansson</TD> <TD>Angelina Jolie</TD> <TD>Monica Bellucci</TD> </TR> <TR> <TD>Luca</TD> <TD>Gianmichele</TD> <TD>Nicola</TD> </TR> </TABLE> Esempio 1 - continua <TABLE BORDER=3> <TR BGCOLOR=“GREEN”> <TD >Scarlett Johansson</TD> <TD>Angelina Jolie</TD> <TD>Monica Bellucci</TD> </TR> <TR BGCOLOR=“CYAN”> <TD>Luca</TD> <TD>Gianmichele</TD> <TD>Nicola</TD> </TR> </TABLE> Esempio 1 - continua <TABLE BORDER=3> <TR BGCOLOR=“GREEN”> <TD >Scarlett Johansson</TD> <TD>Angelina Jolie</TD> <TD>Monica Bellucci</TD> </TR> <TR> <TD BGCOLOR=“CYAN”>Luca</TD> <TD BGCOLOR=“RED”>Gianmichele</TD> <TD BGCOLOR=“BROWN”>Nicola</TD> </TR> </TABLE> Esempio 1 - continua Un'ultima cosa riguardo ai colori di sfondo nelle tabelle Un colore di sfondo di cella (<TD>) copre quello di riga (<TR>) e uno di riga (<TR>) copre uno di tabella (<TABLE>) <TABLE BORDER=3 BGCOLOR=“GREEN”> <TR BGCOLOR=“RED”> <TD BGCOLOR=“CYAN”>Scarlett Johansson</TD> <TD>Angelina Jolie</TD> <TD>Monica Bellucci</TD> </TR> <TR> <TD>Luca</TD> <TD>Gianmichele</TD> <TD>Nicola</TD> </TR> </TABLE> Esempio 1 - continua Naturalmente all'interno di una cella è possibile utilizzare tutti gli altri codici HTML <TABLE BORDER=3> <TR> <TD><B>Scarlett Johansson</B></TD> <TD><I>Angelina Jolie</I></TD> <TD>Monica Bellucci</TD> </TR> <TR> <TD><A HREF=http://www.libanore.it>Luca</A></TD> <TD>Gianmichele</TD> <TD>Nicola</TD> </TR> </TABLE> Esercizio 1 Creare la seguente pagina Internet utilizzando una tabella La foto della torta di mele la potete trovare al seguente indirizzo: http://www.libanore.it/applepie.gif Tabella dentro a tabella Sarà mica possibile mettere una tabella dentro una tabella?? Proviamo subito Iniziamo ad inserire Scarlett <TABLE BORDER=3> <TR> <TD>Scarlett Johansson</TD> </TR> </TABLE> Tabella dentro a tabella continua Ingrandiamo di un po’ la tabella <TABLE BORDER=3 WIDTH=200 HEIGHT=100> <TR> <TD>Scarlett Johansson</TD> </TR> </TABLE> Tabella dentro a tabella continua Sostituiamo Scarlett con una Scarlett completa di tabella <TABLE BORDER=3 WIDTH=200 HEIGHT=100> <TR> <TD> <TABLE BORDER=3> <TR> <TD>Scarlett Johansson</TD> </TR> </TABLE> </TD> </TR> </TABLE> Tabella dentro a tabella continua Possiamo centrare facilmente la nostra seconda tabella <TABLE BORDER=3 WIDTH=200 HEIGHT=100> <TR> <TD> <CENTER> <TABLE BORDER=3> <TR> <TD>Scarlett Johansson</TD> </TR> </TABLE> </CENTER> </TD> </TR> </TABLE>