Supporto volontario e collaborativo per Joomla!® in italiano

Tabelle Responsive

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Foglio di Calcolo Tabella ResponsiveCercando una soluzione per un Sito Web Joomla! (ma il problema riguarda qualunque sito Web) in cui serviva una Tabella, mi sono scontrato con il problema che questa non risultava "responsive", ovvero non si adattava correttamente quando veniva visualizzata su Tablet o Smarphone.

Ho trovato una soluzione abbastanza semplice a questo Link. La soluzione ovviamente prevede l'utilizzo dei DIV al posto delle Tabelle, e l'ausilio dei CSS; occorre nominare le classi dei vari DIV per associarli ai CSS e la soluzione più ovvia è quella di usare la stessa denominazione che si usa nelle tabelle in HTML.

Qualcuno potrebbe obiettare che non è perfettamente responsive, ma è sicuramente meglio di niente :-)
 
Se la tabella è piccola, il codice si può scrivere a mano.
Se è grande... pure, ma avere un sistema per generare il codice in modo quasi automatico, non è una brutta idea.

Ho creato quindi un foglio di calcolo (vedi in fondo all'articolo) che, permette di ottenere questo codice; occorre semplicemente eseguire queste operazioni:
  • Dare il nome alla tabella (nel sito può essere necessaria più di una tabella con parametri differenti, quindi serve del codice CSS univoco)
  • Inserire il contenuto della tabella (se voglio della formattazione, es un grassetto, non devo usare la formattazione del foglio di calcolo, ma i tag html )
  • Adattare le celle della Zona Gialla in modo che abbiano lo stesso numero di righe della tabella dei dati, più quella di chiusura e le stesse colonne (vedere dopo).
  • Sistemare/adattare il codice CSS, nella zona Arancione (se avete aumentato il numero di colonne), usando le celle adiacenti di colore Verde.
  • Selezionare la Zona Gialla (che contiene il codice HTML) usare la funzione copia, quindi incollare il codice nell'editor testuale di Joomla! (per editor testuale, intendo quello non WISYWING) e salvate l'articolo.
  • Selezionate ora la zona Arancione (con il codice CSS), e incollatelo nel vostro custom.css o in un altro file css usato dal Template di Joomla!
  • Aggiornate la pagina sul front-end e verificate se la tabella si sta ridimensionando correttamente.

Passiamo alla spiegazione di quello che è stato fatto in questo foglio di calcolo.
Premetto che il file che allego in fondo all'articolo (TabellaResponsive.ods) è stato generato con Calc di LibreOffice, ma può essere aperto anche con Calc di Apache OpenOffice. Può essere aperto anche con le versioni più recenti di Microsoft Excel, ma per sicurezza allego anche un file già in formato Excel (TabellaResponsive.xls).

Ho assegnato dei nomi ad alcune celle del foglio di calcolo; ad esempio il nome da dare alla Tabella che stiamo generando, si trova nella cella _nomeTab;  questo nome è verrà usato come SUFFISSO per tutte le classi (nell'esempio allegato ho messo _listino) e renderà possibile nello stesso sito e/o articolo, usare più tabelle, anche con caratteristiche differenti.

Viene quindi determinato il nome della classe da dare al DIV più esterno (table_SUFFISSO), alle righe (tr_SUFFISSO).
Ugualmente viene determinato il nome delle classi da dare alle celle (td1_SUFFISSO, td2_SUFFISSO, etc). A questo nome occorre prestare attenzione se si creano nuove colonne (vedi piu sotto "Eventuali Modifiche al Numero delle Colonne" ).

Una volta compilata la Tabella con i dati, sarà sufficiente:

  • Selezionare la Zona colorata in Giallo, ovvero quella dove viene generato il codice
  • Usare la funzione Copia
  • Incollare il testo nell'Editor testuale di Joomla!
Se state usando come editor WISYWING TinyMCE, all'esterno della cornice dell'Editor, in basso a destra, trovate il pulsante [Editor si/no], per disattivare la funzionalità WISYWING; individuate il punto corretto in cui inserire il codice e incollatelo. Se invece usate JCE trovate un analogo pulsante in alto a sinistra. Purtroppo il testo non esce molto ben formattato, ma al limite si sistema a mano, anche se non è necessario.

NOTA: Le celle nella zona Gialla nel foglio di calcolo sono strette per semplicità di selezione, ma contengono tutto il codice che serve. Volendo si possono allargare per vedere meglio il codice generato.


Il codice CSS
Ora occorre estrarre il codice CSS per la tabella. Basta selezionare e copiare la Zona Arancione e incollarla nel file di testo che contiene il CSS del Template selezionato. Generalmente, per queste operazioni si usa il file custom.css e dovrebbe trovarsi in:

     /template/NOME_DEL_TEMPLATE/css/custom.css

Assicuratevi che il file custom.css venga caricato dal Template e, nel caso non lo sia, modificate di conseguenza il Template. In alternativa usate uno dei file .css che viene usato dal Template. In ogni caso prestate attenzione nel caso occorra fare un aggiornamento del Template, altrimenti le modifiche potrebbero andar perse.
Incollate il codice nel file, salvatelo e inviatelo tramite FTP sul server.

A questo punto aggiornate/visualizzate la pagine del frontend che avete modificato e verificate se la tabella si ridimenziona correttamente restringendo la finestra.
Consiglio: se usate Mozilla Firefox, premete la combinazione di Tasti: [Ctrl]+[Shift]+[M] e ridimensionate il riquadro, senza dover ridimensionare tutta la finestra di Firefox. Inoltre avete anche la possibilità di vedere la grandezza in pixel del riquadro, man mano che lo dimensionate. Non solo, potete specificare una dimensione ben precisa fra quelle disponibili, cambiare da verticale a orizzontale e fare uno screenshoot.

Un esempio della Tabella Responsive
Dato che non posso modificare il custom.css di joomla.it, non posso mostrare un esempio all'interno dell'articolo, ma posso indicare un link ad una tabella.html.

Modifiche al numero delle Colonne

Per semplicità, la tabelle usata nell'esempio ha 3 colonne e 8 righe.
Le colonne e le righe possono essere aumentate (o diminuite) a piacimento, facendo dei semplici copia e incolla. La procedura è un po complessa, ma chi ha familiarità con i fogli di calcolo e e l'utilizzo delle formule, non avrà difficoltà; occorre prestare attenzione, specie quando si lavora nella Zona Gialla e Arancione, dato che contengono le formule per generare il codice.
In particolare, se si aumentano le colonne, ad esempio si portano da 3 a 4, occorre:
  • inserire una nuova colonna, nella Zona dei Dati
    • copiare l'ultima colonna (n) nella nuova colonna (n+1)
    • modificare l'etichetta Colonna n in Colonna n+1 e , nella cella verde, il nome della colonna da tdn a tdn+1 (cioè se prima era td3 diventa td4)
    • selezionare la cella immediatamente sotto (si legge 'tdn+1_SUFFISSO')e dargli il nome: andate in alto a sinistra in corrispondenza della riga della formula, trovare il nome della cella come coordinata Lettera+Numero (es. D09) e scrivete _tdn+1 (quindi se è la quarta colonna _td4)
Tabelle Responsive, inserimento colonna dati
  • inserire una nuova colonna nella Zona Gialla, tra l'ultima colonna n (nell'esempio TD3) e la colonna /TR
    • copiare il contenuto della colonna n nella colonna n+1
    • modificare il nome della Colonna da TDn a TDn+1 e, nella prima cella, la formula da _tdn a _tdn+1 (cioè se prima era _td3 diventa _td4)
    • copiare quella prima cella modificata in tutte le celle sottostanti
    • adattare le percentuale delle colonne (non arrivare a 100%, vedi dopo)
Tabelle Responsive, inserimento colonna codice HTML
  • nella Zona Arancione, individuare il codice relativo a tdn_suffisso
    • selezionare le celle sottostanti (fino alla chiusura con la parentesi graffa) e selezionare anche le celle nelle righe corrispondenti, nella adiacente Zona Verde
    • copiarle ed incollarle immediatamente sotto
    • quindi modificare, nella zona verde, il valore .tdn in .tdn+1  (es. .td3 diventa .td4).
Tabelle Responsive, inserimento colonna codice CSS


Nella Zona Verde, ci sono dei riquadri Ciano, sono solo dei collegamenti al nome della Tabella, che non vanno modificati. Le altre altre celle invece si possono personalizzare a piacimento (ad esempio cambiare il colore o lo bordo del bordo, l'allineamento etc.

NOTA 1: Per mia convenzione, da sempre uso far precedere il nome delle celle nei fogli di calcolo dal simbolo underscore; non è obbligatorio, ma permette di individuare facilmente quando ci si riferisce a nomi delle celle.
 
NOTA 2: Forse è un problema del Template che sto usando ora, ma se la somma delle percentuali relative alla grandezza delle colonne raggiunge 100, l'ultima cella di ogni riga, va a capo; Per ora ho risolto semplicemente facendo in modo che la somma sia inferiore a 100.

Download dei fogli di Calcolo
Potete scaricare il file di esempio da questi link su DropBox:


CommentaCommenta questo articolo sul forum

Ho scritto e condiviso questo articolo su Joomla.it, fallo anche tu. Invia ora un nuovo articolo!
Daniele Pinna
Alcune informazioni su di me:
Sono un appassionato di Tecnologia e di Informatica.

Nonostante i miei studi siano stati di tutt'altro genere (sono diplomato Geometra), questa passione mi ha portato, nel 2004, ad avviare una Attività come Laboratorio di Informatica.

Mi occupo quindi di Assistenza e Vendita di Computer e Accessori, realizzo programmi per PC e Siti Web (prevalentemente con il CMS Joomla!).


Ho anche scritto:
         ✔ diventa autore su Joomla.it

Ultima versione di Joomla!®

downloadVer. 3.6.2 Stabile Italiana
Data di rilascio:4 Agosto 2016
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: