Creare le tabelle

Page 1

Il linguaggio HTML: creare le tabelle

Le tabelle attraverso il linguaggio HTML Le tabelle sono un utile mezzo fornito dal linguaggio HTML per organizzare in una forma specifica i contenuti di una pagina e per creare uno specifico layout a seconda delle esigenze. Le tabelle sono state inizialmente sviluppate solo per contenere e rappresentare in maniera ordinata delle grandi quantità di dati. Ora le tabelle vengono utilizzate anche solo per modificare l’aspetto di un pagina. Pertanto in questa lezione analizzeremo i principi di base per l’inserimento delle tabelle in una struttura HTML.

Una tabella HTML è composta dai seguenti elementi, tutti inseribili e personalizzabili attraverso gli elementi della marcatura HTML. ✦Righe ✦Colonne ✦Celle di intestazione ✦Celle del corpo di tabella ✦Didascalie o descrizioni ✦Righe di intestazione ✦Righe del corpo di tabella ✦Righe di footer

La tabella inserita nelle slide successive poggia sulla seguente struttura HTML di base. <html> <head> <title>Una tabella HTML</title></head> <body> <table border="1"> <caption>Didascalia</caption><thead> <tr><td colspan="2">Intestazione della tabella</td></tr></thead> <tfoot> <tr><td colspan="2">Footer della tabella</td></tr> </tfoot><tbody>

<tr><th>Intestazione cella 1</th><th> Intestazione cella 2</th></tr> <tr><td>Cella del corpo tabella 1</td><td> Cella del corpo tabella 2</td></tr> </tbody> </table> </body> </html> Output

Molte parti di una tabella HTML sono tuttavia opzionali. E’ invece sempre necessario per realizzare una tabella: Delimitare la tabella, attraverso l’utilizzo dei tag<table>…</table> Definire le righe, attraverso i tag <tr>…</tr> - (table row). Definire le colonne e le celle, attraverso i tag <td> … </td> - (table data) Una tabella base, provvista solamente di una marcatura essenziale e pertanto di pochi elementi divisori, apparirà nel modo seguente:

<html> <head> <title>Una tabella base HTML</title></head> <body> <table border="1"> <tr><td>Cella del corpo tabella 1</td><td>Cella del corpo tabella 2 </td></tr> </table> </body></html> Output

E’ inoltre possibile inserire una tabella HTML all’interno di un’altra. Infatti una tecnica generalmente molto usata prevede proprio l’utilizzo di tabelle HTML per creare il layout di pagine web. In questo caso le tabelle devono essere annidate all’interno dei tag relativi alle celle della tabella, come vedremo in dettaglio nella lezione successiva, dedicata proprio all’organizzazione del layout di pagina con le tabelle HTML.

Larghezza e allineamento di una tabella Normalmente, una tabella HTML si espande per adattarsi al contenuto delle celle. Vediamo ad esempio la seguente struttura e il relativo output finale attraverso la finestra del browser: <html> <head> <title>HTML Larghezza tabella</title></head> <body>

<p> Breve testo di tabella<br /> <table border="1"> <tr><td>Breve testo 1</td><td>Breve testo 2</td></tr> </table> </p> <p> Testo di tabella pi첫 lungo<br /> <table border="1"> <tr><td>Testo pi첫 lungo 1</td> <td>Testo pi첫 lungo 2</td></tr> </table> </p> </body> </html>

Output

Una volta che una tabella si estende oltre i limiti dell’"oggetto" che la contiene, come ad esempio un frame prestabilito, un’altra tabella, oppure la stessa finestra del browser, i suoi contenuti “in eccesso� verranno automaticamente coperti.

Per impostare manualmente le misure di una tabella, affinchè non si verifichi l’inconveniente sopra citato e tutto il contenuto sia sempre visibile, è possibile indicare dei parametri specifici. In questo caso è necessario usare in associazione al tag <table> l’attributo width che andrà a specificare la larghezza della tabella, sia in pixel che in valori di percentuale: <table width: "valore da assegnare"> Ad esempio, specificando la percentuale "50%" nell’attributo width, come nella struttura seguente, la tabella si estenderà fino ad occupare il 50% della pagina.

<html> <head> <title>Tabella con larghezza 50%</title> </head> <body> <p>Tabella con larghezza 50%<br /> <table border="1" width="50%"> <tr><td>Cella 1</td><td>Cella 2</td><td>Cella 3</td><td> Cella 4</td></tr> </table> </p> </body> </html>

Output

Oltre a specificare la larghezza dell’intera tabella è possibile indicare la larghezza di ogni colonna interna alla tabella stessa, utilizzando sempre l’attributo width ma stavolta nei tag <th> e <td>. Es. <td width: "valore da assegnare">…</td>

Oppure è possibile specificare, come vedremo più avanti, la larghezza anche nei tag <col> e <colgroup>. Usare un valore percentuale nell’attributo width permette alla tabella di ridimensionarsi automaticamente rispetto alla pagina che la contiene. Ad esempio se una tabella è impostata con un valore width: "50%", allora essa occuperà sempre metà della finestra del browser, qualunque siano le dimensioni di quest’ultima. Per specificare la misura precisa di una tabella è necessario invece fornire un valore in pixel.

Per impostare una tabella con 400 pixel di larghezza sarà necessario utilizzare la seguente marcatura: <table width="400px"> Cosa accade quando la larghezza della tabella impostata supera quella dell’oggetto contenitore della tabella? Se l’elemento contenitore della tabella, oppure la stessa finestra del browser, è fornito di una barra di scorrimento allora tale mezzo permetterà di visualizzare l’intero contenuto della tabella.

Esempio:

Al contrario se la larghezza specificata per la tabella supera quella dell’oggetto contenitore e quest’ultimo non prevede una scrollbar, allora la sua visualizzazione finale dipenderà interamente dal browser. In alcuni casi i browser restringono la tabella affinchè si possa adattare alla pagina. Lo stesso discorso e le stesse problematiche di visualizzazione riguardano anche l’attributo height, usato per determinare l’estensione in verticale delle celle, delle righe e della tabella HTML in generale. Anche in questo caso i valori attribuibili all’attributo possono essere espressi in pixel o valori di percentuale. Es. <table height: "valore percentuale" oppure "numeropixel">

Strumenti per la spaziatura e il padding delle celle Esistono due opzioni per modificare la spaziatura tra le celle di una tabella HTML: impostare un “riempimento” (il padding) o dei valori di spaziatura, elementi controllabili sempre attraverso i tag HTML propri di una tabella. Per “spaziatura tra celle” si intende lo spazio tra le celle. La sezione in “verde” nell’esempio seguente:

Il cosiddetto padding indica invece quello spazio specifico tra il bordo delle celle e il loro contenuto. Le parti in “rosa� nel seguente esempio:

Lo spazio tra le celle (cell spacing) viene controllato con l’attributo cellspacing che può essere espresso con un valore percentuale o un valore in pixel. Es. <table border cellspacing="2" oppure "5%">

Se specificato attraverso un valore percentuale il browser generalmente userà solo metà della percentuale specifica per ogni lato della cella. La percentuale si riferisce allo stesso tempo alle dimensioni di spazio verticali e orizzontali. Nell’output seguente vediamo una semplice tabella HTML impostata con un cellspacing di 20.

Es.

Il “padding” delle celle è controllato invece attraverso l’attributo cellpadding. Così come per il cellspacing, è possibile specificare le dimensioni del padding sia in pixel sia in valori percentuali.

es. <table border cellpadding="10" oppure "10%"> Bisogna inoltre considerare che un utilizzo sbagliato del cellspacing e del cellpadding può avere degli effetti drastici sullo spazio disponibile, destinato al contenuto delle celle. Aumentando sia le dimensioni del padding che del cellspacing lo spazio per il contenuto diminuirà sensibilmente.

