Corso html Lezione 3

Transcript

1 Corso html Lezione 3

2 ELENCHI 3 ELENCHI NUMERICI 3 ELENCHI PUNTATI O NON ORDINATI 6 ELENCHI DI DEFINIZIONE 7 ELENCHI STRUTTURATI 8 TABELLE 12 DEFINIRE UNA TABELLA 12 TITOLO DI UNA TABELLA 16 BORDI 20 DIMENSIONI DELLA TABELLA 25 SPAZIATURA 28 I COLORI 31 ALLINEAMENTI 36 UNIONE DI CELLE 41 ATTRIBUTO SUMMARY 42 ATTRIBUTO FRAME 43 THEAD, TFOOT E TBODY 51 ELENCHI CON SIMBOLI SPECIALI 57 TABELLE E LAYOUT DELLA PAGINA 58 2

3 Elenchi Elenchi numerici Per ottenere un elenco numerico o ordinato si utilizza il tag OL (ordered list). Ogni elemento della lista deve essere preceduto dall empty tag LI (list Item). Ad esempio <OL> <LI>Elettronica <LI>Informatica <LI>Sistemi <LI>Calcolo </OL> produce il seguente risultato IL tag OL ha un attributo TYPE che consente di scegliere lo stile dell elenco. Ad esempio per creare un elenco in cui le voci sono contrassegnate da lettere maiuscole <OL TYPE= A > <LI>Elettronica <LI>Informatica <LI>Sistemi <LI>Calcolo </OL> 3

4 Per usare le lettere minuscole basterà porre <OL TYPE= a > <LI>Elettronica <LI>Informatica <LI>Sistemi <LI>Calcolo </OL> Per utilizzare i numeri romani basta porre <OL TYPE="I"> <LI>Elettronica <LI>Informatica <LI>Sistemi <LI>Calcolo </OL> Per utilizzare i numeri romani in minuscolo <OL TYPE="i"> <LI>Elettronica <LI>Informatica <LI>Sistemi <LI>Calcolo </OL> 4

5 Il tag LI ha l attributo VALUE che consente di far partire l elenco da un valore qualsiasi. Ad esempio <OL> <LI VALUE="3">Elettronica <LI>Informatica <LI>Sistemi <LI>Calcolo </OL> <OL TYPE="A"> <LI VALUE="4">Elettronica <LI>Informatica <LI>Sistemi <LI>Calcolo </OL> 5

6 Elenchi puntati o non ordinati Per realizzare un elenco puntato si utilizza il tag UL (unordered list). Per i singoli elementi della lista si utilizza ancora il tag LI. Ad esempio <UL> <LI >Elettronica <LI>Informatica <LI>Sistemi <LI>Calcolo </UL> Anche il tag UL ha un attributo TYPE che consente di scegliere il simbolo utilizzato per individuare i vari elementi dell elenco. Per utilizzare i pallini pieni che costituiscono poi l opzione di default, si pone l attributo TYPE= disc <UL TYPE="disc"> <LI >Elettronica <LI>Informatica <LI>Sistemi <LI>Calcolo </UL> Per usare pallini vuoti <UL TYPE="circle"> <LI >Elettronica <LI>Informatica 6

7 <LI>Sistemi <LI>Calcolo </UL> Per usare quadratini <UL TYPE="square"> <LI >Elettronica <LI>Informatica <LI>Sistemi <LI>Calcolo </UL> Elenchi di definizione Sono elenchi in cui appare un elenco di termini ciascuno dei quali è seguito da una definizione. Un elenco di definizioni è racchiuso fra tag DL (definition list), ogni termine è individuato dal tag DT (definition term), la sua definizione è individuata dal tag DD (definition defined). Ad esempio <DL> <DT>Abitazione (o Alloggio) <DD>Alloggio costituito da un solo locale o da un insieme di locali (stanze e vani accessori), costruito con quei requisiti che lo rendono adatto ad essere dimora stabile di una o più persone, anche nel caso in cui una parte sia adibita ad ufficio (studio professionale, ecc.). 7

