Come creare tabelle responsive nell’editor di WordPress

Le tabelle sono uno strumento molto utile per organizzare informazioni, confrontare prodotti, mostrare prezzi, presentare caratteristiche tecniche e rendere più leggibili i contenuti di un sito web. Il problema nasce quando una tabella viene visualizzata su smartphone: le colonne possono diventare troppo strette, il testo può andare a capo in modo disordinato e una parte dei dati può uscire dai bordi dello schermo.

Per evitare questi inconvenienti è importante creare tabelle responsive su WordPress, cioè tabelle capaci di adattarsi alle dimensioni dello schermo utilizzato dal visitatore.

WordPress mette a disposizione un blocco Tabella nell’editor Gutenberg, ma non sempre le sue opzioni sono sufficienti per gestire tabelle complesse sui dispositivi mobili. In questi casi è possibile intervenire con le impostazioni del blocco, con il CSS personalizzato oppure con un plugin dedicato.

Vediamo le soluzioni più efficaci, partendo da quelle più semplici. 📱💻

📊 Che cosa significa avere una tabella responsive?

Una tabella responsive è progettata per essere leggibile su schermi di dimensioni differenti, dai monitor dei computer ai tablet e agli smartphone.

Una tabella con molte colonne può essere perfettamente leggibile su un computer, ma risultare praticamente inutilizzabile su uno smartphone. Le celle diventano troppo strette, le parole vengono spezzate e il visitatore è costretto a ingrandire continuamente la pagina.

Una tabella responsive può risolvere il problema in diversi modi:

• adattando le larghezze delle colonne allo spazio disponibile;
• consentendo lo scorrimento orizzontale quando i dati sono numerosi;
• riducendo opportunamente spaziature e dimensioni del testo;
• utilizzando un layout alternativo per gli schermi più piccoli, quando il contenuto lo consente.

Non esiste una soluzione universale: la strategia migliore dipende dalla quantità di informazioni, dal numero di colonne e dal tipo di dati da visualizzare.

🧱 1. Creare una tabella con l’editor Gutenberg

Il metodo più immediato consiste nell’utilizzare il blocco Tabella integrato nell’editor di WordPress.

Per creare una tabella:

1. Aprire la pagina o l’articolo che si desidera modificare.
2. Fare clic sul pulsante per aggiungere un blocco.
3. Cercare Tabella.
4. Selezionare il numero iniziale di righe e colonne.
5. Inserire i dati nelle celle.
6. Utilizzare le impostazioni del blocco per aggiungere un’intestazione, modificare l’allineamento o intervenire sull’aspetto, quando le opzioni disponibili lo consentono.

Per esempio, una tabella comparativa potrebbe contenere tre colonne: prodotto, prezzo e caratteristiche.

Prodotto	Prezzo	Caratteristiche
Modello A	49 €	Funzioni essenziali
Modello B	79 €	Funzioni avanzate
Modello C	99 €	Dotazione completa

Per rendere la tabella più accessibile, è opportuno utilizzare la riga d’intestazione quando serve a identificare il significato delle colonne.

Attenzione: il blocco Tabella standard non offre necessariamente tutte le funzionalità responsive richieste per tabelle particolarmente larghe. Prima di pubblicare, è quindi importante verificare il risultato su uno smartphone reale o tramite gli strumenti di anteprima del browser.

📱 2. Gestire le tabelle larghe su smartphone con lo scorrimento orizzontale

Quando una tabella contiene molte colonne, cercare di far entrare tutto nello spazio di uno smartphone può peggiorare notevolmente la leggibilità.

In questi casi, una soluzione pratica è consentire lo scorrimento orizzontale: il visitatore può scorrere la tabella lateralmente per leggere le colonne che non sono immediatamente visibili.

Questa tecnica è particolarmente utile per:

• confronti tra prodotti;
• listini e tabelle di prezzi;
• specifiche tecniche;
• orari e calendari;
• tabelle con numerosi campi.

Per ottenere questo comportamento si può racchiudere la tabella in un contenitore con overflow-x: auto. Il contenitore mostra una barra di scorrimento quando il contenuto supera la larghezza disponibile, senza allargare l’intera pagina.

Il blocco Tabella di Gutenberg non espone necessariamente un’opzione specifica per aggiungere questo contenitore. Se il tema o un plugin non gestisce già il comportamento, è possibile intervenire con il CSS e con una struttura HTML appropriata.

Esempio di codice HTML per una tabella scorrevole

Il seguente esempio mostra la struttura da utilizzare quando si può inserire HTML personalizzato nell’editor di WordPress.

<div class="tabella-responsive">
  <table>
    <thead>
      <tr>
        <th>Prodotto</th>
        <th>Prezzo</th>
        <th>Memoria</th>
        <th>Connettività</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Modello A</td>
        <td>199 €</td>
        <td>128 GB</td>
        <td>Wi-Fi</td>
      </tr>
      <tr>
        <td>Modello B</td>
        <td>299 €</td>
        <td>256 GB</td>
        <td>Wi-Fi e 5G</td>
      </tr>
    </tbody>
  </table>
</div>

In questo esempio, la tabella è inserita in un contenitore identificato dalla classe tabella-responsive. La classe verrà utilizzata nel CSS per attivare lo scorrimento.

Il codice va inserito in un blocco HTML personalizzato dell’editor Gutenberg, non nel normale blocco Paragrafo.

🎨 3. Aggiungere il CSS per rendere la tabella responsive

Dopo aver creato la struttura HTML, bisogna applicare le regole CSS che permettono alla tabella di adattarsi al contenitore.

Un possibile esempio è il seguente:

.tabella-responsive {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabella-responsive table {
  width: 100%;
  border-collapse: collapse;
}

.tabella-responsive th,
.tabella-responsive td {
  padding: 10px 12px;
  border: 1px solid #ddd;
  text-align: left;
}

.tabella-responsive th {
  font-weight: 700;
}

Questo codice permette al contenitore di occupare al massimo la larghezza disponibile e di attivare lo scorrimento orizzontale quando necessario.

La regola border-collapse: collapse evita che i bordi delle celle risultino separati, mentre padding aggiunge spazio interno per migliorare la leggibilità.

Dove inserire il CSS in WordPress?

Se il tema lo consente, è possibile aggiungere il codice da:

Aspetto > Personalizza > CSS aggiuntivo

La voce potrebbe non essere presente in tutti i temi. Nei temi a blocchi, l’organizzazione delle opzioni può essere differente; in alternativa si può utilizzare un plugin dedicato alla gestione del CSS personalizzato.

È consigliabile applicare la classe soltanto alle tabelle che devono avere questo comportamento, evitando regole generiche che potrebbero modificare tutte le tabelle del sito.

Prima di intervenire sul codice, è opportuno effettuare un backup o provare le modifiche su una pagina di test.

🧩 4. Rendere responsive il blocco Tabella standard senza riscrivere tutto

Se si utilizza già il blocco Tabella di Gutenberg, potrebbe non essere necessario ricreare ogni tabella in HTML.

Si può verificare se il tema, un plugin o una funzione già presente nel sito aggiunge un comportamento responsive al blocco. In caso contrario, si può valutare una soluzione CSS mirata, purché il markup generato da WordPress sia compatibile con il selettore utilizzato.

Per esempio, una regola applicata a una classe personalizzata può essere più sicura di una regola che seleziona indiscriminatamente tutte le tabelle.

Il punto importante è che il CSS da solo non può sempre creare un contenitore di scorrimento attorno a una tabella già esistente. Se manca un elemento contenitore appropriato, potrebbe essere necessario modificare la struttura del blocco, utilizzare una soluzione JavaScript compatibile oppure scegliere un plugin che gestisca automaticamente questa funzione.

Prima di adottare una soluzione, controllare il codice generato dal blocco e verificare il comportamento sul sito pubblicato.

🔌 5. Utilizzare un plugin per creare tabelle responsive

Per chi non desidera intervenire sul codice, un plugin può rappresentare la soluzione più comoda. Alcuni strumenti permettono di creare tabelle attraverso un’interfaccia visuale, importare dati da fogli di calcolo e configurare il comportamento su dispositivi mobili.

Tra le soluzioni da valutare ci sono:

TablePress

È un plugin dedicato alla creazione e gestione di tabelle in WordPress. Consente di organizzare i dati, modificare le tabelle tramite un’interfaccia dedicata e inserirle nei contenuti. Le funzioni responsive più avanzate possono dipendere dalle estensioni disponibili e dalla versione utilizzata.

Sito ufficiale: https://tablepress.org/

wpDataTables

È uno strumento per creare tabelle e grafici a partire da dati inseriti manualmente o importati da diverse fonti. Offre opzioni avanzate per gestire tabelle complesse, ma alcune funzionalità possono essere disponibili soltanto nelle versioni a pagamento.

Sito ufficiale: https://wpdatatables.com/

Prima di installare un plugin, verificare la compatibilità con la versione di WordPress, il tema utilizzato, le funzionalità incluse nella versione gratuita e le eventuali estensioni necessarie per la visualizzazione su smartphone.

È preferibile evitare di installare più plugin che svolgono la stessa funzione: oltre a complicare la gestione del sito, potrebbero introdurre conflitti o duplicare gli stili CSS.

📐 6. Migliorare la leggibilità delle tabelle su smartphone

Lo scorrimento orizzontale non è sempre la scelta migliore. Per tabelle con poche colonne è spesso possibile adattare il contenuto direttamente allo schermo.

Alcuni accorgimenti utili sono:

Ridurre le colonne non indispensabili. Se una tabella contiene molti dati, valutare se alcune informazioni possono essere spostate in un testo introduttivo o in una sezione separata.

Utilizzare intestazioni brevi e chiare. Le intestazioni troppo lunghe occupano spazio prezioso e rendono più difficile confrontare le informazioni.

Evitare larghezze fisse eccessive. Impostare una larghezza rigida in pixel può costringere la tabella a superare lo spazio disponibile.

Mantenere un testo leggibile. Ridurre eccessivamente la dimensione dei caratteri può rendere la tabella inutilizzabile anche se tecnicamente rientra nello schermo.

Valutare un layout alternativo. Per dati semplici, può essere più efficace presentare ogni riga come una piccola scheda su smartphone. Questa soluzione richiede però una struttura e uno stile adeguati, e non è ideale per tutti i tipi di tabella.

L’obiettivo non è semplicemente far entrare tutto nello schermo, ma permettere al lettore di comprendere e confrontare i dati senza fatica.

♿ 7. Accessibilità e SEO: cosa bisogna sapere

Una tabella ben costruita migliora l’esperienza dell’utente e può rendere più comprensibili le informazioni contenute nella pagina.

Per favorire l’accessibilità, è consigliabile utilizzare intestazioni di colonna corrette, mantenere un ordine logico delle celle e non affidarsi esclusivamente ai colori per comunicare informazioni importanti.

Quando una tabella è molto complessa, può essere utile aggiungere una breve descrizione che spieghi quali dati contiene e come interpretarli.

Dal punto di vista SEO, una tabella responsive non garantisce automaticamente un miglior posizionamento. Tuttavia, una pagina leggibile su dispositivi mobili, con contenuti organizzati e informazioni facilmente comprensibili, contribuisce a offrire un’esperienza di navigazione migliore.

È importante verificare che il contenuto della tabella rimanga accessibile anche quando viene applicato lo scorrimento orizzontale e che gli stili del tema non nascondano accidentalmente righe o colonne.

🧪 8. Come verificare che la tabella funzioni correttamente

Dopo aver creato la tabella e applicato eventuali modifiche, non limitarsi all’anteprima nell’editor.

Pubblicare la modifica, oppure salvarla in una pagina di test, e controllare il risultato sul sito.

È consigliabile verificare:

• la visualizzazione su computer, tablet e smartphone;
• la presenza di eventuali barre di scorrimento orizzontali;
• la leggibilità delle intestazioni e delle celle;
• l’assenza di elementi che escano dai bordi della pagina;
• il comportamento con contenuti più lunghi del previsto;
• l’utilizzo della tabella tramite tastiera o tecnologie assistive, quando pertinente.

Gli strumenti per sviluppatori dei browser permettono inoltre di simulare diverse larghezze dello schermo, facilitando l’individuazione di problemi di impaginazione.

✅ Conclusioni

Creare tabelle responsive nell’editor di WordPress è possibile attraverso diverse strategie. Per le tabelle semplici, il blocco Tabella di Gutenberg può essere sufficiente. Quando i dati sono numerosi, lo scorrimento orizzontale con CSS offre una soluzione pratica, mentre plugin come TablePress e wpDataTables possono semplificare la gestione di tabelle più articolate.

La scelta migliore dipende dal contenuto e dalle esigenze del sito: una tabella non deve soltanto adattarsi allo schermo, ma restare chiara, accessibile e facile da consultare.

Il consiglio è verificare sempre il risultato su uno smartphone reale prima di considerare concluso il lavoro. Una tabella ben progettata rende le informazioni più fruibili e contribuisce a migliorare la qualità complessiva del sito WordPress.