Creare la Prima Tabella con TablePress: Guida Passo Passo
Dopo aver installato e configurato TablePress, è arrivato il momento di creare la tua prima tabella. Che si tratti di una tabella comparativa, di un listino prezzi o di un semplice elenco di dati, TablePress rende l’intero processo incredibilmente semplice e intuitivo. In questa guida passo passo ti accompagneremo dalla creazione alla pubblicazione, esplorando ogni funzionalità dell’editor integrato.
Accedere alla Creazione di una Nuova Tabella
Per iniziare, accedi alla dashboard di WordPress e naviga su TablePress → Aggiungi Nuova. Questa è la schermata dove definirai le caratteristiche fondamentali della tua tabella prima ancora di inserire i dati. L’interfaccia è pulita e minimale, progettata per guidarti nel processo senza distrazioni.
La prima cosa da fare è assegnare un nome alla tabella. Scegli un nome descrittivo che ti aiuti a identificarla facilmente in seguito, soprattutto se prevedi di creare molte tabelle. Ad esempio, “Listino Prezzi Servizi 2026” è molto più utile di “Tabella 1”. Il nome è visibile solo nell’area di amministrazione e non verrà mostrato ai visitatori del sito, a meno che tu non decida diversamente.
Sotto il campo del nome troverai la descrizione, un campo opzionale ma consigliato. La descrizione può essere visualizzata sopra o sotto la tabella nel frontend, fornendo contesto ai lettori. Puoi anche decidere di nasconderla completamente e utilizzarla solo come nota interna per te e il tuo team.
Definire le Dimensioni della Tabella
Il passo successivo è specificare il numero di righe e colonne della tabella. Non preoccuparti di essere preciso al centesimo: potrai aggiungere o rimuovere righe e colonne in qualsiasi momento dopo la creazione. Tuttavia, partire con dimensioni ragionevoli ti farà risparmiare tempo.
Per una tabella di prezzi tipica, potresti iniziare con 4-5 colonne (nome del servizio, caratteristiche, prezzo mensile, prezzo annuale, azione) e un numero di righe corrispondente ai tuoi servizi. Per una tabella di dati più complessa, come un catalogo prodotti, potresti aver bisogno di più colonne per coprire tutte le specifiche tecniche.
Una volta compilati tutti i campi, fai clic sul pulsante Aggiungi Tabella. TablePress creerà la tabella e ti porterà automaticamente alla schermata di modifica, dove potrai iniziare a inserire i dati.
L’Editor di TablePress: Panoramica Completa
La schermata di modifica di TablePress è il cuore del plugin. Qui troverai una griglia simile a un foglio di calcolo dove puoi inserire e modificare i dati. Ogni cella è editabile con un semplice clic, e puoi navigare tra le celle usando il tasto Tab o le frecce direzionali della tastiera.
Nella parte superiore della schermata trovi le informazioni generali della tabella: nome, descrizione e lo shortcode univoco. Lo shortcode è il codice che utilizzerai per inserire la tabella nei tuoi articoli e pagine. Ha il formato [table id=X /] dove X è il numero identificativo della tabella. Copia questo shortcode e tienilo a portata di mano.
Sotto le informazioni generali c’è la griglia dati vera e propria. La prima riga è evidenziata in modo diverso perché TablePress la tratta come intestazione per impostazione predefinita. Le intestazioni vengono renderizzate come tag <th> nel codice HTML e sono utilizzate dalla libreria DataTables per l’ordinamento delle colonne.
Inserire i Dati nella Tabella
L’inserimento dei dati è straordinariamente semplice. Fai clic su una cella e inizia a digitare. TablePress supporta non solo testo semplice, ma anche HTML all’interno delle celle. Questo significa che puoi inserire link, immagini, testo in grassetto o corsivo, e persino codice HTML personalizzato direttamente nelle celle della tabella.
Per inserire un link in una cella, utilizza il pulsante dedicato nella barra degli strumenti dell’editor avanzato, oppure scrivi direttamente il codice HTML: <a href=“URL”>Testo del Link</a>. Per le immagini, puoi utilizzare il tag <img> con l’URL dell’immagine. TablePress ti permette anche di inserire immagini dalla libreria media di WordPress tramite il pulsante apposito.
Un’altra funzionalità utile è il pulsante Editor Avanzato, disponibile per ogni cella. Facendo clic su di esso si apre un editor visuale simile a quello di WordPress per i post, con una barra degli strumenti completa per la formattazione del testo. Questo è particolarmente comodo quando hai bisogno di inserire contenuti complessi in una cella senza dover scrivere codice HTML a mano.
Manipolazione di Righe e Colonne
Sotto la griglia dei dati troverai una sezione dedicata alla manipolazione di righe e colonne. Qui puoi eseguire diverse operazioni strutturali sulla tabella. Per le righe, puoi aggiungere nuove righe alla fine della tabella o in una posizione specifica, duplicare righe esistenti, eliminare righe selezionate e riordinare le righe tramite trascinamento.
Le stesse operazioni sono disponibili per le colonne. Puoi aggiungere colonne a destra o a sinistra di una colonna selezionata, duplicare colonne, eliminare colonne e riordinare la disposizione delle colonne. Queste operazioni sono non distruttive fino al salvataggio: se commetti un errore, puoi semplicemente ricaricare la pagina per annullare le modifiche.
Una funzionalità particolarmente utile è la possibilità di nascondere righe e colonne senza eliminarle. Questo ti permette di mantenere i dati nel database ma di non mostrarli nel frontend. È perfetto per informazioni stagionali o per dati che potrebbero servire in futuro ma che al momento non vuoi visualizzare.
Unire le Celle: Colspan e Rowspan
TablePress supporta l’unione delle celle sia in orizzontale (colspan) che in verticale (rowspan). Per unire celle orizzontalmente, inserisci il testo desiderato nella cella più a sinistra e digita #colspan# nelle celle adiacenti che vuoi unire. TablePress renderà automaticamente le celle come un’unica cella estesa.
Per l’unione verticale, il procedimento è analogo: inserisci il contenuto nella cella superiore e digita #rowspan# nelle celle sottostanti. Puoi anche combinare colspan e rowspan per creare strutture di tabella complesse. Questa funzionalità è particolarmente utile per tabelle comparative dove alcune categorie coprono più colonne o righe.
Ricorda che l’unione delle celle può influire sul funzionamento dell’ordinamento e del filtro DataTables. Se utilizzi pesantemente colspan e rowspan, valuta se è opportuno disabilitare l’ordinamento per quella specifica tabella.
Opzioni della Tabella
Sotto la sezione di manipolazione troverai le Opzioni della Tabella, divise in diverse categorie. La sezione Intestazione e Piede ti permette di specificare se la prima riga deve essere trattata come intestazione e se l’ultima riga deve fungere da piede della tabella. Entrambe le opzioni influenzano sia il rendering HTML che il comportamento di DataTables.
La sezione Righe Alternate controlla la colorazione alternata delle righe, un effetto visivo che migliora la leggibilità delle tabelle lunghe. Puoi attivare o disattivare questa funzionalità per ogni tabella individualmente. La sezione Evidenziazione Riga aggiunge un effetto hover che evidenzia la riga su cui il cursore del mouse è posizionato.
Nella sezione Funzionalità della Libreria DataTables JavaScript puoi configurare le opzioni interattive per la singola tabella. Qui puoi abilitare o disabilitare l’ordinamento, il filtro di ricerca, la paginazione e l’informazione sul numero di voci mostrate. Queste impostazioni sovrascrivono le opzioni globali definite nella pagina delle impostazioni del plugin.
Salvare e Visualizzare l’Anteprima
Dopo aver inserito tutti i dati e configurato le opzioni, fai clic sul pulsante Salva Modifiche in alto o in fondo alla pagina. TablePress salverà la tabella nel database di WordPress e ti mostrerà un messaggio di conferma. Puoi salvare in qualsiasi momento durante la modifica senza perdere le opzioni già configurate.
Per vedere un’anteprima della tabella, puoi utilizzare il pulsante Anteprima disponibile nella schermata di modifica. Questo aprirà una nuova finestra del browser che mostra la tabella esattamente come apparirà nel frontend del sito, inclusi tutti gli stili CSS e le funzionalità JavaScript. L’anteprima è particolarmente utile per verificare che l’aspetto sia quello desiderato prima di pubblicare la tabella.
Inserire la Tabella in un Articolo o una Pagina
Per inserire la tabella in un articolo o in una pagina WordPress, hai diverse opzioni. Il metodo più diretto è copiare lo shortcode dalla schermata di modifica della tabella e incollarlo nel contenuto dell’articolo o della pagina. Lo shortcode può essere inserito in qualsiasi punto del testo, e WordPress lo sostituirà automaticamente con la tabella renderizzata.
Se utilizzi l’editor a blocchi Gutenberg, puoi aggiungere un blocco “TablePress table” direttamente dalla libreria dei blocchi. Questo blocco ti permette di selezionare la tabella da un menu a tendina senza dover ricordare lo shortcode. È il metodo più comodo e visuale per inserire tabelle con Gutenberg.
Per gli utenti di Elementor, puoi utilizzare il widget “Shortcode” e incollare lo shortcode di TablePress al suo interno. In alternativa, puoi inserire lo shortcode in un widget “Editor di Testo”. In entrambi i casi, la tabella verrà visualizzata correttamente nel frontend, anche se potrebbe non apparire nell’editor visuale di Elementor.
Modificare una Tabella Esistente
Per modificare una tabella già creata, vai su TablePress → Tutte le Tabelle e fai clic sul link “Modifica” accanto alla tabella desiderata. Si aprirà la stessa schermata di modifica che abbiamo esplorato in precedenza, con tutti i dati e le opzioni già salvati. Apporta le modifiche necessarie e fai clic su “Salva Modifiche”.
Le modifiche vengono applicate immediatamente su tutte le pagine e gli articoli che contengono lo shortcode di quella tabella. Non è necessario aggiornare manualmente ogni post: TablePress si occupa di tutto automaticamente. Questo rende la manutenzione dei dati estremamente efficiente, soprattutto per tabelle che vengono aggiornate frequentemente come listini prezzi o orari.
Best Practice per la Creazione di Tabelle
Per ottenere i migliori risultati con TablePress, segui queste best practice consolidate. Utilizza sempre intestazioni chiare e descrittive per le colonne: questo aiuta sia gli utenti che i motori di ricerca a comprendere il contenuto della tabella. Mantieni i dati consistenti all’interno di ogni colonna, utilizzando lo stesso formato per valori simili.
Evita di creare tabelle troppo larghe con troppe colonne, poiché possono risultare difficili da visualizzare su schermi di piccole dimensioni. Se hai molte colonne, considera di suddividere i dati in più tabelle correlate. Per tabelle molto lunghe, abilita sempre la paginazione per migliorare l’esperienza utente e le performance della pagina.
Infine, assegna sempre nomi significativi alle tabelle e utilizza le descrizioni per annotare informazioni importanti come la fonte dei dati, la data dell’ultimo aggiornamento o istruzioni per la manutenzione futura.
Leggi anche gli altri articoli della serie TablePress
Se desideri supporto professionale nella creazione di tabelle complesse per il tuo sito WordPress, il team di G Tech Group può aiutarti. Contattaci oggi stesso per scoprire come possiamo migliorare la presentazione dei dati sul tuo sito web.
Migliora il Tuo Sito WordPress
Scopri le nostre guide complete sugli altri plugin essenziali per WordPress: