3. HTML: le tabelle – CINQUEPUNTOZERO.it – Full Stack Developer Logbook

Le tabelle sono componenti importanti in HTML: nate agli inizi del Web per impaginare dati, si sono ora indispensabili per gestire i layout grafici.

Tabella HTML di base

<table>
<tr><td>Colonna 1</td><td>Colonna 2</td></tr>
<tr><td>Dato 1,1</td><td>Dato 1,2</td></tr>
<tr><td>Dato 2,1</td><td>Dato 2,2</td></tr>
<tr><td>Dato 3,1</td><td>Dato 3,2</td></tr>
</table>

Tag	Descrizione
<table>	È il contenitore di tutta la tabella e la definisce
<tr>	“table row” Contiene una riga della tabella
<td>	“table data” Una cella che contiene i valori all’interno di una riga

Personalizzare il layout grafico di una tabella

E' possibile includere del codice CSS, attraverso il tag <style>, all'interno dell'html, per dare uno stile più accurato alla nostra tabella html di base

<style>
table {
border-collapse:collapse
}
td, th {
border:1px solid #ddd;
padding:8px;
}
</style>

Il template di una tabella: caption, thead, tbody, tfoot

Per una rappresentazione più chiara dei dati introduciamo un template leggermente più ricco attraverso l'ausilio dei tag caption, thead, tbody, tfoot

<table>
<caption>
<p>I miei dati</p>
</caption>
<thead>
<tr><th>Colonna 1</th><th>Colonna 2</th></tr>
</thead>
<tfoot>
<tr><td>Totale 1</td><td>Totale 2</td></tr>
</tfoot>
<tbody>
<tr><td>Dato 1,1</td><td>Dato 1,2</td></tr>
<tr><td>Dato 2,1</td><td>Dato 2,2</td></tr>
<tr><td>Dato 3,1</td><td>Dato 3,2</td></tr>
</tbody>
</table>

Tag	Descrizione
<caption>	È una didascalia che ci permette di dare una contestualizzazione ai dati e rendere più chiaro il loro significato.
<thead>	Serve per raggruppare le righe che rappresentano l’intestazione della tabella.
<th>	“table header” Indica una cella che contiene un intestazione (ad esempio il titolo di una colonna o di una riga) e serve a dare una definizione dei dati cui si riferisce.
<tbody>	Raggruppa le righe che contengono il corpo della tabella, spesso con i dati veri e propri.
<tfoot>	Racchiude le righe che utilizziamo come footer della tabella, in cui si possono inserire dei dati di riepilogo, somme, medie, etc.

Raggruppare le colonne: colgroup e col

Colgroup: Con il tag <colgroup> possiamo raggruppare le celle di una tabella per colonna
I gruppi vengono creati prendendo le colonne di sinistra verso la colonna destra.
Il numero di colonne da considerare lo indichiamo grazie all’attributo span

<table>
<colgroup id="a" span="3"></colgroup>
<thead>
<tr><th>head</th><th>head</th><th>head</th><th>head</th><th>head</th><th>head</th></tr>
</thead>
<tbody>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
</tbody>
</table>

Questo ed il successivo tag sono utili per la personalizzazione successiva del layout grafico, infatti, grazie alla definizione di un sezione identificata da un ID, univoco, sarà possibile richiamarli nel nostro css

 <style>
table {
border-collapse:collapse
}
td, th {
border:1px solid #ddd;
padding:8px;
        }
        #a {
background: red;
        }

Col: Con il tag <col> possiamo delineare/definire singole colonne o sotto gruppi all’interno di un gruppo già definito/formato con il tag <colgroup>

<table>
<colgroup id="a" span="3">
        <col id="a_colonna1" span="1">
        <col id="a_colonna2" span="1">
        <col id="a_colonna3" span="1">
        </colgroup>
    <colgroup id="b" span="3">
        <col id="b_colonna1" span="1">
        <col id="b_colonna2" span="1">
        <col id="b_colonna3" span="1">
        </colgroup>

Nel codice qui sopra abbiamo definito dei gruppi di colonne (colgroup) a & b e delle colonne singole (col) al loro interno a_colonna1, a_colonna2 ecc.

<style>
table {
border-collapse:collapse
}
td, th {
border:1px solid #ddd;
padding:8px;
        }
        #a_colonna1 {
background: red;
        }
        #a_colonna2 {
background: green;
        }
        #a_colonna3 {
background: yellow;
        }
        #b_colonna1 {
background: red;
        }
        #b_colonna2 {
background: green;
        }
        #b_colonna3 {
background: yellow;
        }
        
</style>

Il risultato adoperando il css qui sopra sarà il seguente

Cosi come editato in precedenza il codice html potrei omettere nel CSS la definizione delle singole colonne e sfruttare solo i tag colgroup

Note: Lo span nelle colonne singole COL, all'interno del gruppo di colonne COLGROUP, è sempre "1" in quanto la selezione è progressiva ( ovvero viene selezionata la colonna libera successiva alla prima già definita.
Questo è sempre valido anche per la definizione successiva di una altro elemento COLGRUP A COLGRUOP B