Bordi e linee I bordi intorno all’intera tabella HTML e intorno alle celle possono essere configurati secondo diverse modalità . Pertanto nelle slide seguenti considereremo tutte le opzioni a disposizione per impostare i bordi delle nostre tabelle HTML e l’aspetto delle linee di divisione.

Bordi e linee di una tabella In questo caso è possibile utilizzare, come visto già nella struttura esempio presentata all’inizio della lezione, l’attributo border associato al tag <table>. La seguente struttura HTML ad esempio descrive i “bordi” di tre tabelle in modo diverso. <html> <head> <title>Bordi esterni</title> </head> <body> <p>Nessun bordo<br /> <table border="0"> <tr><td>cella 1</td><td>cella 2</td></tr>

<tr><td>cella 3</td><td>cella 4</td></tr> </table> </p> <p>Bordo = 1<br /> <table border="1"> <tr><td>cella 1</td><td>cella 2</td></tr> <tr><td>cella 3</td><td>cella 4</td></tr> </table></p> <p> Bordo = 5<br /> <table border="5"> <tr><td>cella 1</td><td>cella 2</td></tr> <tr><td>cella 3</td><td>cella 4</td></tr> </table></p> </body> </html>

Output

Il valore dell’attributo del bordo tabella specifica la larghezza del bordo in pixel. Il valore di default per il bordo di una tabella HTML è 0 oppure "no border". Per specificare quali bordi esterni dovranno essere visualizzati è possibile utilizzare un altro attributo specifico: l’attributo frame.

Per specificare quali bordi della tabella dovranno essere visualizzati è necessario attribuire all’attributo frame uno dei seguenti valori, indicati nella tabella.

Valori da utilizzare con l’attributo frame Valore

Descrizione

void

Non visualizza i bordi

above

Visualizza solo il bordo del lato superiore della tabella

below

Visualizza solo il bordo del lato inferiore della tabella

hsides

Visualizza solo i (superiore e inferiore)

ihs o rhs

Visualizza solo il bordo sinistro o il bordo destro.

vsides

Visualizza solo i bordi verticali (destro e sinistro)

box o border

Visualizza i bordi di tutti i lati della tabella.

bordi

orizzontali

Esempio di utilizzo dell’attributo frame <html> <head> <title>Una tabella HTML</title></head> <body> <table frame="hsides"> <caption>Didascalia</caption><thead> <tr><td colspan="2">Intestazione della tabella</td></tr></thead> <tfoot> <tr><td colspan="2">Footer della tabella</td></tr> </tfoot><tbody> <tr><th>Intestazione cella 1</th><th> Intestazione cella 2</th></tr> <tr><td>Cella del corpo tabella 1</td><td> Cella del corpo tabella 2</td></tr> </tbody> </table> </body> </html>

Output

Visualizzare le linee della tabella E’ possibile utilizzare anche in questo, in associazione con il tag <table> uno specifico attributo per determinare quali righe divisorie della tabella dovranno essere visualizzate: l’attributo rules.

Come l’attributo frame, anche l’attributo rules può avere diversi valori tra cui scegliere a seconda dell’effetto che si vuole ottenere. I valori dell’attributo rules sono elencati nella tabella seguente:

Valori da utilizzare con l’attributo rules Valore none

Descrizione Non visualizza le righe

groups

Visualizza le linee solamente tra gruppi di file e gruppi di colonne

rows

Visualizza le linee solo tra le righe

cols

Visualizza le linee solo tra le colonne

all

Visualizza tutte le linee tra righe e colonne

La larghezza di una linea interna è regolata dall’attributo di cellspacing.

Ad esempio, impostare un cellspacing con un valore di 5 px genera automaticamente delle righe divisorie interne sempre di 5 px di larghezza. <html> <head> <title>Una tabella HTML</title></head> <body> <table rules="rows" cellspacing= "5"><caption>Didascalia</caption><thead> <tr><td colspan="2">Intestazione della tabella</td></tr></thead> <tfoot> <tr><td colspan="2">Footer della tabella</td></tr> </tfoot><tbody>

