HTML 5 Le tabelle 1
Tabelle Tag fondamentali Costruzione di tabelle riga per riga Esempi Tecnologie di Sviluppo per il WEB 2
Il tag <TABLE> Una tabella è suddivisa in righe e ciascuna riga è suddivisa in celle. Una tabella deve essere racchiusa tra i tag <TABLE> </TABLE> Ogni riga di una tabella deve essere racchiusa tra i tag <TR> </TR> Ogni cella di una tabella deve essere racchiusa tra i tag <TD> </TD> Tecnologie di Sviluppo per il WEB 3
Titolo di una tabella Si usa il tag <CAPTION> (all interno del tag <TABLE>) Valori attributo ALIGN (deprecato): TOP: titolo prima della tabella (default) BOTTOM: titolo alla fine della tabella LEFT/RIGHT Si possono usare tutti i tipi di tag di markup text-level all interno di <CAPTION> Tecnologie di Sviluppo per il WEB 4
Attributo BORDER di TABLE Il bordo di una tabella è creato utilizzando l attributo BORDER <TABLE BORDER=1> <TR> <TD> cella </TD> </TR> </TABLE> Tecnologie di Sviluppo per il WEB 5
Attributo FRAME di TABLE Specifica quali lati della cornice circostante la tabella saranno visibili. Valori possibili: void: Nessun lato visibile above: Lato superiore visibile below: Lato inferiore visibile hsides: Lato destro e sinistro visibili vsides: Lato superiore ed inferiore visibili lhs: Lato sinistro visibile rhs: Lato destro visibile box, border: Tutti i lati visibili Tecnologie di Sviluppo per il WEB 6
Attributo RULES di TABLE Questo attributo specifica quali filetti 1 appariranno tra le celle in una tabella. Il modo in cui i filetti appaiono dipende dal browser. Possibili valori: none: Nessun filetto. groups: i filetti appariranno solo tra gruppi di righe (THEAD, TFOOT, e TBODY) e gruppi di colonne (COLGROUP e COL) rows: i filetti appariranno solo tra le righe cols: i filetti appariranno solo tra le colonne all: i filetti appariranno tra righe e colonne 1 filetto: sinonimo di linea Tecnologie di Sviluppo per il WEB 7
Relazione tra BORDER, FRAME e RULES Il valore border="0" implica frame="void e, fin quando non specificato diversamente, rules="none" Altri valori di border implicano frame="border/box" e, fin quando non specificato diversamente, rules="all" esempio chrome vs. firefox Tecnologie di Sviluppo per il WEB 8
Il tag <TH> Serve per definire l intestazione di una colonna. Il testo nella cella è centrato e in grassetto. Tecnologie di Sviluppo per il WEB 9
Codice della tabella precedente <HTML> <BODY> <HEAD> <TITLE> Esempio di tabella </TITLE></HEAD> <TABLE BORDER> <CAPTION ALIGN=BOTTOM> Una semplice tabella </CAPTION> <TR> <TH> Heading 1 </TH> <TH> Heading 2 </TH> <TH> Heading 3 </TH> </TR> <TR> <TD> item 1 </TD> <TD> item 2 </TD> <TD> item 3 </TD> </TR> <TR> <TD> item 4 </TD> <TD> item 5 </TD> <TD> item 6 </TD> </TR> <TR> <TD> item 7 </TD> <TD> item 8 </TD> <TD> item 9 </TD> </TR> </TABLE> </BODY> </HTML> Tecnologie di Sviluppo per il WEB 10
Cosa succede con celle vuote? <HTML> <BODY> <HEAD> <TITLE> Tabella Con Vuoti </TITLE></HEAD> <TABLE BORDER> <TR> <TD> item 1 </TD> <TD> item 2 </TD> <TD> item 3 </TD> </TR> <TR> <TD> item 4 </TD> <TD> </TR> <TD> <TR> <TD> item 7 </TD> <TD> item 8 </TD> </TR> </TABLE> </BODY> </HTML> Soluzione Tecnologie di Sviluppo per il WEB 11
Attributi di <TABLE> ALIGN: specifica l allineamento della tabella rispetto alla finestra (deprecato) LEFT, RIGHT, CENTER WIDTH: specifica la larghezza WIDTH= 140 (pixel) WIDTH= 40% (percentuale) HEIGHT: specifica l altezza espressa in pixel o in percentuale Estensione allo standard di IE e N Tecnologie di Sviluppo per il WEB 12
Esempio <TABLE BORDER=3 WIDTH=100%> <TR> <TD>Anna, Giulia, Carla</TD> </TR> </TABLE> Tecnologie di Sviluppo per il WEB 13
Esempio <TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=20%> Anna</TD> <TD WIDTH=80%> Giulia</TD> </TR> </TABLE> Tecnologie di Sviluppo per il WEB 14
Esempio Il valore dell attributo WIDHT viene esteso anche alle righe successive Tecnologie di Sviluppo per il WEB 15
Attributi di <TABLE> CELLPADDING= numero Stabilisce lo spazio tra il contenuto della cella ed i suoi bordi CELLPADDING= 10 CELLSPACING= numero Stabilisce lo spazio tra i bordi delle celle CELLSPACING= 5 Tecnologie di Sviluppo per il WEB 16
CELLPADDING e CELLSPACING Questi due attributi controllano lo spazio tra ed all interno delle celle. Tecnologie di Sviluppo per il WEB 17
Esempio di CELLPADDING <TABLE BORDER=3 CELLPADDING=12> <TR> <TD >Anna</TD> <TD> Giulia</TD> <TD >Carla</TD> </TR> <TR> <TD>Roberto</TD> <TD>Antonio</TD> <TD>Marcello</TD> </TR> </TABLE> Tecnologie di Sviluppo per il WEB 18
Esempio di CELLSPACING <TABLE BORDER=3 CELLSPACING=12> <TR> <TD >Anna</TD> <TD> Giulia</TD> <TD >Carla</TD> </TR> <TR> <TD>Roberto</TD> <TD>Antonio</TD> <TD>Marcello</TD> </TR> </TABLE> Tecnologie di Sviluppo per il WEB 19
Combinazione degli attributi <TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12> <TR> <TD >Anna</TD> <TD> Giulia</TD> <TD >Carla</TD> </TR> <TR> <TD>Roberto</TD> <TD>Antonio</TD> <TD>Marcello</TD> </TR> </TABLE> Tecnologie di Sviluppo per il WEB 20
Tabelle a colori: attributi BGCOLOR="#rrggbb" Definisce il colore di sfondo di tutta la tabella Tecnologie di Sviluppo per il WEB 21
Esempio <TABLE BORDER=3 BGCOLOR= #FFCC66 > <TR> <TD >Anna</TD> <TD> Giulia</TD> <TD >Carla</TD> </TR> <TR> <TD>Roberto</TD> <TD>Antonio</TD> <TD>Marcello</TD> </TR> </TABLE> Tecnologie di Sviluppo per il WEB 22
Priorità di attributi Il valore di un attributo di una riga <TR ALIGN= LEFT > copre quello di tabella <TABLE ALIGN= RIGHT > Il valore di un attributo di una cella <TD ALIGN= CENTER > copre quello di riga <TR ALIGN= LEFT > Come è normale che sia...i più interni oscurano i più esterni Tecnologie di Sviluppo per il WEB 23
Tabelle a vari colori <TABLE BORDER=3 BGCOLOR= #FF6633 > <TR BGCOLOR= #009900 > <TD BGCOLOR= #9999FF >Anna</TD> <TD> Giulia</TD> <TD >Carla</TD> </TR> <TR> <TD>Roberto</TD> <TD>Antonio</TD> <TD>Marcello</TD> </TR> </TABLE> indovinate i colori... Tecnologie di Sviluppo per il WEB 24
Attributi di <TR> e <TD> ALIGN= tipo Allineamento orizzontale di una cella LEFT (default), RIGHT, CENTER, JUSTIFY. VALIGN= tipo Allineamento verticale di una cella MIDDLE (default), TOP, BOTTOM, BASELINE (allineata alla base della prima linea) BGCOLOR= #rrggbb Colore di sfondo Tecnologie di Sviluppo per il WEB 25
Attributo NOWRAP Quando è presente, questo attributo booleano indica al browser di disabilitare il wrapping automatico per la cella in esame. L attributo è deprecato. Dovrebbero essere usati i fogli di stile per disabilitare il wrapping automatico Nota: se è usato senza molta cura, questo attributo può generare celle eccessivamente ampie Tecnologie di Sviluppo per il WEB 26
Altri attributi di <TH> e <TD> WIDTH = valore Specifica l ampiezza di una cella Valore espresso in pixel o percentuale HEIGHT = valore Specifica l altezza di una cella Valore espresso in pixel o percentuale NOTA: px è una misura relativa (legata alla risoluzione dello schermo) pt è una misura assoluta: 72 pt = 1 inch = 2,54 cm Tecnologie di Sviluppo per il WEB 27
COLSPAN e ROWSPAN: attributi di <td> COLSPAN=numero Controlla il numero di colonne su cui una cella si può estendere. È possibile creare delle celle larghe 2 o più colonne ROWSPAN=numero Definisce il numero di righe su cui incide la casella. Tecnologie di Sviluppo per il WEB 28
Esempio di COLSPAN <TABLE BORDER=3> <TR> <TD COLSPAN=2> Anna</TD> <TD>Giulia</TD> </TR> <TR> <TD>Roberto</TD> <TD>Antonio</TD> <TD>Marcello</TD> </TR> </TABLE> Tecnologie di Sviluppo per il WEB 29
Esempio di ROWSPAN <TABLE BORDER=3> <TR> <TD ROWSPAN=2>Anna</TD> <TD>Giulia</TD> <TD>Carla</TD> </TR> <TR> <TD>Antonio</TD> <TD>Marcello</TD> </TR> </TABLE> Tecnologie di Sviluppo per il WEB 30
Come creare tabelle con celle unite Per creare il layout di una tabella in cui vi sono celle che si estendono per più righe o colonne, si possono seguire i seguenti passi: Disegnare una bozza della tabella finale Disegnare la struttura a celle (quante righe e colonne occupa la tabella) Confrontare i due disegni per capire quali celle unire Se ci sono celle da unire su una riga (colonne), unirle con una freccia che parte dalla prima cella e prosegue verso destra (il basso) Adesso si può iniziare a creare la tabella Tecnologie di Sviluppo per il WEB 31
Esempio tabella finale struttura a celle Tecnologie di Sviluppo per il WEB 32
Regole per TD Regola 1 Ogni riga conterrà un TD per ogni cella vuota e per ogni cella che contiene l inizio di una freccia Regola 2 Se un TD contiene l inizio di una freccia verso destra (il basso), allora l attributo COLSPAN (ROWSPAN) assumerà un valore pari al numero di celle, o il numero di colonne (righe) che la freccia attraversa Tecnologie di Sviluppo per il WEB 33
Esempio 2 TD 3 TD 2 TD COLSPAN=2 per il secondo TD ROWSPAN=2 per il secondo TD Tecnologie di Sviluppo per il WEB 34
Codice e risultato <TR ALIGN=CENTER> <TD> 1</TD> <TD COLSPAN=2> 2</TD> </TR> <TR ALIGN=CENTER> <TD ROWSPAN=2> 3</TD> <TD> 4</TD> <TD> 5</TD> </TR> <TR ALIGN=CENTER> <TD> 6</TD> <TD> 7</TD> </TR> Tecnologie di Sviluppo per il WEB 35
Errori Se si commettono errori sovrapponendo più celle, il comportamento dei browser non è sempre lo stesso. Esercizio: 1 2 3 4 5 soluzione 6 7 8 Tecnologie di Sviluppo per il WEB 36
Raggruppamento di righe Possiamo raggruppare le righe di una tabella in THEAD Intestazione della tabella TFOOT Piè pagina della tabella TBODY Una o più sezioni intermedie Questa divisione permette(rebbe) al browser di supportare lo scrolling delle sezioni intermedie indipendentemente da intestazione e piè pagina della tabella (non supportato) Quando tabelle molto lunghe vengono stampate, le informazioni nell head e nel foot possono essere ripetute su ogni pagina che contiene i dati della tabella (parzialmente supportato solo da Netscape) Da non confondere con <TH> che rende in boldface l'intestazione di una colonna Tecnologie di Sviluppo per il WEB 37
Esempio <TABLE BORDER=1 CELLPADDING=4 RULES="GROUPS"> <THEAD> <TR><TH COLSPAN=2>Table Head</TR> (grassetto) <TFOOT ALIGN="CENTER"> <TR><TD COLSPAN=2>Footer (non in grassetto) <TBODY> <TR><TD>Gruppo 1<TD>Gruppo 1 <TR><TD>Gruppo 1<TD>Gruppo 1 <TBODY> <TR><TD ROWSPAN=2>Gruppo 2<TD>Gruppo 2 <TR><TD>Gruppo 2 <TBODY> <TR><TD COLSPAN=2 ALIGN=CENTER>Gruppo 3 <TR><TD>Gruppo 3<TD>Gruppo 3 </TABLE> Tecnologie di Sviluppo per il WEB 38
Risultato Tecnologie di Sviluppo per il WEB 39
Raggruppamento di colonne COLGROUP Crea esplicitamente un gruppo di colonne in una tabella Attributi principali SPAN indica il numero di colonne comprese in un COLGROUP WIDTH indica l ampiezza di una singola colonna del COLGROUP ALIGN allineamento del contenuto delle colonne VALIGN allineamento verticale del contenuto delle colonne Non più supportati dai browser HTML5 compliant... Tecnologie di Sviluppo per il WEB 40
Raggruppamento di colonne COL Rappresenta una o più colonne in un gruppo Serve a controllare l aspetto di ogni singola colonna in un gruppo Attributi principali SPAN indica quante colonne successive sono controllate da COL WIDTH, ALIGN, VALIGN Non più supportati dai browser HTML5 compliant... Tecnologie di Sviluppo per il WEB 41
Esempio <TABLE CELLPADDING=3 RULES="GROUPS"> <COLGROUP> <COL ALIGN="CENTER"> <COL ALIGN="LEFT"> <COL ALIGN="CENTER"> <COLGROUP ALIGN="RIGHT"> <THEAD> <TR><TH> Anno <TH>Nome<TH> Tipo <TH> Costo <TBODY> <TR><TD>1965<TD>Luxury Lace <TD>M <TD>11.75 <TR><TD>1976<TD>Green Flutter <TD>M <TD>7.50 <TR><TD>1984<TD>My Belle <TD>P <TD>12.00 <TR><TD>1985<TD>Stella De Oro <TD>P-G <TD> 5.00 <TR><TD>1989<TD>Brocaded Gown<TD>P <TD>14.50 <TFOOT> <TR><TD COLSPAN=4>M-medio P-piccolo G-grande </TABLE> Tecnologie di Sviluppo per il WEB 42
Risultato Tecnologie di Sviluppo per il WEB 43
Esempi Tabella Allineata Esempio Precedente Tecnologie di Sviluppo per il WEB 44