Come creare una tabella Responsive con HTML e CSS.

Come creare una tabella responsive con i codici HTML e CSS che sia visibile nello stesso modo da desktop e da mobile e personalizzata nei colori.

Le tabelle sono un oggetto HTML molto usato nelle pagine web. Sono utili per mostrare schede di tecnologia come informazioni su film e serie TV. Vengono inoltre utilizzate per comparazioni di ogni genere e sono generalmente presenti in molti siti web compresi i blog.

Il codice HTML per generare una tabella è piuttosto semplice e ha solo bisogno di alcuni parametri fondamentali che sono il numero di righe, il numero di colonne, la distanza tra le celle, la distanza del contenuto dal bordo della cella e la larghezza della tabella.

Ci possono poi essere tag opzionali per formattare i contenuti all'interno delle celle, per inserire uno sfondo e per mostrare la riga dell'intestazione in modo diverso da quelle della tabella vera e propria.

Se nella tabella sono presenti i valori assoluti della sua larghezza questi, se sono stati calcolati per la versione desktop, mostreranno la tabella tagliata nella versione mobile in caso di larghezza superiore a quella della risoluzione del dispositivo. In questo post vedremo come creare una tabelle responsive passo dopo passo che sarà visualizzata nello stesso modo da desktop e da mobile.

HTLML DI UNA TABELLA

I tag essenziali di una tabella sono <table> per iniziare la tabella, <tr> per l'inizio della riga, <td> per l'inizio della cella insieme alle loro chiusure </table>, </tr> e </td>. I contenuti delle celle della tabella sotto forma di codice HTML vanno inseriti tra i vari tag <td> e </td>. Viene anche usato il tag <tbody> che indica il corpo della tabella. I tag <thead> e <tfoot> non incidono nel layout della tabella e servono quando ci sia da aggiungere una parte alta, per esempio per la descrizione e una parte bassa, per esempio per delle considerazioni.

Si può quindi creare un codice di una tabella anche da soli ma è molto più pratico affidarsi a degli strumenti online. Si può usare per esempio HTML Table Generator

Con il mouse si imposta il numero di colonne e di righe della tabella. In questo strumento viene mostrato prima il numero di colonne rispetto alla prassi anche della notazione matriciale. Se si vuole personalizzare la tabella da soli è meglio lasciare con lo zero i parametri del bordo, della larghezza e del cellpadding.

In basso a destra visualizzeremo il codice di base della tabella in oggetto

Dovremo selezionarlo e copiarlo con il destro del mouse. L'ultima riga è un commento che può essere tralasciato.

COME AGGIUNGERE L'INTESTAZIONE

L'intestazione che si aggiunge con <thead> è molto diversa da quella che si aggiunge con il tag <th> che aggiunge una riga iniziale alla tabella per inserire la descrizione del contenuto delle varie colonne. Il tag <th> viene infatti inserito all'interno di un tag <tr>. Facciamo un esempio pratico.

Dal tool precedente abbiamo copiato il codice di una tabella di 4 righe e 4 colonne. Per mostrare anche l'intestazione, subito sotto il tag <tbody>, dobbiamo aggiungere una riga che abbia lo stesso numero di celle delle righe successive. Il codice allora diventa il seguente con 5 righe e 4 colonne

<table>
<tbody>
<tr>
<th>Intestazione Colonna 1</th>
<th>Intestazione Colonna 2</th>
<th>Intestazione Colonna 3</th>
<th>Intestazione Colonna 4</th>      
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>

I contenuti della tabella andranno inseriti al posto di &nbsp; che indica quello che viene chiamato spazio unificatore o spazio indivisibile, in inglese non-breaking space con acronimo NBSP. Con tale carattere non si manda a capo automaticamente le righe.

Se si incolla un tale codice in Modalità HTML, dopo aver inserito dei contenuti si otterrà questo risultato

L'Intestazione viene mostrata in grassetto. Una tale tabella può essere personalizzata nei colori, nei bordi, nella distanza dai bordi (padding), nei font,  nello sfondo delle righe che possono essere alternati.

Se prima dell'HTML aggiungiamo questo CSS

<style>
table.personale{
width:95%;
font-family:Georgia;
border-collapse: collapse;
border-spacing: 0;
border: 0px solid #bbb;
}
table.personale,table.personale th,table.personale td{
border:1px solid #ddd;
border-collapse:collapse;
}
table.personale td{
padding:15px;
}
.personale th {
padding:7px 10px;
text-align:left;
font-family:Georgia;
font-weight:bold;
font-size:16px;
}
table.personale tr:nth-child(odd){
background-color:#f1f1f1;}
table.personale tr:nth-child(even){
background-color:#fff;}
table.personale th{
background-color:#138679;
color:#fff;
border:1px solid #ddd;}
table.personale th:nth-child(even){
background-color:#138679;
}
</style>

e se sostituiamo <table> con <table class="personale"> otterremo questo risultato

con lo sfondo delle righe con colori alternati. Ovviamente possono essere personalizzati i parametri in rosso che riguardano famiglia di caratteri, codici dei colori, stile del bordo, padding e larghezza in percentuale della tabella (95%) che mostrerà la tabella con larghezza del 95% del layout del dispositivo con cui viene aperta la pagina. La classe personale è puramente indicativa e può essere sostituita da altra espressione.

Un tale codice CSS può anche essere inserito nel modello. Gli utenti di Blogger possono per esempio incollarlo subito sopra alla riga ]]></b:skin> dopo aver tolto i tag <style> e </style> per evitare di inserirlo ogni volta.

Le larghezze delle varie colonne muteranno in funzione della quantità di contenuto presente nelle celle che le compongono. Si possono anche impostare delle larghezze fisse in ogni colonna in questo modo

<tr>
<th style="width:17%;">Intestazione1</th>
<th style="width:21%;" >Intestazione2</th>
<th style="width:25%;" >Intestazione3</th>
<th style="width:32%;" >Intestazione4</th>      
</tr>

Questo però va fatto anche con tutte le altre righe aggiungendoci le percentuali delle rispettive colonne con i tag style e width. Queste impostazioni saranno mantenute anche da mobile oltre che da desktop

Ho pubblicato anche un altro post con informazioni su come realizzare una tabella.