<tr><th>Intestazione cella 1</th><th> Intestazione cella 2</th></tr> <tr><td>Cella del corpo tabella 1</td><td> Cella del corpo tabella 2</td></tr> </tbody> </table> </body> </html> Output

Righe (rows) Le righe sono gli elementi orizzontali di divisione interna di una tabella, racchiusi tra i tag <tr>…</tr>. Le righe sono poi divise in celle individuali attraverso l’utilizzo dei tag <td> o <th> che vanno sempre inserite all’interno dei tag <tr>. Il tag di chiusura </tr> è opzionale, tuttavia è buona norma inserirlo comunque per motivi di chiarezza nella propria struttura HTML. Al tag <tr> possono essere associati attributi e valori specifici:

Attributi del tag <tr> Attributi align

Descrizione e valori Valori: right, left, center, justify e char. Questo attributo controlla l’allineamento orizzontale dei dati in una riga. Usando l’allineamento basato sull’attributo char, è necessario specificare l’allineamento anche con l’attributo char.

char

Specifica un particolare tipo di allineamento impostato sulla posizione di un dato elemento o carattere presente nella cella.

charoff

E’ possibile indicare la distanza specifica (in valori numerici) dall’elemento di contenuto utilizzato come fulcro di allineamento della cella. Può essere specificato in pixel o valori percentuale.

valign

Questo attributo controlla l’allineamento verticale dei dati in una riga, con i seguenti valori: top, middle, bottom e baseline

Usando gli attributi di allineamento in un tag <tr>, quel dato allineamento verrĂ applicato a tutte le celle presenti in una stessa fila. Per formattare l’allineamento delle celle individualmente è necessario specificare un attributo di allineamento nei tag singoli delle celle (<th> o <td>) oppure nei tag <col> o <colgroup>. Struttura esempio

<html> <head> <title>tabella HTML</title>

</head> <body> <table border= "2" cellspacing= "20" cellpadding="10"> <caption>Didascalia</caption> <tr align= "center"><td>uno</td><td>due</td></tr> <tr align= "center"><td>tre</td><td>quattro</td></tr> <tr align= "center"><td>cinque</td><td>sei</td></tr> </table> </body> </html>

Output

L’attributo bgcolor usato in precedenza per impostare il colore di sfondo delle righe di una tabella è stato deprecato nell’HTML 4.01. Al posto di questo attributo è possibile applicare regole di stile specifiche per ottenere sempre lo stesso risultato.

Le celle di una tabella Le singole celle di una tabella HTML sono gli elementi che dovranno contenere i dati previsti nella nostra pagina web. In HTML la definizione delle celle stabilisce anche le colonne della tabella. E’ necessario delimitare celle e colonne attraverso l’utilizzo del tag <td> (abbreviazione per tabledata). Vediamo ad esempio la seguente struttura: <html> <head><title>celle</title> </head>

<body> <p> <table border="1" cellpadding="5"> <tr> <td>colonna 1</td><td>colonna 2</td><td>colonna 3</td> </tr> <tr> <td>colonna 1</td><td>colonna 2</td><td>colonna 3</td> </tr> </table> </p> </body> </html> Output

Come vediamo la struttura riportata definisce una tabella con due righe e tre colonne, attraverso l’utilizzo di 3 tag <td>‌</td> E’ inoltre possibile usare i tag di intestazione della tabella (<th>) per definire le specifiche intestazioni delle varie colonne. Partendo dalla struttura vista nella slide precedente, aggiungiamo le intestazioni alle colonne create: <html> <head><title>celle</title> </head> <body> <p>

<table border="1" cellpadding="5"> <tr> <th>intestazione 1</th><th>intestazione 2</th><th>intestazione 3</th> </tr> <tr> <td>colonna 1</td><td>colonna 2</td><td>colonna 3</td> </tr> <tr> <td>colonna 1</td><td>colonna 2</td><td>colonna 3</td> </tr> </table> </p> </body> </html> Output