8 Dotato di almeno un accesso indipendente dall'esterno (strada, cortile, ecc.) o da spazi di disimpegno comune (pianerottoli, ballatoi, terrazze, ecc.), un accesso cioè tale che non comporti il passaggio attraverso altre abitazioni. Separato da altre unità abitative da pareti. Inserito in un edificio. <DT>Accensione di prestiti <DD>L'ammontare delle operazioni di indebitamento a medio e lungo termine o "patrimoniali", con esclusione quindi di quelle di durata inferiore all'anno. <DT>Amministrazioni provinciali <DD>Gli enti locali le cui funzioni consistono nel curare gli interessi e promuovere lo sviluppo di vaste zone intercomunali o dell'intero territorio provinciale. </DL> Elenchi strutturati Un elenco strutturato è costituito dalla combinazione di più elenchi nidificati. Con il seguente esempio costruiamo un elenco a tre livelli <OL> <LI>Italia del Sud <OL TYPE="I"> <LI>Abruzzo <OL TYPE="a"> <LI>L'Aquila <LI>Chieti <LI>Pescara <LI>Teramo </OL> <LI>Campania <OL TYPE="a"> <LI>Napoli <LI>Caserta <LI>Benevento 8

9 <LI>Avellino <LI>Salerno </OL> <LI>Calabria <OL TYPE="a"> <LI>Catanzaro <LI>Cosenza <LI>Crotone </OL> </OL> <LI>Italia Centrale <OL TYPE="I"> <LI>Lazio <OL TYPE="a"> <LI>Latina <LI>Rieti <LI>Roma </OL> <LI>Umbria <OL TYPE="a"> <LI>Terni <LI>Perugia </OL> </OL> <LI>Italia del Nord <OL TYPE="I"> <LI>Lombardia <OL TYPE="a"> <LI>Milano <LI>Lecco <LI>Lodi </OL> <LI>Piemonte <OL TYPE="a"> <LI>Torino <LI>Alessandria </OL> </OL> Abbiamo il livello più esterno costituito dalle tre zone d Italia di tipo numerico. Per ogni zona abbiamo un sottoelenco che utilizza i numeri romani per le regioni e all interno di 9

10 ogni regione, utilizzando le lettere minuscole elenchiamo le province. Il risultato è il seguente L unica accortezza è di chiudere un elenco prima di aprirne un altro dello stesso livello <OL> apro elenco più esterno <LI>Italia del Sud <OL TYPE="I"> apro l elenco per l Italia del sud <LI>Abruzzo <OL TYPE="a"> apro l elenco per Abruzzo <LI>L'Aquila <LI>Chieti <LI>Pescara <LI>Teramo </OL> chiudo l elenco per l Abruzzo <LI>Campania apro l elenco per la Campania <OL TYPE="a"> <LI>Napoli <LI>Caserta 10

11 <LI>Benevento <LI>Avellino <LI>Salerno </OL> chiudo l elenco per la Campania <LI>Calabria <OL TYPE="a"> <LI>Catanzaro <LI>Cosenza <LI>Crotone </OL> </OL> chiudo l elenco per l Italia del sud <LI>Italia Centrale <OL TYPE="I"> apro l elenco per l Italia centrale <LI>Lazio <OL TYPE="a"> <LI>Latina <LI>Rieti <LI>Roma </OL> <LI>Umbria <OL TYPE="a"> <LI>Terni <LI>Perugia </OL> </OL> <LI>Italia del Nord <OL TYPE="I"> <LI>Lombardia <OL TYPE="a"> <LI>Milano <LI>Lecco <LI>Lodi </OL> <LI>Piemonte <OL TYPE="a"> <LI>Torino <LI>Alessandria </OL> </OL> chiudo elenco più esterno 11

12 Tabelle Definire una tabella Per disegnare una tabella all interno di una pagina web occorre il tag TABLE che indica l inizio e la fine della tabella, il tag TR (Table row) che indica l inizio e la fine di una riga della tabella e il tag TD table data che indica la singola cella della tabella. Se vogliamo dare evidenza al contenuto di una singola cella utilizzeremo al posto del tag TD il tag TH (table header) Supponiamo di voler creare la seguente tabella Lunedì Martedì Venerdì Sabato Il codice dovrà allora essere <TABLE> <TD>Lunedì</TD> <TD> </TD> <TD>Martedì</TD> <TD>Venerdì</TD> <TD>Sabato</TD> <TD> </TD> con il seguente risultato 12

13 Se vogliamo porre in evidenza i nomi dei giorni utilizziamo il tag TH per le sole celle che contengono i nomi dei giorni <TABLE> <TH>Lunedì</TH> <TD> </TD> <TH>Martedì</TH> <TH>Venerdì</TH> <TH>Sabato</TH> <TD> </TD> 13

14 Il tag TABLE presenta l attributo ALIGN che consente di decidere come allineare la tabella all interno della pagina: - tabella centrata <TABLE ALIGN="center"> <TH>Lunedì</TH> <TD> </TD> <TH>Martedì</TH> <TH>Venerdì</TH> <TH>Sabato</TH> <TD> </TD> - tabella allineata a sinistra <TABLE ALIGN="left"> <TH>Lunedì</TH> <TD> </TD> <TH>Martedì</TH> 14

15 <TH>Venerdì</TH> <TH>Sabato</TH> <TD> </TD> - tabella allineata a destra <TABLE ALIGN="right"> <TH>Lunedì</TH> <TD> </TD> <TH>Martedì</TH> <TH>Venerdì</TH> <TH>Sabato</TH> <TD> </TD> 15

16 Titolo di una tabella Per inserire in una tabella una riga contenente il titolo della tabella si deve utilizzare il tag CAPTION. Ad esempio <TABLE ALIGN="center"> <CAPTION> Orario dell'ambulatorio <TH>Lunedì</TH> <TD> </TD> <TH>Martedì</TH> <TH>Venerdì</TH> <TH>Sabato</TH> <TD> </TD> 16

17 Il tag CAPTION può avere l attributo ALIGN che può assumere il valore left <TABLE ALIGN="center"> <CAPTION ALIGN="left"> Orario dell'ambulatorio <TH>Lunedì</TH> <TD> </TD> <TH>Martedì</TH> <TH>Venerdì</TH> <TH>Sabato</TH> <TD> </TD> 17

18 oppure center <TABLE ALIGN="center"> <CAPTION ALIGN="center"> Orario dell'ambulatorio <TH>Lunedì</TH> <TD> </TD> <TH>Martedì</TH> <TH>Venerdì</TH> <TH>Sabato</TH> <TD> </TD> 18

19 o ancora right <TABLE ALIGN="center"> <CAPTION ALIGN="right"> Orario dell'ambulatorio <TH>Lunedì</TH> <TD> </TD> <TH>Martedì</TH> <TH>Venerdì</TH> <TH>Sabato</TH> <TD> </TD> Infine la caption può apparire alla base della tabella dando all attributo ALIGN il valore BOTTOM <TABLE ALIGN="center"> <CAPTION ALIGN="BOTTOM"> Orario dell'ambulatorio <TH>Lunedì</TH> 19

20 <TD> </TD> <TH>Martedì</TH> <TH>Venerdì</TH> <TH>Sabato</TH> <TD> </TD> Bordi Per impostare il bordo delle tabelle si può utilizzare l attributo BORDER del tag TABLE. Dando un valore 0 all attributo il bordo non appare e ciò costituisce il valore di default. Più ampio è il valore attribuito all attributo e maggiore è lo spessore del bordo esterno della tabella. Ad esempio <TABLE ALIGN="center" BORDER="0"> <CAPTION ALIGN="BOTTOM"> Orario dell'ambulatorio <TH>Lunedì</TH> <TD> </TD> <TH>Martedì</TH> 20

