8. Lezione: le tabelle
Scritto da sergio il 12/05/2009 09:23:10
Quando usare la struttura di tabella in una pagina html? Quando ci serve... una tabella!!!
Non ho detto una cosa così banale... le tabelle sono struttura ordinate di dati su più righe e colonne e i tag messi a disposizione dall'html per costruire questo elemento dovrebbero essere utilizzati solo a questo scopo.
In passato invece (ma ancora adesso), questa struttura veniva usata anche per costruire i layout della pagina appensantendo inutimente il documento web che viaggia in rete.
Molti software di creazione pagine web traducono un layout creato sull'editor con tag di creazione di tabelle... orrore!!
Di come creare layout di pagina tratteremo nel corso sui CSS e in maniera approfondita, ricordo ancora un volta: html = contenuto, css = stile e layout.
La definizione di una tabella in html inizia con il tag <table> e ovviamente si conclude con </table>.
All'interno di questo tag vengono definite, prima le righe con <tr> (table row) e </tr>, e ancora all'interno, le singole celle con <td> (table data) e </td>. All'interno di questo ultimo tag scrivere il dato contenuto nella cella, numeri, parole, immagini, quello che vogliamo.
Questa descritta e riepilogata qui sotto è la versione più semplice di una tabella:
...
<table>
<tr>
<td>Riga1 Cella1</td>
<td>Riga1 Cella2</td>
<td>Riga1 Cella3</td>
</tr>
<tr>
<td>Riga2 Cella1</td>
<td>Riga2 Cella2</td>
<td>Riga2 Cella3</td>
</tr>
</table>
...
Spesso, però, potremmo avere bisogno di una prima riga in cui mettere le intestazioni delle colonne. Ci viene in aiuto il tag <th> (table header). Il browser interpreta questa necessità visualizzando in maniera evidenziata (normalmente grassetto) il contenuto di questo tag.
Con la riga di intestazione l'esempio precedente diventa:
...
<table>
<tr>
<th>Colonna1</th>
<th>Colonna2</th>
<th>Colonna3</th>
</tr>
<tr>
<td>Riga1 Cella1</td>
<td>Riga1 Cella2</td>
<td>Riga1 Cella3</td>
</tr>
<tr>
<td>Riga2 Cella1</td>
<td>Riga2 Cella2</td>
<td>Riga2 Cella3</td>
</tr>
</table>
...
Ancora meglio sarebbe dividere in senso logico la nostra tabella. Alcune righe potrebbero rappresentare l'intestazione, altre il corpo vero e proprio della tabella con i dati e infine potremmo avere una parte finale con totali di colonna o altre notazioni (un footer in pratica). Ci aiutano i tag <thead>, <tbody> e <tfoot>.
...
<table>
<thead>
<tr>
<th>Colonna1</th>
<th>Colonna2</th>
<th>Colonna3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Riga1 Cella1</td>
<td>Riga1 Cella2</td>
<td>Riga1 Cella3</td>
</tr>
<tr>
<td>Riga2 Cella1</td>
<td>Riga2 Cella2</td>
<td>Riga2 Cella3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer Colonna1</td>
<td>Footer Colonna2</td>
<td>Footer Colonna3</td>
</tr>
</tfoot>
</table>
...
Per rendervi conto meglio di come viene costruita una tabella dall'html potete usare un attributo del tag <table> e cioe' "border", questo attributo, intuitivamente, disegna un bordo e lo fa attorno a tutte le celle della tabella.
...
<table border="1">
...
Consiglio di usare questo attributo a solo scopo didattico, per la comprensione dei tag esposti. Per dare invece uno stile alle vostre tabelle rivolgetevi anche in questo caso ai CSS. I fogli di stile sulle tabelle possono controllare qualsiasi aspetto grafico, dal tipo di bordo, agli elementi a cui applicarlo, dal colore di sfondo di tutta la tabella o solo di alcune celle, ecc...
Lo stile puo' essere applicato all'intera tabella (cioe' al tag <table>, alla singola riga (tag <tr>) o alla singola cella (tag <td>), ma al solo scopo di applicare uno stile possiamo identificare anche una singola colonna o un gruppo di colonne con i tag <col> e <colgroup>. Queste colonne o gruppi di colonne vanno definiti subito dopo il tag <table>:
...
<table>
<col align="left"></col>
<col align="left"></col>
<col align="right"></col>
<tr>
...
In questo esempio definiamo le nostre 3 colonne, le prime 2 con un allineamento del testo a sinistra e la terza con l'allineamento a destra. Dopo la definizione dello stile delle colonne, come vediamo, iniziano le righe.
...
<table>
<colgroup span="2" align="left"></colgroup>
<colgroup align="right" style="color:#0000FF;"></colgroup>
<tr>
...
Qui, invece, definiamo lo stile per gruppi di colonne. Il primo stile riguarda le prime 2 colonne (span="2") e prevede l'allineamento a sinistra. Il secondo stile riguarda la terza colonna, con allineamento a destra e colore del testo blu.
Un ultimo tag "simpatico" e' <caption> che definisce un titolo per la tabella. Anche questo deve essere usato dopo il tag <table> e visualizza il titolo sopra la tabella:
...
<table>
<caption>Titolo della tabella</caption>
<tr>
...
Tutti i tag elencati possiedono un buon numero di attributi, ma io vi esorto a ricordare solo i soliti "style" e "class" che in combinazione con i CSS permettono di fare tutto, come vedremo nell'altro corso.
Qui esporremo solo alcuni attributi che invece servono non per lo stile, ma per la costruzione di tabelle "particolare" dove righe e colonne non costrituiscono sempre un normale reticolato, ma dobbiamo creare celle che si estendono su piu' righe o piu' colonne.
A tal scopo esistono gli attributi "colspan" e "rowspan".
...
<table border="1">
<tr>
<td>Riga1 Cella1</td>
<td>Riga1 Cella2</td>
<td>Riga1 Cella3</td>
</tr>
<tr>
<td colspan="2">Riga2 Cella1 e 2</td>
<td>Riga2 Cella3</td>
</tr>
</table>
...
In questo esempio la prima cella della seconda riga occupa 2 colonne, ovviamente non deve piu' essere indicato il <td> della "Riga2 Cella2".
...
<table border="1">
<tr>
<td rowspan="2">Riga1 e 2 Cella1</td>
<td>Riga1 Cella2</td>
<td>Riga1 Cella3</td>
</tr>
<tr>
<td>Riga2 Cella2</td>
<td>Riga2 Cella3</td>
</tr>
</table>
...
Qui invece la prima cella della prima riga si "allunga" anche sulla seconda riga. Anche qui, ovviamente, sul secondo <tr> non deve essere indicato il <td> della prima colonna.
Divertitevi a creare le vostre tabelle... e se questo argomento vi e' sembrato complesso, tranquilli... ora inizia il peggio!!
Alla prossima!
Ultimo aggiornamento 11/01/2020 10:39:34