Le intestazione di tabella rendono più semplice la formattazione delle intestazioni delle singole colonne, senza andare a modificare la formattazione dei caratteri. Ad esempio, la precedente struttura mostra le celle <th> in grassetto, un valore di default del tag <th> per l’intestazione delle colonne. Per ottenere una stessa formattazione senza dove aggiungere i tag di intestazione è possibile utilizzare, all’interno dei tag <th> il tag HTML utilizzato per rendere un testo in grassetto: <b>…</b>. Per questo motivo la struttura HTML seguente, senza l’utilizzo dei tag <th> verrà comunque visualizzata come quella riportata prima.

<html> <head><title>celle</title> </head> <body> <p> <table border="1" cellpadding="5"> <tr> <td><b>intestazione 1</b></td> <td><b>intestazione 2</b></td> <td><b>intestazione 3</b></td></tr> <tr><td>colonna 1</td><td>colonna 2</td><td>colonna 3</td> </tr> <tr><td>colonna 1</td><td>colonna 2</td><td>colonna 3</td> </tr> </table> </p> </body> </html>

Alle celle di una tabella HTML possono essere applicati diversi attributi, tutti elencati nella tabella seguente.

Attributi delle celle Attributo

Descrizione e valore

abbr

Indica una specifica forma abbreviata per il contenuto di una cella.

align

Indica l’allineamento orizzontale del contenuto di una cella. I valori dell’attributo align sono i seguenti: left, center, right,

justify e char. axis

Viene usato per definire la categoria concettuale di appartenenza di una data cella e può essere utilizzato per posizionare il contenuto di una cella in uno specifico spazio.

char

E’ possibile utilizzare un carattere specifico per allineare il contenuto di una cella, se l’allineamento è impostato come char

charoff

E’ possibile indicare la distanza specifica (in valori numerici) dall’elemento di contenuto utilizzato come fulcro di allineamento della cella.

Numeri positivi indicano un allineamento a destra del char indicato, mentre numeri negativi indicano un allineamento a sinistra. colspan

Indica il numero di colonne in tabella che una celle deve occupare.

headers

Indica una lista di attributi "id" delle celle che corrisponde a quelle celle utilizzate come intestazioni per le celle correnti.

rowspan

Indica quante righe una cella deve occupare

scope

Indica lo scopo del contenuto della cella corrente quando questa è usata come intestazione. I valori dell’attributo sono:

row, col (colonna), rowgroup, colgroup (gruppo di colonne). valign

Indica l’allineamento verticale del contenuto di una cella. I valori dell’attributo sono: top, middle, bottom e baseline.

Struttura esempio con gli attributi del tag <td> <html> <head><title>attributi td</title></head> <body> <table border="1" cellspacing= "10" align= "center"> <tr>

<th></th> <td abbr="Lun" axis="giorno"><b> Lunedi</b></td> <td abbr="Mar" axis="giorno"><b> Martedi</b></td> <td abbr="Mer" axis="giorno"><b> Mercoledi</b></td> <td abbr="Gio" axis="giorno"><b> Giovedi</b></td> <td abbr="Ven" axis="giorno"><b> Venerdi</b></td> </tr> <tr> <td axis="materia"><b> Italiano</b></td> <td></td> <td></td>

<td></td> <td></td> <td></td> </tr> <tr> <td axis="materia"><b> Storia</b></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>

Output

Normalmente il testo contenuto in una cella va automaticamente a capo, secondo le dimensioni impostate per la cella stessa. L’attributo nowrap veniva utilizzato proprio per non permettere al testo di una cella di andare a capo. Tuttavia questo attributo con le nuove specifiche HTML non viene piÚ supportato dalla moderne versioni dei browser.

Didascalie Le didascalie delle tabelle (elemento <caption>) costituiscono un metodo facile per aggiungere descrizioni ad una tabella. Ad esempio la seguente struttura HTML aggiunge una “descrizione� appropriata alla tabella creata senza l’inserimento di elementi di intestazione. <html> <head> <title>Impostazioni del Monitor</title>