21 <TH>Venerdì</TH> <TH>Sabato</TH> <TD> </TD> <BR> <TABLE ALIGN="center" BORDER="1"> <CAPTION ALIGN="BOTTOM"> Orario dell'ambulatorio <TH>Lunedì</TH> <TD> </TD> <TH>Martedì</TH> <TH>Venerdì</TH> <TH>Sabato</TH> <TD> </TD> <BR> <TABLE ALIGN="center" BORDER="4"> <CAPTION ALIGN="BOTTOM"> Orario dell'ambulatorio <TH>Lunedì</TH> <TD> </TD> 21

22 <TH>Martedì</TH> <TH>Venerdì</TH> <TH>Sabato</TH> <TD> </TD> <BR> <TABLE ALIGN="center" BORDER="8"> <CAPTION ALIGN="BOTTOM"> Orario dell'ambulatorio <TH>Lunedì</TH> <TD> </TD> <TH>Martedì</TH> <TH>Venerdì</TH> <TH>Sabato</TH> <TD> </TD> 22

23 Possiamo attribuire anche un colore ai bordi delle tabelle utilizzando l attributo BORDERCOLOR. Ad esempio <TABLE ALIGN="center" BORDER="8" BORDERCOLOR="red"> <CAPTION ALIGN="BOTTOM"> Orario dell'ambulatorio <TH>Lunedì</TH> <TD> </TD> <TH>Martedì</TH> <TH>Venerdì</TH> 23

24 <TH>Sabato</TH> <TD> </TD> Per dare un effetto ridimensionale al bordo si possono utilizzare gli attributi BORDERCOLORDARK che attribuisce il colore alla parte inferiore e destra del bordo e BORDERCOLORLIGHT che attribuisce il colore alla parte superiore sinistra del bordo. Ad esempio <TABLE ALIGN="center" BORDER="8" BORDERCOLORDARK="black" BORDERCOLORLIGHT="grey"> <CAPTION ALIGN="BOTTOM"> Orario dell'ambulatorio <TH>Lunedì</TH> <TD> </TD> <TH>Martedì</TH> <TH>Venerdì</TH> <TH>Sabato</TH> <TD> </TD> 24

25 Dimensioni della tabella Di default una tabella non ha dimensioni fisse ma si adatta alle dimensioni del suo contenuto. Se la finestra del browser si riduce il contenuto della tabella viene riorganizzato per adattare le dimensioni della tabella a quelle della finestra del browser 25

26 Se invece si vuole attribuire delle dimensioni fisse alla tabella si devono utilizzare gli attributi WIDTH (larghezza) e HEIGHT (altezza) alla tabella. Dando un valore numerico ai due attributi questo viene interpretato come una dimensione in pixel che risulta fissa indipendentemente dalle dimensioni della finestra del browser e dalla risoluzione del monitor. Ad esempio <TABLE ALIGN="center" BORDER="8" WIDTH="300" HEIGHT="300"> <CAPTION ALIGN="BOTTOM"> Orario dell'ambulatorio <TH>Lunedì</TH> <TD> </TD> <TH>Martedì</TH> <TH>Venerdì</TH> 26

27 <TH>Sabato</TH> <TD> </TD> Alternativamente si può dare ai due attributi un valore in percentuale rispetto alle dimensioni della finestra del browser. In tal caso la tabella cercherà di adattarsi alle dimensioni della finestra. Ad esempio <TABLE ALIGN="center" BORDER="8" WIDTH="80%" HEIGHT="100%"> <CAPTION ALIGN="BOTTOM"> Orario dell'ambulatorio <TH>Lunedì</TH> <TD> </TD> 27

28 <TH>Martedì</TH> <TH>Venerdì</TH> <TH>Sabato</TH> <TD> </TD> Spaziatura Tramite l attributo CELLSPACING possiamo determinare la spaziatura esistente fra le singole celle della tabella. Ad esempio <TABLE ALIGN="center" BORDER="8" CELLSPACING="70"> 28

