Tabelle Tabella: struttura di base

06 HTML tabelle Prof. Sabato Dario Pagina 1 di 14 Tabelle Tabella: struttura di base Le tabelle sono componenti importanti in HTML: nate agli inizi del Web per impaginare dati aggregati, si sono poi trasformate in uno strumento indispensabile per gestire i layout grafici, per tornare, già nell epoca dei CSS, ad essere elementi utilissimi per rappresentare informazioni. Come sempre in questa guida ci rifacciamo allo standard attuale, per cui l elemento <table> serve alla rappresentazione di dati, anche in più dimensioni, sotto forma di tabelle. Per definire una tabella minimale, che sia comunque interpretata correttamente dai browser possiamo riprodurre un esempio simile al seguente. Esempio: <table> <td>colonna 1 <td>colonna 2 <td>dato 1,1 <td>dato 1,2 <td>dato 2,1 <td>dato 2,2 <td>dato 3,1 <td>dato 3,2 Risultato a video: Nell esempio riusciamo a definire una griglia formata da righe e colonne, il

06 HTML tabelle Prof. Sabato Dario Pagina 2 di 14 risultato è piuttosto povero a livello semantico (non distinguiamo ad esempio il nome di una colonna dai suoi valori), ma ci aiuta a presentare i tag di base: Tag <table> <td> Descrizione È il contenitore di tutta la tabella e la definisce table row Contiene una riga della tabella table data Una cella che contiene i valori all interno di una riga Per ottenere una visualizzazione con bordi dobbiamo aggiungere tra il tag di header il seguente codice CSS: <style> table { border-collapse:collapse /*collassa lo spazio dei bordi*/ } td, th { border:1px solid #ddd; /*spessore stile colore*/ padding:8px; } </style> Per l attributo border-collapse serve a collassare gli spazi dei bordi vedi link: https://developer.mozilla.org/en-us/docs/web/css/border-collapse http://lau.csi.it/risorse/css2/esempi/ex_table.shtml https://www.w3schools.com/cssref/pr_border-collapse.asp Per l attributo border serve definire il bordo spessore, stile colore, vedi link: http://www.html.it/pag/14232/border-e-outline-gestire-i-bordi-con-i-css/ http://it.html.net/tutorials/css/lesson11.php https://www.w3schools.com/css/css_border.asp

06 HTML tabelle Prof. Sabato Dario Pagina 3 di 14 Il template di base di una tabella, caption, thead, tbody, tfoot Per scrivere una tabella che fornisca una rappresentazione più chiara dei dati introduciamo un template (modello) leggermente più ricco: <style> table { border-collapse: collapse; //collassa lo spazio dei bordi } th,td { border: 2px solid black;//bordo spessore, tipo linea, colore } </style> <table> <caption> <!--didascalia tabella--> <p>i miei dati</p> </caption> <!--intestazione tabella--> <th>colonna 1</th> <th>colonna 2</th> <tfoot> <!--piè di tabella--> <td>totale 1 <td>totale 2 </tfoot> <!--corpo della tabella--> <td>dato 1,1 <td>dato 1,2 <td>dato 2,1 <td>dato 2,2 <td>dato 3,1 <td>dato 3,2

06 HTML tabelle Prof. Sabato Dario Pagina 4 di 14 CAPTION THEAD TBODY TFOOT I tag introdotti sono tutti definiti come facoltativi, nel senso che la tabella non si rompe se manca uno di essi. Tuttavia si tratta di elementi fondamentali per la semantica delle tabelle. Esaminiamoli: Tag <caption> <th> <tfoot> Descrizione È una didascalia che ci permette di dare una contestualizzazione ai dati e rendere più chiaro il loro significato. Serve per raggruppare le righe che rappresentano l intestazione della tabella. table header Indica una cella intestazione (ad esempio il titolo di una colonna o di una riga) e serve a dare una definizione dei dati cui si riferisce. Raggruppa le righe corpo della tabella, spesso con i dati veri e propri. Raggruppa righe footer (piè di tabella) della tabella, in cui si possono inserire dei dati di riepilogo, somme, medie, etc. Interessante notare che thead, tbody e tfoot, creano dei raggruppamenti di righe e che tfoot può apparire, nel markup, anche prima del tbody, questo per consentire ai crowler di leggere prima i dati di sintesi e poi le informazioni più granulari. Alla fine la rappresentazione della tabella rimane quella che ci aspetteremmo:

06 HTML tabelle Prof. Sabato Dario Pagina 5 di 14

06 HTML tabelle Prof. Sabato Dario Pagina 6 di 14 colgroup e col, raggruppare le colonne Possiamo raggruppare le celle della tabella anche per colonna grazie al tag <colgroup>, che deve essere inserito tra il caption e ogni possibile raggruppamento per riga (thead, tbody, tfood). Con colgroup i gruppi vengono creati prendendo le colonne da sinistra verso destra. Il numero di colonne da considerare lo indichiamo grazie all attributo span. <table style="background-color: red;"> <colgroup id="a" span="3" style="background-color: green;"> </colgroup> <th>head</th><th>head</th><th>head</th> <th>head</th><th>head</th><th>head</th> <td>cell<td>cell<td>cell <td>cell<td>cell<td>cell <td>cell<td>cell<td>cell <td>cell<td>cell<td>cell <td>cell<td>cell<td>cell <td>cell<td>cell<td>cell

06 HTML tabelle Prof. Sabato Dario Pagina 7 di 14 Col Possiamo anche sfruttare il tag <col> per definire singole colonne o sottogruppi all interno di un gruppo: <table> <colgroup id="a" span="3" style="background-color: green;"></colgroup> <colgroup id="a"> <col id="b1" style="background-color: red;"> <col id="b2" span="2" style="background-color: yellow;"></colgroup> <th>head</th><th>head</th><th>head</th> <th>head</th><th>head</th><th>head</th> <td>cell<th>head</th><th>head</th> <td>cell<th>head</th><th>head</th> <td>cell<th>head</th><th>head</th> <td>cell<th>head</th><th>head</th> <td>cell<th>head</th><th>head</th> <td>cell<th>head</th><th>head</th> I sottogruppi si creano utilizzando l attributo span all interno di col.

06 HTML tabelle Prof. Sabato Dario Pagina 8 di 14 th, l attributo scope Il tag <th> indica il significato dei dati all interno delle celle, ma quali? Possiamo sfruttare questo tag sia per le colonne sia per le righe impostando l attributo scope che prevede 5 valori (stati): Valori di scope per th scope= row scope= col scope= rowgroup scope= colgroup scope= auto Descrizione L header si riferisce ai valori sulla stessa riga L header si riferisce ai valori sulla stessa colonna L header si riferisce a tutte le celle incluse nello stesso gruppo di righe del th (il valore non è ammesso se il th non appartiene a un gruppo di righe) L header si riferisce a tutte le celle incluse nello stesso gruppo di colonne del th (valido solo se th appartiene a un gruppo di colonne) se diamo come scope auto o se omettiamo lo scope, l insieme di celle cui si applica il contenuto di th viene selezionato dal contesto. I tag thead, tbody e tfoot permettono di creare dei raggruppamenti semantici di righe (row group) e dovrebbero sempre contenere almeno una riga. Vedi link: http://www.html.it/pag/15827/lattributo-scope/

06 HTML tabelle Prof. Sabato Dario Pagina 9 di 14 Annidare tabelle Chiudiamo mostrando come è possibile annidare le tabelle le une dentro le altre e lo facciamo esaminando un semplice esempio: <table style="background-color: green;"> <th>campo</th> <th>tabella</th> <td>campo1 <td> <table style="background-color: red;"> <th>campo</th><th>descrizione</th> <td>campo1<td>descrizione1

06 HTML tabelle Prof. Sabato Dario Pagina 10 di 14 colspan Prendiamo ad esempio una tabella 3 3 un cui vogliamo che una riga abbia una intestazione che valga per 2 colonne: <table style="background-color: green;"> <th colspan="2" style="background-color: red;"> double head </th> <th>head</th> <td>cell<td>cell<td>cell <td>cell<td>cell<td>cell <td>cell<td>cell<td>cell Per ottenere una cella che occupi più colonne utilizziamo l attributo colspan che si applica a td e a th come nel nostro caso. In questo modo ad esempio abbiamo indicato un header che vale per entrambe le colonne sottostanti. Importante notare che, poiché la nostra casella occupa due posti, per completare le tre colonne basterà aggiungere solo un altro th. Per completezza facciamo anche un esempio con td e colspan, creando un ipotetica scheda per la palestra:

06 HTML tabelle Prof. Sabato Dario Pagina 11 di 14 <table style="background-color: green;"> <th>lunedì</th> <th>mercoledì</th> <th>venerdì</th> <td colspan="3" style="background-color: red;"> Cyclette <td>esercizi spalle <td>pettorali <td>tricipiti <td>squat <td>estensioni gambe <td>polpacci

06 HTML tabelle Prof. Sabato Dario Pagina 12 di 14 rowspan Per ottenere una cella che si estenda su più di una riga utilizziamo l attributo rowspan in modo del tutto simile a quanto fatto con colspan: <table style="background-color: green;"> <th>head</th> <th>head</th> <th>head</th> <td rowspan="2" style="background-color: red;"> double row cell <td>cell <td>cell <td>cell <td>cell <td>cell <td>cell <td>cell

06 HTML tabelle Prof. Sabato Dario Pagina 13 di 14 Semantica di colspan e rowspan A livello semantico risulta abbastanza inutuitivo: le intestazioni (th) che sono su più colonne o più righe definiscono il significato delle relative colonne o righe, mentre i dati (td) che sussistono su più righe o colonne acquisicono il significato relativo alle righe o alle colonne che occupano. Concludiamo con un ultimo esempio pratico in cui definiamo un ipotetico orario scolastico: <table style="background-color: green;"> <caption>orario III B</caption> <th>ora</th> <th>lunedì</th> <th>martedì</th> <th>mercoledì</th> <th>giovedì</th> <th>venerdì</th> <th>i</th> <td rowspan="3" style="background-color: red;"> Italiano <td>geografia <td nowrap>ed. artistica <td colspan="2" style="background-color: yellow;"> Ed. Musicale <th>ii</th> <td rowspan="2" style="background-color: blu;"> Scienze <td rowspan="2" style="background-color: blu;"> Ed. Fisica <td colspan="2" style="background-color: blu;"> Matematica <th>iii</th> <td colspan="2" style="background-color: blu;"> Italiano <th>iv</th> <td>storia <td>matematica <td>geografia <td colspan="2" style="background-color: blu;"> Ed. tecnica

06 HTML tabelle Prof. Sabato Dario Pagina 14 di 14