</head> <table border="1" cellpadding="3" cellspacing="2"> <caption>Frequenza di aggiornamento supportata</caption> <tr> <th>Risoluzione H</th> <th> Risoluzione V</th> <th>Frequenza</th> </tr> <tr> <td>640</td><td>480</td><td>60 to 120 Hz</td> </tr> <tr> <td>800</td><td>600</td><td>55 to 110 Hz</td> </tr> <tr> <td>832</td><td>624</td><td>da 55 a 106 Hz</td> </tr> <tr> <td>1024</td><td>768</td><td>da 55 a 87 Hz</td> </tr>

<tr> <td>1152</td><td>870</td><td>da 55 a 77 Hz</td> </tr> <tr> <td>1280</td><td>1024</td><td>da 55 a 66 Hz</td> </tr> </table> </body> </html>

Output

E’ importante ricordare che il tag <caption> deve comparire immediatamente dopo il tag <table>.

Le descrizioni vengono generalmente visualizzate immediatamente sopra la tabella a cui fanno riferimento con un allineamento sempe centrato rispetto a questa. Per modificare l’aspetto finale di queste descrizione è ovviamente possibile applicare delle regole di stile.

Raggruppare le righe—Header, Body, e Footer Tabelle con una struttura semplice comprendono normalmente una sola sezione: il body della tabella stessa, composto da righe e colonne. Tuttavia è possibile aggiungere ulteriori informazioni a questa struttura di base definendo ad esempio un’intestazione di tabella e un “piè di pagina” o meglio footer, per completare le informazioni fornite nel “corpo” della tabella.

Ad esempio, un header o intestazione di tabella può contenere le intestazioni delle righe, il body può contenere i dati della tabella e il footer gli eventuali totali delle cifre riportate in ogni colonna. Le ultime specifiche HTML indicano che le tre sezioni di tabella indicate per essere sempre visibili devono essere usate insieme. Non è possibile utilizzare una sezione “intestazione” e una sezione “body” omettendo la sezione footer. E’ pertanto necessario utilizzare i tag corrispondenti a ogni sezione, anche se vuoti. L’intestazione di tabella (table header) è delimitata con i tag <thead>…</thead>.

La sezione contenente il corpo della tabella è racchiusa dai tag <tbody>…<tbody>. Il “corpo” di una tabella può essere formattato come qualsiasi altro elemento utilizzato per creare una tabella HTML. La sezione del footer infine viene racchiusa dai tag <tfoot>…</tfoot> e come il body e l’header di tabella può essere formattato utilizzando gli attributi visti finora. La sezione <tfoot> andrà posizionata prima della sezione <tbody> nella struttura HTML della tabella. Tutti e tre i tag di sezione citati supportano gli attributi align e valign per controllare l’allineamento del testo nella sezione.

Dalla struttura seguente verrĂ ad esempio creata una tabella con tutte e tre le sezioni elencate. <html> <head> <title>Stima delle pagine del libro</title> </head> <body> <table border="1" cellpadding="3" cellspacing="2" rules="groups"> <thead align="center"> <tr> <th>capitolo</th><th>pagine</th><th>foto</th> <th>illustrazioni</th> </tr> </thead> <tfoot align="center"> <tr> <td>totali</td><td>51</td><td>13</td><td>6</td>

</tr> </tfoot> <tbody align="center"> <tr> <td>1</td><td>10</td><td>0</td><td>2</td> </tr> <tr> <td>2</td><td>12</td><td>4</td><td>1</td> </tr> <tr> <td>3</td><td>9</td><td>2</td><td>0</td> </tr> <tr> <td>4</td><td>20</td><td>7</td><td>3</td> </tr> </tbody> </table> </body> </html>

Output

Dall’output riportato vediamo che le tre sezioni sono separate da line orizzontali. Questo a causa dell’attributo rules e del valore a questo applicato nel tag <table>: rules="groups".