29 <CAPTION ALIGN="BOTTOM"> Orario dell'ambulatorio <TH>Lunedì</TH> <TD> </TD> <TH>Martedì</TH> <TH>Venerdì</TH> <TH>Sabato</TH> <TD> </TD> 29

30 Con l attributo CELLPADDING decidiamo invece la distanza fra il contenuto ed i bordi della cella. Ad esempio <TABLE ALIGN="center" BORDER="8" CELLPADDING="70"> <CAPTION ALIGN="BOTTOM"> Orario dell'ambulatorio <TH>Lunedì</TH> <TD> </TD> <TH>Martedì</TH> <TH>Venerdì</TH> <TH>Sabato</TH> <TD> </TD> 30

31 I colori Si può modificare il colore di sfondo di una tabella utilizzando l attributo BGCOLOR del tag TABLE. Ad esempio <TABLE ALIGN="center" BORDER="8" CELLPADDING="70" BGCOLOR="green"> <CAPTION ALIGN="BOTTOM"> Orario dell'ambulatorio <TH>Lunedì</TH> <TD> </TD> <TH>Martedì</TH> <TH>Venerdì</TH> 31

32 <TH>Sabato</TH> <TD> </TD> Si può anche utilizzare come sfondo di una tabella un immagine usando l attributo BACKGROUND. Ad esempio <TABLE ALIGN="center" BORDER="8" CELLPADDING="70" BACKGROUND="esempio1/body.jpg"> <CAPTION ALIGN="BOTTOM"> Orario dell'ambulatorio <TH>Lunedì</TH> <TD> </TD> <TH>Martedì</TH> 32

33 <TH>Venerdì</TH> <TH>Sabato</TH> <TD> </TD> Si può modificare anche il colore di sfondo di singole celle utilizzando BGCOLOR come attributo non del tag TABLE ma del tag relativo alla singola cella (TH o TD). Ad esempio <TABLE ALIGN="center" BORDER="8" CELLPADDING="70" > <CAPTION ALIGN="BOTTOM"> Orario dell'ambulatorio <TH BGCOLOR="yellow">Lunedì</TH> 33

34 <TD> </TD> <TH BGCOLOR="yellow">Martedì</TH> <TH BGCOLOR="yellow">Venerdì</TH> <TH BGCOLOR="yellow">Sabato</TH> <TD> </TD> In maniera analoga si può fare con BACKGROUND. Ad esempio <TABLE ALIGN="center" BORDER="8" CELLPADDING="70" > <CAPTION ALIGN="BOTTOM"> Orario dell'ambulatorio 34

35 <TH BACKGROUND="esempio1/body.jpg">Lunedì</TH> <TD> </TD> <TH BACKGROUND="esempio1/body.jpg">Martedì</TH> <TH BACKGROUND="esempio1/body.jpg">Venerdì</TH> <TH BACKGROUND="esempio1/body.jpg">Sabato</TH> <TD> </TD> 35

36 Allineamenti Per determinare l allineamento del testo all interno delle celle di una tabella bisogna utilizzare l attributo ALIGN per il tag TD. A tale attributo si possono assegnare gli orientamenti sinistro (left) <TABLE ALIGN="center" BORDER="8" WIDTH="500" height="500"> <CAPTION ALIGN="BOTTOM"> Orario dell'ambulatorio <TH BACKGROUND="esempio1/body.jpg" ALIGN="left">Lunedì</TH> <TD> </TD> <TH BACKGROUND="esempio1/body.jpg" ALIGN="left">Martedì</TH> <TH BACKGROUND="esempio1/body.jpg" ALIGN="left">Venerdì</TH> <TH BACKGROUND="esempio1/body.jpg" ALIGN="left">Sabato</TH> <TD> </TD> oppure centrale (center) <TABLE ALIGN="center" BORDER="8" WIDTH="500" height="500"> 36

37 <CAPTION ALIGN="BOTTOM"> Orario dell'ambulatorio <TH BACKGROUND="esempio1/body.jpg" ALIGN="center">Lunedì</TH> <TD> </TD> <TH BACKGROUND="esempio1/body.jpg" ALIGN="center">Martedì</TH> <TH BACKGROUND="esempio1/body.jpg" ALIGN="center">Venerdì</TH> <TH BACKGROUND="esempio1/body.jpg" ALIGN="center">Sabato</TH> <TD> </TD> 37

38 o destro (right) <TABLE ALIGN="right" BORDER="8" WIDTH="500" height="500"> <CAPTION ALIGN="BOTTOM"> Orario dell'ambulatorio <TH BACKGROUND="esempio1/body.jpg" ALIGN="right">Lunedì</TH> <TD> </TD> <TH BACKGROUND="esempio1/body.jpg" ALIGN="right">Martedì</TH> <TH BACKGROUND="esempio1/body.jpg" ALIGN="right">Venerdì</TH> <TH BACKGROUND="esempio1/body.jpg" ALIGN="right">Sabato</TH> <TD> </TD> Con tale attributo vi è anche la possibilità di decidere l allineamento verticale del testo usando l attributo VALIGN, scegliendo fra la posizione in alto (top) <TABLE ALIGN="center" BORDER="8" WIDTH="500" height="500"> <CAPTION ALIGN="BOTTOM"> Orario dell'ambulatorio <TH BACKGROUND="esempio1/body.jpg" VALIGN="top">Lunedì</TH> 38

39 <TD> </TD> <TH BACKGROUND="esempio1/body.jpg" VALIGN="top">Martedì</TH> <TH BACKGROUND="esempio1/body.jpg" VALIGN="top">Venerdì</TH> <TH BACKGROUND="esempio1/body.jpg" VALIGN="top">Sabato</TH> <TD> </TD> oppure centrale (middle) <TABLE ALIGN="center" BORDER="8" WIDTH="500" height="500"> <CAPTION ALIGN="BOTTOM"> Orario dell'ambulatorio 39

40 <TH BACKGROUND="esempio1/body.jpg" VALIGN="middle">Lunedì</TH> <TD> </TD> <TH BACKGROUND="esempio1/body.jpg" VALIGN="middle">Martedì</TH> <TH BACKGROUND="esempio1/body.jpg" VALIGN="middle">Venerdì</TH> <TH BACKGROUND="esempio1/body.jpg" VALIGN="middle">Sabato</TH> <TD> </TD> o infine in basso (bottom) 40

41 Unione di celle A volte si ha la necessità di unire alcune celle. Nel seguente esempio Nella prima riga la prima cella deve occupare la stessa lunghezza delle prime due celle della riga successiva. Ciò si può ottenere con l attributo COLSPAN al quale attribuiamo un numero pari al numero di celle che vogliamo unire. Per realizzare il nostro esempio dobbiamo utilizzare il seguente codice <TABLE ALIGN="center" BORDER="8" > <CAPTION ALIGN="top"> Elenco della classe <TD COLSPAN="2">Alunno</TD> <TD>Indirizzo</TD> <TD>Cognome</TD> <TD>Nome</TD> In maniera analoga vi può essere la necessità di unire più celle in verticale. In tal caso si utilizza l attributo ROWSPAN. Al quale va assegnato il numero di celle da unire in verticale. Ad esempio <TABLE ALIGN="center" BORDER="8" > <CAPTION ALIGN="top"> Elenco della classe <TD COLSPAN="2">Alunno</TD> 41

42 <TD ROWSPAN="2">Indirizzo</TD> <TD>Cognome</TD> <TD>Nome</TD> Attributo summary Mediante l attributo summary possiamo inserire un sommario in una tabella. Il sommario non è visualizzato in un browser visuale. Esso verrà letto da screen readers e browser non visuali come quelli utilizzati da non vedenti. Esempio <TABLE ALIGN="center" BORDER="8" SUMMARY="elenco completo di indrizzi"> <CAPTION ALIGN="top"> Elenco della classe <TD COLSPAN="2">Alunno</TD> <TD ROWSPAN="2">Indirizzo</TD> <TD>Cognome</TD> <TD>Nome</TD> 42

43 Attributo Frame Tramite tale attributo del tag TABLE si può decidere se far comparire tutto il bordo della tabella o solo una sua parte. Per utilizzarlo deve essere esplicitamente impostato l attributo BORDER. Se gli assegniamo il valore above viene visualizzato solo il bordo superiore <TABLE ALIGN="center" BORDER="8" FRAME="above"> <CAPTION ALIGN="top"> Elenco della classe <TD COLSPAN="2">Alunno</TD> <TD ROWSPAN="2">Indirizzo</TD> <TD>Cognome</TD> <TD>Nome</TD> 43

44 Con il valore below viene visualizzato solo il bordo inferiore <TABLE ALIGN="center" BORDER="8" FRAME="below"> <CAPTION ALIGN="top"> Elenco della classe <TD COLSPAN="2">Alunno</TD> <TD ROWSPAN="2">Indirizzo</TD> <TD>Cognome</TD> <TD>Nome</TD> Con il valore hsides vengono mostrati il bordo superiore e quello inferiore. <TABLE ALIGN="center" BORDER="8" FRAME="hsides"> <CAPTION ALIGN="top"> Elenco della classe <TD COLSPAN="2">Alunno</TD> <TD ROWSPAN="2">Indirizzo</TD> <TD>Cognome</TD> <TD>Nome</TD> 44

45 Con il valore lhs viene mostrato solo il bordo sinistro <TABLE ALIGN="center" BORDER="8" FRAME="lhs"> <CAPTION ALIGN="top"> Elenco della classe <TD COLSPAN="2">Alunno</TD> <TD ROWSPAN="2">Indirizzo</TD> <TD>Cognome</TD> <TD>Nome</TD> 45

46 Con rhs viene mostrato solo il bordo destro <TABLE ALIGN="center" BORDER="8" FRAME="rhs"> <CAPTION ALIGN="top"> Elenco della classe <TD COLSPAN="2">Alunno</TD> <TD ROWSPAN="2">Indirizzo</TD> <TD>Cognome</TD> <TD>Nome</TD> 46

47 Con vsides vengono mostrati entrambi i bordi verticali <TABLE ALIGN="center" BORDER="8" FRAME="vsides"> <CAPTION ALIGN="top"> Elenco della classe <TD COLSPAN="2">Alunno</TD> <TD ROWSPAN="2">Indirizzo</TD> <TD>Cognome</TD> <TD>Nome</TD> 47

48 I bordi interni possono essere controllati mediante l attributo RULES Con il valore none rimuove tutti i bordi interni <TABLE ALIGN="center" BORDER="8" RULES="none"> <CAPTION ALIGN="top"> Elenco della classe <TD COLSPAN="2">Alunno</TD> <TD ROWSPAN="2">Indirizzo</TD> <TD>Cognome</TD> <TD>Nome</TD> 48

49 Con rows si visualizzano i bordi fra le righe <TABLE ALIGN="center" BORDER="8" RULES="rows"> <CAPTION ALIGN="top"> Elenco della classe <TD COLSPAN="2">Alunno</TD> <TD ROWSPAN="2">Indirizzo</TD> <TD>Cognome</TD> <TD>Nome</TD> 49

50 Con cols vengono visualizzati i bordi fra colonne <TABLE ALIGN="center" BORDER="8" RULES="cols"> <CAPTION ALIGN="top"> Elenco della classe <TD COLSPAN="2">Alunno</TD> <TD ROWSPAN="2">Indirizzo</TD> <TD>Cognome</TD> <TD>Nome</TD> 50

51 THEAD, TFOOT e TBODY In tabelle complesse può risultare utile suddividere le tabelle in gruppi di righe suddivise fra intestazione, corpo e piede della tabella come mostrato dalla figura seguente 51

