{"id":8251,"date":"2025-04-06T22:51:14","date_gmt":"2025-04-06T22:51:14","guid":{"rendered":"https:\/\/tableberg.com\/?p=8251"},"modified":"2025-04-26T16:32:24","modified_gmt":"2025-04-26T16:32:24","slug":"come-creare-tabelle-impilabili-in-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/it\/how-to-create-stackable-tables-in-wordpress\/","title":{"rendered":"Come creare tabelle impilabili in WordPress"},"content":{"rendered":"<p>Le tabelle standard funzionano bene sui desktop. Si vede che tutto \u00e8 al suo posto e il layout rimane pulito. Ma quando vengono visualizzate su un telefono o un tablet, queste stesse tabelle spesso si rompono. Si allargano troppo, costringendo gli utenti a scorrere lateralmente solo per leggere una singola riga. <\/p>\n\n\n\n<p>Le tabelle impilabili risolvono questo problema trasformando ogni riga in un blocco verticale di informazioni. Invece di visualizzare i dati in un'unica riga, i contenuti si impilano uno sotto l'altro e producono un ambiente pi\u00f9 semplice per rendere la tabella comprensibile su schermi piccoli.<\/p>\n\n\n\n<p>Questo layout, tuttavia, non \u00e8 utile su un desktop. Con sufficiente spazio a disposizione, le tabelle normali sono pi\u00f9 facili da navigare e pi\u00f9 efficienti. Le tabelle impilabili sono state progettate principalmente per migliorare la leggibilit\u00e0 sui dispositivi mobili, non per sostituire le tabelle standard su tutte le dimensioni dello schermo.<\/p>\n\n\n\n<p>In questo articolo vi spiegheremo come creare una tabella impilabile con il plugin Tableberg e come adattarla agli schermi mobili.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Che cos'\u00e8 un tavolo impilabile?<\/strong><\/h2>\n\n\n\n<p>Una tabella impilabile \u00e8 una versione reattiva di una tabella normale che adatta il suo layout agli schermi pi\u00f9 piccoli. Sui desktop, una tabella pu\u00f2 apparire come una griglia standard con righe e colonne. Ma sui dispositivi mobili, le tabelle larghe possono spesso diventare difficili da leggere e richiedere lo scorrimento orizzontale. Le tabelle impilabili intervengono per risolvere questo problema, trasformando ogni riga in un blocco verticale, dove le etichette delle colonne sono mostrate sopra ogni valore. Questo rende il contenuto pi\u00f9 facile da leggere e da scorrere su schermi stretti, senza perdere alcuna informazione. Nella maggior parte dei casi, questo si ottiene utilizzando i CSS o i plugin che supportano i layout delle tabelle responsive. I risultati migliori si ottengono utilizzando plugin con impostazioni mobili integrate o classi di utilit\u00e0 che rilevano la larghezza dello schermo. Ma \u00e8 meglio tenere presente che prima di applicare lo stacking, \u00e8 necessario verificare quante colonne si hanno e se il contenuto rimane leggibile.&nbsp;<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Creare tabelle impilabili in WordPress<\/strong><\/h2>\n\n\n\n<p>Per mostrare come le tabelle impilabili funzionino effettivamente in WordPress, utilizzeremo il file <a href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" target=\"_blank\" rel=\"noopener\">Tavolo di lavoro <\/a>plugin. \u00c8 semplice da usare, supporta tutti i tipi di contenuto all'interno delle celle delle tabelle e include impostazioni integrate per impilare le tabelle su mobile. Passiamo ai passaggi.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Passo 1: installare e attivare l'Tableberg<\/strong><\/h3>\n\n\n\n<p>Dalla dashboard di WordPress, selezionare <strong>Plugin<\/strong> \u2192 <strong>Aggiungi nuovo<\/strong>, quindi cercare <strong>Tavolo di lavoro<\/strong>. Cliccare <strong>Installa ora<\/strong>e, una volta installato, premere <strong>Attivare <\/strong>per iniziare a usarlo sul vostro sito.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"444\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/Tableberg-install-1024x444.png\" alt=\" Installare e attivare l&#039;Tableberg\" class=\"has-border-color wp-image-8258\" style=\"border-color:#ddecf6;border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/Tableberg-install-1024x444.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/Tableberg-install-300x130.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/Tableberg-install-768x333.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/Tableberg-install-1536x666.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/Tableberg-install-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/Tableberg-install.png 1837w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Passo 2: inserire una tabella<\/strong><\/h3>\n\n\n\n<p>Aprite il post o la pagina in cui volete la tabella. Utilizzare il pulsante <strong>inseritore di blocchi (pulsante +)<\/strong>, ricerca di <strong>\"Tableberg\", <\/strong>e inserirla. Verr\u00e0 richiesto di scegliere il numero di righe e colonne, in base al tipo di tabella che si desidera creare.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"416\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/2-1024x416.png\" alt=\"Inserire una tabella\" class=\"has-border-color wp-image-8259\" style=\"border-color:#ddecf6;border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/2-1024x416.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/2-300x122.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/2-768x312.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/2-1536x624.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/2-18x7.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/2.png 1777w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Passo 3: Aggiungere contenuto alla tabella<\/strong><\/h3>\n\n\n\n<p>Fare clic su ciascuna cella e iniziare a inserire il contenuto. \u00c8 possibile aggiungere testo, immagini, icone, stelle, pulsanti, nastri o elenchi -TP1T supporta pi\u00f9 tipi di blocco all'interno di ogni cella.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"404\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/3-1024x404.png\" alt=\"Aggiungere contenuto alla tabella\" class=\"has-border-color wp-image-8293\" style=\"border-color:#ddecf6;border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/3-1024x404.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/3-300x118.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/3-768x303.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/3-1536x606.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/3-18x7.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/3.png 1826w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Passo 4: Abilitare la modalit\u00e0 di impilamento reattivo<\/strong><\/h3>\n\n\n\n<p>Per applicare le impostazioni responsive, \u00e8 necessario selezionare prima l'intera tabella. Fare clic sul bordo esterno di ogni singola cella e, quando appare la barra degli strumenti, selezionare l'icona tableberg. In questo modo, l'intera tabella sar\u00e0 selezionata.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"389\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/4-1024x389.png\" alt=\"Selezionare l&#039;intera tabella \" class=\"has-border-color wp-image-8294\" style=\"border-color:#ddecf6;border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/4-1024x389.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/4-300x114.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/4-768x292.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/4-1536x583.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/4-18x7.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/4.png 1883w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Con la tabella completa selezionata, guardare il pannello delle impostazioni del blocco di destra. Scorrere verso il basso fino a trovare la sezione intitolata Impostazioni reattive. Attivare l'opzione che consente alla tabella di adattarsi agli schermi di cellulari e tablet.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"364\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/4.2.gif\" alt=\"Abilitare le impostazioni reattive\" class=\"has-border-color wp-image-8295\" style=\"border-color:#ddecf6;border-width:1px;border-radius:2px\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Passo 5: scegliere la modalit\u00e0 di impilamento e configurare il comportamento<\/strong><\/h3>\n\n\n\n<p>Dopo aver abilitato la modalit\u00e0 responsive, sar\u00e0 possibile selezionare la modalit\u00e0 di adattamento della tabella. Scegliere <strong>Pila<\/strong> invece di <strong>Pergamena<\/strong>. Questo trasforma ogni riga della tabella in un blocco verticale per facilitarne la visualizzazione su schermi pi\u00f9 piccoli.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"453\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/5-1024x453.png\" alt=\"Scegliere la modalit\u00e0 di impilamento \" class=\"has-border-color wp-image-8296\" style=\"border-color:#ddecf6;border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/5-1024x453.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/5-300x133.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/5-768x340.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/5-1536x679.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/5-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/5.png 1804w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Passo 6: Utilizzare le funzioni avanzate dello stack<\/strong><\/h3>\n\n\n\n<p>Sotto la selezione della modalit\u00e0, \u00e8 possibile attivare <strong>Trasformare le righe in colonne<\/strong> se si desidera che la tabella inverta la sua direzione di impaginazione. \u00c8 presente anche l'opzione <strong>Mostra la prima colonna di ogni riga della pila,<\/strong> utile quando la prima colonna contiene etichette. Infine, \u00e8 possibile impostare il numero di elementi da visualizzare per ogni riga della pila.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"541\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/6-1024x541.png\" alt=\"Utilizzare le funzioni avanzate dello stack\" class=\"has-border-color wp-image-8297\" style=\"border-color:#ddecf6;border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/6-1024x541.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/6-300x159.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/6-768x406.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/6-1536x812.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/6-18x10.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/6.png 1648w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Fase 7: Anteprima e Finalizzazione<\/strong><\/h3>\n\n\n\n<p>Fare clic sul pulsante Anteprima e controllare il layout in visualizzazione mobile e tablet. Se tutto sembra a posto, procedete alla pubblicazione o all'aggiornamento del post.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/7-1024x640.png\" alt=\"Anteprima e finalizzazione\" class=\"has-border-color wp-image-8298\" style=\"border-color:#ddecf6;border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/7-1024x640.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/7-300x188.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/7-768x480.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/7-18x12.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/7.png 1392w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Conclusione<\/strong><\/h3>\n\n\n\n<p>Le tabelle impilabili sono una soluzione pratica per facilitare la lettura dei contenuti su telefoni e tablet, soprattutto quando si lavora con tabelle semplici o di dimensioni moderate. Tuttavia, quando una tabella include troppe colonne, il formato impilato pu\u00f2 diventare lungo e difficile da navigare. In questi casi, altre tecniche come il filtraggio o l'occultamento delle colonne possono funzionare meglio. Tuttavia, per la maggior parte dei casi di utilizzo quotidiano, l'impilamento offre un modo pulito e affidabile per mantenere le tabelle compatibili con i dispositivi mobili. In questo articolo abbiamo mostrato esattamente come crearne una utilizzando Tableberg, dall'installazione all'anteprima finale.<\/p>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Standard tables typically work well on desktops. You can see everything fits in place, and the layout stays clean. But when viewed on a phone or a tablet, those same tables often break down. They stretch too wide, forcing users to scroll sideways just to read a single row. Stackable tables solve this problem by [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":8256,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7,130],"tags":[],"class_list":["post-8251","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-tableberg"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/Stacked-Table-850-x-335-px.png","author_info":{"display_name":"Moinul Islam","author_link":"https:\/\/tableberg.com\/it\/author\/marufmoinul27\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/posts\/8251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/comments?post=8251"}],"version-history":[{"count":4,"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/posts\/8251\/revisions"}],"predecessor-version":[{"id":8300,"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/posts\/8251\/revisions\/8300"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/media\/8256"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/media?parent=8251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/categories?post=8251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/it\/wp-json\/wp\/v2\/tags?post=8251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}