Per prima cosa vorrei mostrarti come è possibile connettere le celle all'interno di una riga in colonne. In questo modo si ottiene il risultato che una colonna all'interno della riga interessata si estende su più colonne.
Un esempio:
<table border="1">
<tr>
<th colspan="2">Date</th>
</tr>
<tr>
<td>11.4.2014</td>
<td>12.4.2012</td>
</tr>
<tr>
<td>13.4.2014</td>
<td>14.4.2014</td>
</tr>
<tr>
<td>15.4.2014</td>
<td>16.4.2014</td>
</tr>
</table>Prima di tutto una parola sull'elemento th utilizzato qui. Con questo elemento si indicano le celle dell'intestazione. I browser generalmente mostrano queste celle in grassetto e al centro. E qui il risultato nel browser:
All'interno del tag iniziale th viene impostato l'attributo colspan. Come valore viene attessa la quantità di colonne su cui la cella attuale dovrebbe estendersi. Fate attenzione a specificare correttamente il numero di colonne, altrimenti potrebbero verificarsi risultati non desiderati. Nell'esempio presentato, è previsto che l'intestazione contrassegnata da th si estenda su due colonne. All'interno delle altre due righe ci sono di nuovo due righe ciascuna.
Un'osservazione aggiuntiva riguardante la connessione tra le righe. Assegna un bordo (border) alle tabelle durante la fase di sviluppo. In questo modo vedrai subito se la connessione funziona effettivamente come desiderato.
Collegare le celle in una colonna in modo orizzontale
Attraverso l'attributo rowspan è possibile connettere più celle in una colonna. La cella interessata si estende quindi su più righe all'interno della colonna. Anche qui un esempio:
<table border="1">
<tr>
<th rowspan="2">Colore</th>
<td>Blu</td>
</tr>
<tr>
<td>Verde</td>
</tr>
<tr>
<th rowspan="2">Dimensione</th>
<td>1,70</td>
</tr>
<tr>
<td>1,80</td>
</tr>
</table>Nel browser appare così:
All'attributo rowspan viene assegnato un valore numerico. Questo determina alla fine il numero di righe all'interno di una colonna su cui una cella dovrebbe estendersi. Anche qui, naturalmente, è importante specificare correttamente il numero di righe specificato.
Collegare contemporaneamente le celle in modo verticale e orizzontale
I due attributi rowspan e colspan possono anche essere combinati insieme. In questo modo è possibile definire celle che si estendono contemporaneamente su più righe e colonne. Anche questo è meglio illustrato attraverso un esempio.
<table border="1">
<tr>
<th colspan="2" rowspan="2">Appartamento</th>
<td>5 camere</td>
</tr>
<tr>
<td>154 mq</td>
</tr>
<tr>
<td>Charlottenburg</td>
<td>Parcheggio</td>
<td>Riscaldamento a pavimento</td>
</tr>
</table>
Un'occhiata al browser mostra il seguente risultato:
Nella combinazione dei due attributi è ovviamente necessaria attenzione, affinché alla fine il numero di celle sia effettivamente corretto.
Etichettare le tabelle
Un'opzione molto interessante per rendere le tabelle più comprensibili è offerta dall'elemento caption. Permette di aggiungere un'intestazione o una legenda a una tabella. Il contenuto di caption viene mostrato al di fuori della tabella, anche se la definizione avviene all'interno della tabella stessa.
Ecco un'applicazione tipica per caption:
Al di sopra della tabella viene mostrata un'intestazione della tabella. Di default, l'intestazione è centrata sopra la tabella. Naturalmente questo può essere personalizzato individualmente tramite CSS.
L'elemento caption viene definito direttamente dopo il tag iniziale <table>.
Ecco la sintassi completa dell'esempio mostrato in precedenza:
<table border="1">
<caption>Dati Media</caption>
<colgroup><col /><col /><col /><colgroup>
<thead>
<tr>
<th>Argomento</th>
<th>Visualizzazioni</th>
<th>Tendenza</th>
</tr>
<thead>
<tfoot>
<tr>
<td colspan="3">Aggiornato a giugno 2014</td>
</tr>
<tfoot>
<tbody>
<tr>
<td>HTML5</td>
<td>12.245</td>
<td>+</td>
</tr>
<tr>
<td>CSS3</td>
<td>12123</td>
<td>+</td>
</tr>
<tr>
<td>JavaScript</td>
<td>11.546</td>
<td>+</td>
</tr>
</tbody>
</table>Creazione di tabelle
Per la formattazione delle tabelle esistevano numerosi attributi nelle versioni precedenti dell'HTML. Ecco alcuni esempi di cose che potevano essere regolate mediante attributi. (Ovviamente i browser supportano ancora oggi questi attributi. Tuttavia, in HTML5 non dovrebbero più essere utilizzati).
• Bordo esterno
• Bordi interni delle celle
• Indicazioni di larghezza e altezza
• Linee della griglia
• Allineamento dei contenuti delle celle
• Colori
• Immagini di sfondo
Vedete quindi che in realtà è possibile controllare tutto tramite i rispettivi attributi HTML. L'esempio seguente mostra una tabella in cui queste possibilità sono state ampiamente sfruttate:
<table border="1">
<tr>
<td width="200" height="100" bgcolor="#999933">Uno</td>
<td width="200" bgcolor="#00ffff">Due</td>
<td width="200">Tre</td>
</tr>
<tr bgcolor="#ff00ff">
<td height="100">Quattro<</td>
<td bgcolor="#996666">Cinque</td>
<td bgcolor="#003333">Sei</td>
</tr>
</table>
Guardando il risultato si ottiene il risultato desiderato.
Anche se sembra che sia come dovrebbe essere, la sintassi sottostante è tutto fuorché efficiente. È meglio gestire le proprietà delle tabelle tramite CSS. Grazie alle nuove proprietà CSS, non solo è possibile sostituire i vecchi attributi con una sintassi moderna, ma sono anche realizzabili funzionalità aggiuntive. Ad esempio, è ora molto semplice alternare i colori delle righe delle tabelle.
Nel passato, durante l'HTML e il CSS, per ottenere un tale risultato occorreva compiere a volte enormi contorsioni nel codice. Se si sfruttano costantemente le possibilità offerte attualmente dal CSS, tutto ciò è facilmente realizzabile.
tr:nth-child(even) {
background-color: #fd9d5d;
}
tr:nth-child(odd) {
background-color: #c0f390;
}
table {
border-spacing: 0px;
}
Come già detto più volte, affronterò dettagliatamente il CSS nel contesto di questa serie.