Colori di sfondo per tabelle Attraverso l’attributo bgcolor, non piĂš utilizzabile per determinare il colore di sfondo di righe e celle di una tabella, è tuttavia ancora possibile impostare un colore per la riga di intestazione:e Es. <tr bgcolor="yellow"><th>Risoluzione H</th> <th>Risoluzione V</th> <th>Frequenza</th> </tr>

Output

Usando degli elementi di stile in linea, lo stesso risultato verrĂ ottenuto dal seguente codice: <tr style="background-color: yellow;"> <th>Risoluzione H</th> <th>Risoluzione V</th> <th>Frequenza</th> </tr>

Estensione delle colonne e delle righe E’ possibile espandere i contenuti delle celle in piÚ colonne e righe utilizzando gli attributi colspan e rowspan. Queste modifiche di estensione vengono generalmente usate per creare colonne o righe adatte a contenere delle intestazioni o titoli specifici. Vediamo ad esempio la struttura di tabella seguente: <html> <head><title>gestire l’estensione</title></head> <body>

<p> <table border="1" cellpadding="5"> <caption>Risposte 1-4</caption> <tr align="center"> <th>Categoria</th> <th>Anno</th><th>#1</th><th>#2</th><th>#3</th><th>#4</th> </tr> <tr> <td rowspan=“3”>Maschio<br>Risposte</td> (!La cella di sopra si estende per 3 righe) <td>23</td><td>A</td><td>C</td><td>F</td><td>B</td> </tr> <tr> (!La prima cella è la cella estesa) <td>29</td><td>B</td><td>F</td><td>A</td><td>A</td>

</tr> <tr> (!La prima cella è la cella estesa) <td>25</td><td>C</td><td>C</td><td>C</td><td>C</td> </tr> <!termine della prima “estensione”) <tr> <td rowspan="3">Femmina<br>Risposte</td> (!La cella di sopra si estende per 3 righe) <td>28</td><td>F</td><td>E</td><td>B</td><td>B</td> </tr> <tr> (!La prima cella è la cella estesa) <td>21</td><td>B</td><td>B</td><td>B</td><td>A</td>

</tr> <tr> (!La prima cella è la cella estesa) <td>23</td><td>F</td><td>F</td><td>C</td><td>C</td> </tr> </table> </p> </body> </html>

Output

E’ possibile estendere le colonne utilizzando allo stesso modo l’attributo colspan, come indicato nella struttura seguente e nel relativo output:

<html> <head><title>gestire l’estensione delle colonne</title> </head> <body> <p> <table border="1" cellpadding="5"><caption>Risultati dei rispondenti</caption> <tr align="center"> (! Gruppo di intestazioni estese) <th> </th> <th colspan="2" width="150">Sezione 1</th> <th colspan="2" width="150">Sezione 2</th> <th colspan="2" width="150">Sezione 3</th> </tr> <tr align=“center”> (!intestazioni di colonna singole)

<th>Rispondenti</th><th>A</th><th>B</th> <th>C</th><th>D</th><th>E</th><th>F</th> </tr> Dati della tabella <tr> <td>Michele</td> <td>0</td><td>3</td><td>4</td> <td>0</td><td>5</td><td>2</td> </tr> <td>Giordano</td> <td>0</td><td>0</td><td>4</td> <td>6</td><td>2</td><td>2</td> </tr> <td>Maria</td> <td>7</td><td>7</td><td>0</td> <td>0</td><td>0</td><td>0</td> </tr> <td>Tommaso</td>

<td>2</td><td>2</td><td>4</td> <td>2</td><td>2</td><td>2</td> </tr> <td>Angelo</td> <td>7</td><td>3</td><td>4</td><td>0</td><td>0</td><td>0</td> </tr> <td>Elisa</td> <td>0</td><td>0</td><td>4</td> <td>10</td><td>0</td><td>0</td> </table> </body> </html>

Output

Nella struttura di esempio viene utilizzato un elemento particolare (evidenziato in rosso): &nbsp. In relazione al contenuto delle celle è bene notare che i browser difficilmente visualizzano in maniera corretta un tag vuoto come ad esempio <td></td> oppute <th></th>. Per inserire una cella vuota, che venga visualizzata correttamente in questo modo è possibile usare proprio l’elemento   (nonbreaking space entity) che va racchiuso tra i tag della cella che vogliamo rimanga vuota: <td> </td>.

Raggruppare le colonne Le due marcature <colgroup> e <col> sono usate insieme per definire e formattare i gruppi di colonne e le colonne singole. In particolare il tag <colgroup> viene usato per definire e i gruppi di colonne. Questo tag supporta gli stessi attribute di formattazione delle marcature <tr> e<td>/<th> (come ad es. align, valign, width, ecc.). Ogni colonna definita attraverso il tag <colgroup> erediterĂ la formattazione contenuta nello stesso tag <colgroup>.

Per definire le colonne all’interno di un gruppo è possibile utilizzare l’attributo span insieme al tag <colgroup> per indicare il numero di colonne presenti nel dato raggruppamento. Ad esempio la seguente sezione di struttura HTML unisce le prime tre colonne in un unico gruppo: <table> <colgroup span="3"></colgroup> ... E’ necessario notare che ulteriori tag <colgroup> possono essere usati per creare gruppi di colonne aggiuntivi.

Inoltre in particolare sarĂ necessario usare gruppi di colonne aggiuntivi se le colonne da raggruppare non sono contigue oppure non iniziano con una stessa prima colonna. Ad esempio, la seguente struttura HTML di tabella genera tre gruppi diversi di colonne, seguendo tre caratteristiche di base. âœŚColonne 1-2, formattate con allineamento centrale âœŚColonne 3-5, formattate con un allineamento decimale âœŚColonne 6-10, formattate con un allineamento a destra e testo in grassetto

Es. <table> <colgroup span="2" align="center"> (Questo gruppo contiene le colonne 1-2) </colgroup> <colgroup span="3" align="char" char="."> (!Questo gruppo contiene le colonne 3-5) </colgroup> <colgroup span=“5” align=“right” style=“font-weight: bold;” > (!questo gruppo contiene le colonne 6-10) </colgroup> ….

I gruppi di colonne non hanno attributi di formattazione predefiniti nei tag <colgroup>. Questo tag eredita la formattazione standard delle colonne all’interno di una tabella. Tuttavia il gruppo viene ancora definito come gruppo e pertanto risponde a quegli attributi di tabella che influenzano i gruppi (ad es. rules="groups", ecc.). Cosa si può fare nel caso in cui si desideri che tutte le colonne all’interno di un gruppo vengano formattate allo stesso modo? Ad esempio, in un gruppo di 3 colonne, si desidera che la colonna centrale (la numero 2 del gruppo) contenga un testo in grassetto. In

questo caso sarà necessario utilizzare il tag <col> per definire individualmente l’aspetto delle colonne. Ad esempio per formattare un gruppo partendo dall’esempio di struttura sopra citato, si può utilizzare la seguente struttura di tabella: <table> <colgroup span="3"> (!questo gruppo contiene le colonne 1-3) <col></col> <col style="font-weight: bold;"></col> <col></col> </colgroup> ...

Il tag <col> risponde a regole simili quelle del tag <colgroup>: ✦I tag vuoti (senza elementi di formattazione) sono semplici contenitori ✦E’ necessario definire le colonne secondo un ordine preciso e per gruppi contigui, usando i tag <col> dove necessario. ✦Tag <col> vuoti o mancanti ereditano la formattazione standard delle colonne della tabella.

E’ inoltre importante notare che il tag <col> non ha un tag di chiusura. Tuttavia in XHTML anche il tag <col> deve essere chiuso attraverso l’inserimento del tag </col>. Definizione di colonne attraverso gli elementi <colgroup> e/o <col> non eliminano o cambiano la necessità di utilizzo dei tag <td>, che creano realmente le colonne di una tabella HTML. Pertanto è importante fare attenzione nel posizionamento delle marcature <td> per assicurarsi un appropriato posizionamento dei dati all’interno delle colonne.

FINE LEZIONE

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.