Tabella: struttura di base Le Tabelle Nel Linguaggio HTML Le tabelle sono una delle parti più importanti di tutto il codice HTML: nate sin dagli inizi del Web per impaginare dati aggregati, si sono poi trasformate in uno strumento indispensabile per gestire i layout grafici. Il loro ampio utilizzo all interno dei documenti ha fatto sì che nel passaggio dall HTML 3.2 all HTML 4 - le specifiche delle tabelle venissero estese con una serie di notazioni destinate a far ordine all interno di un codice che rischiava di diventare troppo vasto. Immaginiamo la nostra prima tabella come una griglia formata da righe e colonne. I tag necessari per creare una tabella sono: <table> apre la tabella table row : indica l apertura di una riga <td> table data : indica una cella all interno di una riga In questi nostri primi esempi presupponiamo che il numero delle celle all interno di ciascuna riga sia costante: ogni riga avrà cioè lo stesso numero di celle. Ci sono dei metodi per variare il numero delle celle all interno di una riga, ma li vedremo in seguito. L attributo border permette di specificare di quanti pixel deve essere il bordo delle tabelle. Ad esempio: <table border= 2 > Lo useremo in questi esempi, altrimenti non percepiremmo la struttura di quanto stiamo costruendo. Ecco un primo esempio di tabella: <table border="1"> <td>prima cella</td> <td>seconda cella</td> <td>terza cella</td> <td>quarta cella</td> Che viene visualizzato così: prima cella seconda cella terza cella quarta cella Possiamo specificare la larghezza e l'altezza delle tabelle tramite gli attributi width e height che possono essere riferiti a tutti e tre i tag (<table>,, <td>). Il valore di questi attributi può essere specificato con una larghezza fissa (in pixel: in questo caso basta indicare un numero intero), oppure in percentuale (il numero deve essere allora seguito dal simbolo % ): in questo caso la tabella si adatta secondo lo spazio a disposizione. <table width="300" height="200" border="1"> <td>prima cella</td> <td>seconda cella</td> Le Tabelle nel linguaggio HTML (Ultima revisione 27/11/2011) Pag. 1
<td>terza cella</td> <td>quarta cella</td> Che viene visualizzato così: prima cella seconda cella terza cella quarta cella Oppure: <table width="75%" border="1"> <td width="25%">prima cella</td> <td width="75%">seconda cella</td> Che viene visualizzato così: prima cella seconda cella terza cella quarta cella <td width="25%">terza cella</td> <td width="75%">quarta cella</td> Di solito la larghezza e l altezza globali della tabella sono espresse nel tag <table>, mentre la larghezza delle varie celle viene espressa nei <td> della prima riga. L altezza in percentuale non sempre è visualizzata correttamente da tutti i browser. Come detto inizialmente le tabelle vanno immaginate come delle griglie, tutto sommato abbastanza rigide: l eventuale larghezza specificata nelle celle della prima riga avrà effetto dunque anche sulle celle delle righe sottostanti. Viceversa non è possibile variare arbitrariamente le dimensioni delle celle: le misure specificate nelle righe sottostanti non avranno infatti effetto, come si può vedere nell esempio allegato, che non è corretto: <table width="75%" border="1> <td width="25%">prima cella</td> <td width="75%">seconda cella</td> <td width="75%">terza cella</td> <td width="25%">quarta cella</td> Viene visualizzato così: prima cella terza cella seconda cella quarta cella ignorando completamente le indicazioni espresse nella seconda riga. Le Tabelle nel linguaggio HTML (Ultima revisione 27/11/2011) Pag. 2
Le dimensioni espresse non devono tuttavia essere in contraddizione ma mano che si procede verso l interno della tabella: in un caso simile infatti vincerebbe il valore specificato nel tag genitore, come si può vedere nel seguente esempio: <table width="300" border="1> <tr width="400" > <td width="600">prima cella</td> <td width="600">seconda cella</td> <td width="600">terza cella</td> <td width="600">quarta cella</td> Viene visualizzato così: prima cella terza cella seconda cella quarta cella ignorando completamente le indicazioni espresse nella seconda riga. Inoltre (come si evince dagli esempi) la visualizzazione dei layout con indicazioni non corrette è a discrezione del browser, quindi si rischia di ottenere risultati diversi da quelli voluti. Creare gruppi di righe: <caption>, <thead>, <tfoot>, <tbody> Come dicevamo, la struttura delle tabelle ha letteralmente invaso le pagine HTML, che si sono riempite di e di <td>. Per portare un po di ordine in questo caos nelle specifiche sono stati introdotti dei tag (opzionali) che consentono di capire facilmente quali siano le diverse parti della tabella. Per individuare facilmente i gruppi di righe sono stati introdotti i seguenti tag: <caption> è l intestazione, il titolo con un commento esplicativo sulla tabella <thead> <tfoot> <tbody> è l'intestazione, la parte iniziale della tabella, quella che contiene ad esempio indicazioni sul contenuto delle celle è il piede, la conclusione della tabella, quella che consente ad esempio di tirare le somme è il corpo, la parte centrale con il contenuto vero e proprio della tabella Le Tabelle nel linguaggio HTML (Ultima revisione 27/11/2011) Pag. 3
<thead>, <tfoot>, <tbody> sono tag che consentono di individuare gruppi di righe ( row group ). Da notare che contrariamente a quello che si potrebbe pensare il tag <tfoot> che chiude la tabella, è anteposto rispetto al <tbody>. L idea di base è che il browser nell eseguire il rendering del codice tenga conto della parte iniziale e della parte finale della tabella, e il corpo vero e proprio sia sviluppato nella sua interezza tra le due estremità. Un altra particolarità è che le celle all interno del tag <thead> possono essere indicate con <th> ( table header ), al posto del consueto <td> ( table data ), in questo caso il contenuto delle celle è automaticamente formattato in grassetto e centrato. Ecco comunque uno schema che riassume la struttura delle tabelle secondo l HTML 4: Esempio: Fatturato dell'azienda XYZ Mesi di attività Fatturato da attività 1 (in euro) Fatturato da attività 2 (in euro) Totale 450.000 45.000 gen 10.000 1.000 feb 20.000 2.000 mar 30.000 3.000 apr 40.000 4.000 ago 50.000 5.000 sett 60.000 6.000 ott 70.000 7.000 nov 80.000 8.000 Le Tabelle nel linguaggio HTML (Ultima revisione 27/11/2011) Pag. 4
Fatturato dell'azienda XYZ Mesi di attività Fatturato da attività 1 (in euro) Fatturato da attività 2 (in euro) dic 90.000 9.000 A cui corrisponde il seguente codice (ho evidenziato <caption>, <thead>, <tfoot>, <tbody> in grassetto): <table width="75%" border="1"> <caption><div align="center"><b>fatturato dell'azienda XYZ</b></div></caption> <thead> <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> </thead> <tfoot> <td ><b>totale</b></td> <td >450.000</td> <td >45.000</td> </tfoot> <tbody> <td >gen</td> <td >10.000</td> <td >1.000</td> <td >feb</td> <td >20.000</td> <td >2.000</td> <td >mar</td> <td >30.000</td> <td >3.000</td> Le Tabelle nel linguaggio HTML (Ultima revisione 27/11/2011) Pag. 5
<td >apr</td> <td >40.000</td> <td >4.000</td> <td >ago</td> <td >50.000</td> <td >5.000</td> <td >sett</td> <td >60.000</td> <td >6.000</td> <td height="24">ott</td> <td >70.000</td> <td >7.000</td> <td >nov</td> <td >80.000</td> <td >8.000</td> <td height="24" >dic</td> <td >90.000</td> <td >9.000</td> </tbody> Raggruppare gli stili delle colonne con colgroup Come è possibile suddividere le righe di una tabella in gruppi ordinati, allo stesso modo è possibile raggruppare gli stili delle colonne. Il tag da usare è il <colgroup> e serve per fornire indicazioni su come le colonne debbano essere visualizzate. Purtroppo questo tag nel momento in cui scrivo non funziona ancora correttamente con tutti i browser: il tag è correttamente visualizzato da Internet Explorer, è supportato solo in parte da Opera, ma non è ben interpretato da Mozilla (e dunque neanche da Netscape 7), che lo ignora tranquillamente. Tuttavia trattandosi di una specifica del W3C in futuro il supporto a questa sintassi dovrebbe essere maggiore. Prima di vedere nel dettaglio questo tag anticipiamo due concetti che vedremo in seguito quando ci occuperemo più approfonditamente della formattazione delle tabelle e che ora ci servono per meglio comprendere l'uso di <colgroup>. L attributo align può essere riferito sia a, sia a <td> e serve per definire l allineamento dei contenuti a sinistra, a destra o al centro (left, right, center) Le Tabelle nel linguaggio HTML (Ultima revisione 27/11/2011) Pag. 6
L attributo bgcolor può essere riferito tanto a <table>,, o <td> e come abbiamo visto a proposito del <body> - consente di impostare un colore di sfondo Il tag <colgroup> - la cui chiusura è facoltativa - va posto subito dopo il tag <caption> e prima di <thead>, e consente di impostare un layout unico per le colonne senza avere la necessità di specificare allineamento del testo, o il colore di sfondo per ogni singola cella. Con l attributo span (da non confondere con il tag <span>) possiamo impostare il numero di colonne che fanno parte del gruppo. Per avere un layout di questo genere: basterà allora scrivere: <table width="75%" border="1"> <colgroup bgcolor="#00ffcc" width="20%" align="right"></colgroup> <colgroup span="2" bgcolor="#33ccff" width="30%" align="center"> <caption> <div align="center"><b>fatturato dell'azienda XYZ</b></div> </caption> <thead> <th>mesi di attività</th> <th>fatturato da attività 1 (in euro)</th> <th>fatturato da attività 2 (in euro)</th> </thead> eccetera... < /table> <colgroup> ha l indubbio vantaggio di poter attribuire in una sola volta la formattazione a un numero elevato di colonne. Ad esempio: <colgroup span= 40 align= right > Se si preferisce attribuire più esplicitamente lo stile ad una colonna si può usare il tag <col> (che non necessita chiusura) all interno di <colgroup>. In questo caso l attributo span va riferito a <col> e non a <colgroup>. Le Tabelle nel linguaggio HTML (Ultima revisione 27/11/2011) Pag. 7
Con il minimo sforzo, con il seguente codice si riesce a impostare il colore, la grandezza e l'allineamento delle celle. Purtroppo il codice viene visualizzato (per ora) in modo corretto solo da Internet Explorer. Il codice è da inserire subito dopo l'apertura del tag <table>: <colgroup span="5" width="20" bgcolor="red"></colgroup> <colgroup width="60"> <col span="5" bgcolor="blue" align="left"> <col span="5" bgcolor="green" align="right"> </colgroup> Che produce il seguente effetto: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Raggruppare celle con rowspan e colspan Finora abbiamo immaginato le tabelle come griglie rigide, in cui il numero delle colonne era dato come costante e non modificabile. I raggruppamenti di righe e colonne che abbiamo esaminato finora non hanno modificato minimamente questa struttura. In realtà è possibile raggruppare le delle all'interno delle colonne in modo da avere ad esempio una riga da 2 colonne e un altra da 3. Per ottenere questo risultato è necessario specificare che una cella deve occupare il posto di 2 (o più colonne). In questo caso si utilizza l attributo colspan sul <td>, specificando come valore il numero di celle che devono essere occupate. Ad esempio: <td colspan="2"> Il cui codice corrispondente è: <table width="430" border="1" bordercolor="#000000"> <td width="30%"> </td> <td width="30%"> </td> <td width="30%"> </td> <td colspan="2" align="center" valign="middle"> <b><td colspan="2"></b></td> < /table> Le Tabelle nel linguaggio HTML (Ultima revisione 27/11/2011) Pag. 8
Tramite l attributo rowspan (da riferirsi sempre a <td>) è invece possibile creare delle celle che occupino più di una riga. Ad esempio: <tdrowspan="2"> il cui codice corrispondente è: <table width="430" border="1" bordercolor="#000000"> <td width="30%"> </td> <td width="30%" rowspan="2" align="center" valign="middle"> <b><tdrowspan="2"></b></td> <td width="30%"> </td> < /table> Esempio: 8-9 Orario ipotetico Lunedì Martedì Mercoledì Giovedì Venerdì Geografia Educazione artistica Educazione Musicale 10-11 Italiano Matematica Scienze Educazione fisica 11-12 Italiano 12-13 Storia Matematica Geografia Educazione tecnica Annidare tabelle È anche possibile annidare le tabelle le une dentro le altre. Come in questo esempio: <table width="430" border="1"> <td width="50%"> </td> <td width="50%"> </td> <td height="24"> </td> <td> <table width="100%" border="1"> Le Tabelle nel linguaggio HTML (Ultima revisione 27/11/2011) Pag. 9
</td> < /table> che dà come risultato: Per evitare che compaiano nel layout degli spazi indesiderati è consigliabile aprire e chiudere la tabella a ridosso del tag della cella che la contiene. Attributi del tag table Per quel che riguarda il tag <table>, i seguenti attributi che ci permettono di regolare le distanze tra i margini della tabella (o della cella) e il contenuto: border cellspacing cellpadding (che abbiamo già visto) specifica la larghezza dei bordi di una tabella (in pixel) specifica la distanza (in pixel) tra una cella e l altra, oppure tra una cella e il bordo. Di default è un pixel, dunque occorrerà sempre azzerarlo esplicitamente, quando non lo si desideri indica la distanza tra il contenuto della cella e il bordo. Se il valore viene indicato con un numero intero, la distanza è espressa in pixel; il cellpadding tuttavia può anche essere espresso in percentuale. Di default la distanza è nulla La dimensione indicata nel cellpadding e dal cellspacing - una volta specificata ha effetto su tutti i lati della cella. Le Tabelle nel linguaggio HTML (Ultima revisione 27/11/2011) Pag. 10
I rapporti tra gli attributi che abbiamo appena esaminato sono regolati come segue: Con questa sintassi ad esempio si imposta una tabella con bordo di 1 pixel, senza spazio tra le celle e con il contenuto che è distanziato dai bordi della cella di 10 pixel: <table width="75%" border="1" cellpadding="10" cellspacing="0"> contenuto contenuto contenuto contenuto contenuto contenuto Esempi Vari: Struttura dei tag di una tabella 5x2 Le Tabelle nel linguaggio HTML (Ultima revisione 27/11/2011) Pag. 11
Utilizzo COLSPAN: <table border="1"> <td colspan="2">a</td> <td>b</td> <td>c</td> Otterremo il seguente risultato: Esiste anche l'attributo valign che allinea il contenuto in verticale attraverso i seguenti valori: top - allineamento verso l'alto; middle - allineamento centrato; bottom - allineamento verso il basso. Utlizzo ROWSPAN: <table border="1"> <td rowspan="2">a</td> <td>b</td> <td>c</td> Otterremo il seguente risultato: Esempio rowspan: Anfibi Rana Salamandra Merluzzo Pesci Trota Salmone Babbuino Scimmie Gorilla Orango Scimpanzè Le Tabelle nel linguaggio HTML (Ultima revisione 27/11/2011) Pag. 12
<html> <head> Esempio</head> <title> Esempio di una tabella </title> <br> <br> <body> <table border="3" cellspacing="3" cellpadding="5"> <tbody> <td rowspan="2" bgcolor="red" colspan="2" align="center" height="60%"> <b> Anfibi</b> </td> <td bgcolor="red"> Rana</td> <td bgcolor="red"> Salamandra</td> <td rowspan="3" bgcolor="pink" colspan="2" align="center" height="60%"> <b> Pesci</b> </td> <td bgcolor="pink"> Merluzzo</td> <td bgcolor="pink"> Trota</td> <td bgcolor="pink"> Salmone</td> <td rowspan="4" bgcolor="orange" colspan="2" align="center" height="60%"> <b> Scimmie </b> </td> <td bgcolor="orange"> Babbuino</td> <td bgcolor="orange"> Gorilla</td> <td bgcolor="orange"> Orango</td> <td bgcolor="orange"> Scimpanzè</td> </tbody> </body> </html> Le Tabelle nel linguaggio HTML (Ultima revisione 27/11/2011) Pag. 13
Esempio colspan: Albicocche, disidratate Categoria Frutta Codice alimento 007010 Nome scientifico Prunus armeniaca <html> <head> Esempio Colspan</head> <title> Esempio Colspan </title> <br> <br> <body> <table border="1" width="600" cellspacing="0" > <thead> <td align="center" colspan="2" bgcolor="lightgreen"><b> Albicocche, disidratate </b> </thead> <tbody> <td><b> Categoria </b></td> <td> Frutta </td> <tr bgcolor="pink"> <td><b> Codice alimento </b> </td> <td> 007010 </td> <td><b> Nome scientifico</b> </td> <td> Prunus amrmeniaca </td> </tbody> </body> </html> Le Tabelle nel linguaggio HTML (Ultima revisione 27/11/2011) Pag. 14