Come rendere Responsive l'HTML di una tabella per visualizzarla correttamente anche da mobile.

Come pubblicare tabelle Responsive Design Personalizzate in modo che possano essere viste correttamente da desktop, da tablet e da smartphone.

Ho ricevuto un commento sulla personalizzazione nell'aspetto e nei colori di una tabella HTML che mi ha dato lo spunto per trovare una soluzione e rendere Responsive anche questo oggetto HTML. Quando di inseriscono dei valori fissi della larghezza i browser siano essi per il desktop o per il mobile non possono fare altro che mostrare l'oggetto con tale dimensione. Il risultato è che una tabella impostata con larghezza anche di solo 500 pixel uscirà fuori dalla larghezza del post se visualizzata con un cellulare.

Il trucco sarà quindi quello di non impostare mai valori assoluti di larghezza ma eventualmente solo valori percentuali. Possiamo per esempio creare una tabella di tre colonne con la prima che abbia una larghezza del 20%, la seconda del 30% e la terza del 50%. 

Andiamo però per ordine. Partiamo dallo stesso codice di personalizzazione di una tabella che avevo creato nell'articolo linkato a inizio post

table.personale{
width:100%;
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:Helvetia;font-weight:400;
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;
}

che potrà essere personalizzato nei codici dei colori, nella famiglia di font e nello stile del bordo. Con tale codice si  crea una regola CSS per una tabella con classe "personale".  Tale codice può essere incollato nel modello subito sopra alla riga ]]></b:skin> oppure inserirlo tra i tag <style> e </style> e incollarlo in un post subito sopra all'HTML della tabella stessa.

COME CREARE L'HTML DI UNA TABELLA

La creazione di un codice per una tabella che abbia un Responsive Design tramite Open Live Writer è difficoltosa perché questo software inserisce automaticamente le larghezze assolute con il tag width. Per risolvere useremo il software gratuito BlueGriffon (Installa BlueGriffon). Dopo averlo aperto si va su Inserisci > Tabella quindi si sceglie il numero di righe e di colonne 

Si digitano gli elementi nelle varie celle per creare la tabella senza intestazione



Si clicca su Sorgente per visualizzare l'HTML della tabella

nel tag <table> si eliminano gli attributi inseriti e si aggiunge class="personale" per richiamare la regola della tabella. Inoltre si incolla un codice come il seguente, per una intestazione

<tr>
      <th>Intestazione1</th>
      <th>Intestazione2</th>
      <th>Intestazione3</th>     
</tr>

di una tabella a tre colonne, subito dopo il tag <tbody> come mostrato nello screenshot

Adesso si seleziona tutto il codice di BlueGriffon compreso tra <table class="personale"> e </table> . Si va su Ctrl+C per copiarlo quindi si incolla con Ctrl+V nel post  in cui vogliamo che compaia la tabella ovviamente in Modalità HTML.

I CSS come detto possono essere stati incollati nel modello oppure essere aggiunti prima del codice HTML della tabella direttamente nel post. Adesso possiamo pubblicare come al solito.

Come si vede dallo screenshot precedente la tabella si ridimensiona automaticamente secondo la risoluzione del dispositivo con cui viene aperta sia esso un computer, un tablet o uno smartphone.

PERSONALIZZARE LE LARGHEZZE DELLA TABELLA

Con il procedimento visto fino a questo momento le larghezze delle colonne saranno tutte le stesse. Questo però è negativo dal punto di vista estetico e pratico se per esempio nella prima colonna ci fosse solo un numero d'ordine e nell'ultima una descrizione più analitica. Dovremo impostare le differenti larghezze solo tramite percentuale agendo sul codice della Intestazione in questo modo

<tr>
          <th style="width:25%;">Intestazione1</th>
          <th style="width:30%;">Intestazione2</th>
          <th style="width:35%;">Intestazione3</th>
        </tr>

dove a titolo di esempio sono state scelte delle larghezze rispettivamente del 25%, del 30% e del 35% per le tre colonne. Queste percentuali verranno acquisite automaticamente da tutte le celle. 

Concludo ricordando che si può sempre editare il contenuto della tabella modificando colori, inserendo grassetto, corsivo e evidenziando i contenuti di alcune o di tutte le celle

Il metodo illustrato può essere usato anche dai blog Wordpress. Il CSS invece di essere incollato in Modello > Modifica HTML va inserito nel Tema Wordpress oppure aggiunto direttamente nel post.