52 Esempio <table width="75%" border="1"> <caption><div align="center"><b>fatturato dell'azienda XYZ</b></div></caption> <thead> <tr> <th width="20%">mesi di attività</th> <th width="40%">fatturato da attività 1 (in euro)</th> <th width="40%">fatturato da attività 2 (in euro)</th> </tr> </thead> <tfoot> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td ><b>totale</b></td> <td > </td> <td >45.000</td> </tr> </tfoot> <tbody> 52

53 <tr> <td >gen</td> <td >10.000</td> <td >1.000</td> </tr> <tr> <td >feb</td> <td >20.000</td> <td >2.000</td> </tr> <tr> <td >mar</td> <td >30.000</td> <td >3.000</td> </tr> <tr> <td >apr</td> <td >40.000</td> <td >4.000</td> </tr> <tr> <td >ago</td> <td >50.000</td> <td >5.000</td> </tr> <tr> <td >sett</td> <td >60.000</td> <td >6.000</td> </tr> <tr> <td height="24">ott</td> <td >70.000</td> <td >7.000</td> </tr> <tr> <td >nov</td> <td >80.000</td> <td >8.000</td> </tr> <tr> <td height="24" >dic</td> <td >90.000</td> 53

54 <td >9.000</td> </tr> </tbody> </table> Questi tag non hanno effetto sulla visualizzazione. Ciò nonostante tramite l attributo RULES a cui si applica il valore groups si può fare in modo da visualizzare i bordi interni soltanto in corrispondenza delle sezioni head, body e foot <table width="75%" border="1" RULES="basic"> <caption><div align="center"><b>fatturato dell'azienda XYZ</b></div></caption> <thead> <tr> <th width="20%">mesi di attività</th> <th width="40%">fatturato da attività 1 (in euro)</th> <th width="40%">fatturato da attività 2 (in euro)</th> 54

55 </tr> </thead> <tfoot> <tr> </tr> <td> </td> <td> </td> <td> </td> <tr> </tr> </tfoot> <td ><b>totale</b></td> <td > </td> <td >45.000</td> <tbody> <tr> </tr> <td >gen</td> <td >10.000</td> <td >1.000</td> <tr> </tr> <td >feb</td> <td >20.000</td> <td >2.000</td> <tr> </tr> <td >mar</td> <td >30.000</td> <td >3.000</td> <tr> </tr> <td >apr</td> <td >40.000</td> <td >4.000</td> 55

56 <tr> </tr> <td >ago</td> <td >50.000</td> <td >5.000</td> <tr> </tr> <td >sett</td> <td >60.000</td> <td >6.000</td> <tr> </tr> <td height="24">ott</td> <td >70.000</td> <td >7.000</td> <tr> </tr> <td >nov</td> <td >80.000</td> <td >8.000</td> <tr> </tr> </tbody> </table> <td height="24" >dic</td> <td >90.000</td> <td >9.000</td> 56

57 Elenchi con simboli speciali Con una tabella si possono anche realizzare elenchi con simboli speciali. Ad esempio <TABLE> <TD><IMG SRC="ESEMPIO1/IMMAGINE001.GIF"></TD> <TD>Elettronica</TD> <TD><IMG SRC="ESEMPIO1/IMMAGINE001.GIF"></TD> <TD>Informatica</TD> <TD><IMG SRC="ESEMPIO1/IMMAGINE001.GIF"></TD> <TD>Sistemi</TD> <TD><IMG SRC="ESEMPIO1/IMMAGINE001.GIF"></TD> <TD>Calcolo</TD> 57

58 Tabelle e layout della pagina L uso ormai principale delle tabelle è quello per fissare l organizzazione o layout di una pagina web. La tabella è invisibile e serve per posizionare in maniera efficace oggetti, immagini, pulsanti ecc. nelle posizioni volute. Vediamo come esempio la pagina iniziale di wikipedia 58

59 59