{"id":167247,"date":"2025-04-14T09:00:00","date_gmt":"2025-04-14T09:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/tablepress-creare-prima-tabella-guida\/"},"modified":"2026-05-30T10:00:00","modified_gmt":"2026-05-30T08:00:00","slug":"tablepress-creare-prima-tabella-guida","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/tablepress-creare-prima-tabella-guida\/","title":{"rendered":"Creare la Prima Tabella con TablePress: Guida Passo Passo"},"content":{"rendered":"

Creare la Prima Tabella con TablePress: Guida Passo Passo<\/h2>\n

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.<\/p>\n

Accedere alla Creazione di una Nuova Tabella<\/h2>\n

Per iniziare, accedi alla dashboard di WordPress e naviga su TablePress → Aggiungi Nuova<\/strong>. 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.<\/p>\n

La prima cosa da fare è assegnare un nome<\/strong> 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.<\/p>\n

Sotto il campo del nome troverai la descrizione<\/strong>, 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.<\/p>\n

\"Schermata<\/p>\n

Definire le Dimensioni della Tabella<\/h2>\n

Il passo successivo è specificare il numero di righe e colonne<\/strong> 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.<\/p>\n

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.<\/p>\n

Una volta compilati tutti i campi, fai clic sul pulsante Aggiungi Tabella<\/strong>. TablePress creerà la tabella e ti porterà automaticamente alla schermata di modifica, dove potrai iniziare a inserire i dati.<\/p>\n

L’Editor di TablePress: Panoramica Completa<\/h2>\n

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.<\/p>\n

Nella parte superiore della schermata trovi le informazioni generali della tabella: nome, descrizione e lo shortcode<\/strong> univoco. Lo shortcode è il codice che utilizzerai per inserire la tabella nei tuoi articoli e pagine. Ha il formato [table id=X \/]<\/code> dove X è il numero identificativo della tabella. Copia questo shortcode e tienilo a portata di mano.<\/p>\n

Sotto le informazioni generali c’è la griglia dati vera e propria. La prima riga è evidenziata in modo diverso perché TablePress la tratta come intestazione<\/strong> per impostazione predefinita. Le intestazioni vengono renderizzate come tag <th><\/code> nel codice HTML e sono utilizzate dalla libreria DataTables per l’ordinamento delle colonne.<\/p>\n

\"Elenco<\/p>\n

Inserire i Dati nella Tabella<\/h2>\n

L’inserimento dei dati è straordinariamente semplice. Fai clic su una cella e inizia a digitare. TablePress supporta non solo testo semplice, ma anche HTML<\/strong> 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.<\/p>\n

Per inserire un link<\/strong> 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><\/code>. Per le immagini<\/strong>, puoi utilizzare il tag <img><\/code> con l’URL dell’immagine. TablePress ti permette anche di inserire immagini dalla libreria media di WordPress tramite il pulsante apposito.<\/p>\n

Un’altra funzionalità utile è il pulsante Editor Avanzato<\/strong>, 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.<\/p>\n

Manipolazione di Righe e Colonne<\/h2>\n

Sotto la griglia dei dati troverai una sezione dedicata alla manipolazione di righe e colonne<\/strong>. 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.<\/p>\n

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.<\/p>\n

Una funzionalità particolarmente utile è la possibilità di nascondere righe e colonne<\/strong> 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.<\/p>\n

Unire le Celle: Colspan e Rowspan<\/h2>\n

TablePress supporta l’unione delle celle sia in orizzontale (colspan<\/strong>) che in verticale (rowspan<\/strong>). Per unire celle orizzontalmente, inserisci il testo desiderato nella cella più a sinistra e digita #colspan#<\/code> nelle celle adiacenti che vuoi unire. TablePress renderà automaticamente le celle come un’unica cella estesa.<\/p>\n

Per l’unione verticale, il procedimento è analogo: inserisci il contenuto nella cella superiore e digita #rowspan#<\/code> 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.<\/p>\n

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.<\/p>\n

\"Opzioni<\/p>\n

Opzioni della Tabella<\/h2>\n

Sotto la sezione di manipolazione troverai le Opzioni della Tabella<\/strong>, divise in diverse categorie. La sezione Intestazione e Piede<\/strong> 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.<\/p>\n

La sezione Righe Alternate<\/strong> 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<\/strong> aggiunge un effetto hover che evidenzia la riga su cui il cursore del mouse è posizionato.<\/p>\n

Nella sezione Funzionalità della Libreria DataTables JavaScript<\/strong> 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.<\/p>\n

Salvare e Visualizzare l’Anteprima<\/h2>\n

Dopo aver inserito tutti i dati e configurato le opzioni, fai clic sul pulsante Salva Modifiche<\/strong> 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.<\/p>\n

Per vedere un’anteprima della tabella, puoi utilizzare il pulsante Anteprima<\/strong> 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.<\/p>\n

Inserire la Tabella in un Articolo o una Pagina<\/h2>\n

Per inserire la tabella in un articolo o in una pagina WordPress, hai diverse opzioni. Il metodo più diretto è copiare lo shortcode<\/strong> 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.<\/p>\n

Se utilizzi l’editor a blocchi Gutenberg<\/strong>, 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.<\/p>\n

Per gli utenti di Elementor<\/strong>, 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.<\/p>\n

Modificare una Tabella Esistente<\/h2>\n

Per modificare una tabella già creata, vai su TablePress → Tutte le Tabelle<\/strong> 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”.<\/p>\n

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.<\/p>\n

Best Practice per la Creazione di Tabelle<\/h2>\n

Per ottenere i migliori risultati con TablePress, segui queste best practice consolidate. Utilizza sempre intestazioni chiare e descrittive<\/strong> per le colonne: questo aiuta sia gli utenti che i motori di ricerca a comprendere il contenuto della tabella. Mantieni i dati consistenti<\/strong> all’interno di ogni colonna, utilizzando lo stesso formato per valori simili.<\/p>\n

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.<\/p>\n

Infine, assegna sempre nomi significativi<\/strong> 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.<\/p>\n

\n

Leggi anche gli altri articoli della serie TablePress<\/h3>\n