Tutti i siti web moderni sono progettati per funzionare correttamente su schermi di diverse larghezze. In passato, le tabelle venivano create utilizzando HTML semplice. Con l'avvento del web design flessibile, le tabelle HTML di base hanno faticato a tenere il passo con le esigenze dei siti web moderni. Poiché le semplici tabelle HTML non sono responsive, il testo in esse contenuto è estremamente difficile da leggere sugli schermi dei dispositivi mobili. Per questo motivo, vengono utilizzate per sviluppare tabelle responsive che adattano il loro layout in base alle dimensioni dello schermo su cui vengono visualizzate. Le query multimediali HTML e CSS devono essere utilizzate insieme.
- Soluzione 1: le tabelle possono essere create utilizzando Divi Builder.
- Soluzione 2: utilizzare plugindi tabella che includono questa funzionalità per impostazione predefinita!
- WP Table Manager
- Interfaccia per WP Table Manager
- Conclusione
Le tabelle possono essere create con un layout leggibile su schermi di tutte le dimensioni per un singolo insieme di informazioni non troppo ampio o diversificato, e questo può essere ottenuto con approcci HTML e CSS di base. Tuttavia, se la tabella è destinata a contenere una quantità considerevole di dati, non è facile creare un layout leggibile su dispositivi mobili o schermi con una larghezza inferiore a 786 pixel.
Se il web designer che lavora con HTML e CSS per rendere una tabella responsive su schermi di tutte le dimensioni non considera la quantità di dati, è probabile che si imbatta in problemi che influiscono significativamente sulla leggibilità dei contenuti del sito. Ecco alcuni suggerimenti che tu, come web designer Divi, potresti mettere in pratica quando tenti di creare manualmente tabelle responsive.
Per ridurre le dimensioni della tabella per adattarla a uno schermo più piccolo, sarà necessario creare più classi CSS, ciascuna delle quali è destinata a una specifica risoluzione dello schermo.
Una soluzione alternativa che potresti adottare è quella di nascondere colonne specifiche dalla tabella quando le dimensioni dello schermo sono ridotte.
Per schermi più piccoli, è possibile includere scorrimenti orizzontali o verticali nelle intestazioni e nei piè di pagina della tabella.
Crea una singola tabella che possa essere ridimensionata per adattarsi a tutte le dimensioni dello schermo e ingrandiscila per rendere il materiale più leggibile.
Queste soluzioni richiedono un notevole impegno e i requisiti possono variare a seconda del contenuto e delle dimensioni dello schermo.
Soluzione 1: le tabelle possono essere create utilizzando Divi Builder.
Elegant Themes ha prodotto un tutorial per dimostrare come costruire tabelle responsive utilizzando le funzionalità integrate di Divi. Date un'occhiata qui. Hanno aggiunto funzionalità di scorrimento orizzontale alle colonne che fuoriescono dal contenitore della tabella, consentendo alla tabella di rispondere meglio agli input dell'utente. Potete trovare maggiori informazioni visitando la pagina del tutorial:
Soluzione 2: utilizzare plugindi tabella che includono questa funzionalità per impostazione predefinita!
Creare una tabella responsive per il tuo sito web Divi non è più un problema, grazie all'abbondanza di plugin GRATUITI disponibili nel repository. Tuttavia, è un po' complicato trovare pluginper tabelle che includano opzioni di responsiveness integrate per dispositivi mobili. pluginpopolari come wpDataTables non offrono questa funzionalità come opzione gratuita.
In questo articolo prendiamo in considerazione uno dei migliori plugin: WP Tabe Builder.
WP Table Manager
WP Table Manager è l'unico plugin per tabelle di WordPress che offre un'interfaccia completa per la gestione delle tabelle. Crea una tabella, seleziona un tema e inizia a modificarla non appena hai finito di crearla. Potrai beneficiare di un set completo di potenti funzionalità di modifica delle tabelle, tra cui la modifica delle celle HTML, la copia delle tabelle, il calcolo e la sincronizzazione con Excel, Google Sheets e Office 365; è semplice come cliccare su una cella e modificare i dati, con o senza l'ausilio di un editor di testo visuale, per l'utente finale modificare una tabella.
WP Table Manager ti permette di progettare tabelle accattivanti e responsive utilizzando una semplice interfaccia visiva. È gratuito. Una volta attivato, verrai indirizzato alla guida di installazione. Segui le procedure e apporta le modifiche necessarie a tuo piacimento. Come per magia, avrai creato una splendida tabella che si visualizza perfettamente su qualsiasi dispositivo, di qualsiasi dimensione. Non ti resta che copiare lo shortcode e incollarlo nella pagina in cui desideri che appaia. Il builder offre attualmente sette elementi (Testo, Immagine, Elenco, Pulsante, Valutazione a stelle, HTML personalizzato e Shortcode) che puoi trascinare e rilasciare nei segnaposto della tabella utilizzando la funzione di trascinamento. Questi possono essere utilizzati per creare vari tipi di tabelle, come tabelle di confronto prodotti, tabelle dei prezzi, tabelle elenco, ecc.; questo è il plugin per tabelle che abbiamo scoperto durante la nostra ricerca essere il più adatto ai principianti. Tieni presente che la versione attuale non dispone di un campo di ricerca o di altri tipi di funzionalità di filtro. Inoltre, se intendi inserire o gestire molti set di dati, questa potrebbe non essere l'opzione ideale. Per questo tipo di scenario d'uso, Visualizer o Tablepress sono entrambe ottime scelte.
Interfaccia per WP Table Manager
È possibile includere lo shortcode in un modulo di codice o in un modulo di testo in Divi.
Il tema DIVI include WP Table Manager.
plugin WP Table Manager risponde alla gestione dei dettagli quando si tratta di gestire le tabelle;
- Una volta attivata l'opzione filtro sulla tabella, è possibile cercare dati in ogni colonna e filtrare l'intera tabella. Funziona anche su tabelle di grandi dimensioni, inclusa la paginazione
- Le frecce su e giù presenti su ogni colonna consentono di ordinare i dati della tabella. L'ordinamento dei dati della tabella funziona anche su tabelle di grandi dimensioni, inclusa la paginazione.
- Una volta creata la tabella con tutti i dati necessari, puoi lasciare che gli utenti li ordinino, ma puoi anche impostare un ordine predefinito. Questo può essere molto utile quando le informazioni cambiano nel tempo, poiché puoi ordinare i corridori dopo la gara in base all'ordine di arrivo.
- La paginazione è necessaria se si desidera visualizzare una tabella di grandi dimensioni sul frontend del sito web, senza compromettere le risorse del server. Selezionare un numero predefinito di righe di tabella per ogni pagina.
Esiste anche un modo aperto per gestire i documenti Excel tramite l'importatore di file Excel WP Table Manager . Tuttavia, è possibile importare e trasformare i dati Excel solo come tabella HTML modificabile o importare il file Excel con il suo stile, inclusi colori, sfondi, dimensioni delle colonne e collegamenti.
Gestisci la tua tabella Excel e pubblicala sul tuo sito WordPress! Puoi caricare un file Excel nella tabella tramite la gestione dei media di WordPress o un client FTP. Quindi, seleziona il file Excel e avvia la sincronizzazione dalle impostazioni della tabella.
La sincronizzazione tra la tabella di WordPress e il file Excel può essere eseguita regolarmente, con intervalli da un minuto a un giorno. È anche possibile impostare un ritardo di sincronizzazione automatica per evitare aggiornamenti indesiderati delle tabelle pubbliche di WordPress o per risparmiare risorse del server per una tabella di grandi dimensioni.
Dopo aver importato una tabella, tutti i dati possono essere aggiornati; si tratta semplicemente di una normale tabella HTML modificabile come un plugin! Foglio di calcolo di WordPress.
D'altra parte, dopo aver creato una tabella ordinata con tutti i dati desiderati, puoi esportarla come un normale file Excel e, adamp, rieseguire il foglio Excel aggiornato in un secondo momento. I tuoi utenti possono ora esportare la tabella come foglio Excel sul frontend di WordPress.
WP Table Manager si sincronizza anche con Office 365 tramite OneDrive.
È disponibile lo strumento di importazione ed esportazione di file Excel di OneDrive: risparmia tempo importando e modificando i tuoi file al volo. Aumenta la produttività con la sincronizzazione dei file di OneDrive! Seleziona un file Excel di Office 365 da sincronizzare, modificalo automaticamente e pubblicalo sul tuo sito web.
WP Table Manager ti aiuta a creare e importare tabelle dal database; ora include uno strumento per generare tabelle da una selezione di contenuti del database del sito web, precedentemente non disponibile. Tabelle e colonne del database vengono selezionate, vengono applicati filtri configurabili e le tabelle vengono gestite tramite l'interfaccia WP Table manager . Quando il database viene aggiornato, la tabella viene automaticamente incrementata! Inoltre, hai a disposizione opzioni di ordinamento, filtro, progettazione automatica e impaginazione.
Se non sei uno sviluppatore, puoi collegare visivamente qualsiasi contenuto del database alla tua tabella HTML. Tutte le tabelle del database vengono visualizzate durante la generazione di una nuova tabella a partire dal contenuto del database.
Il database del tuo sito web può effettuare una semplice ricerca e selezionare tabelle e colonne; questo è molto utile in un database di grandi dimensioni. Inoltre, una procedura guidata ti aiuterà passo dopo passo a gestire le tabelle del database.
Nella fase finale, prima di visualizzare in anteprima la tabella dal database, è possibile scrivere una query personalizzata sulle tabelle del database specificate. Supportiamo alcune funzioni, come SELECT, REPLACE, RENAME, SHOW, EXPLAIN, DESCRIBE.
Una tabella di database a volte contiene molte righe; pertanto, questa opzione può aiutare a visualizzare una tabella che si adatti allo schermo. Inoltre, è possibile impostare un numero predefinito di righe per ogni pagina. È anche possibile scegliere una colonna per ordinare l'intera tabella in modo predefinito.
La connessione alle tabelle del database WordPress non è limitata alle sole tabelle di WordPress. È possibile connettere tutte le tabelle non di WordPress ma installate sullo stesso database.
Tra i dati ingenti presenti nella tua tabella, puoi creare alcune regole personalizzate per concentrarti su un oggetto specifico. Se hai familiarità con questo strumento, puoi sperimentare con gli operatori di database come >, <, LIKE, IN…
Le tabelle del database che hai creato possono essere modificate come qualsiasi altra tabella (se l'utente ha accesso a questa funzionalità utile); è molto comodo modificare in batch alcuni dati del database, come adampdiverse date di post-pubblicazione, che avrebbero richiesto più tempo se fossero state modificate una per una.
Conclusione
Le tabelle sono uno dei modi più efficaci per presentare un insieme di informazioni. Tuttavia, per una persona meno esperta in tecnologia, creare tabelle su una pagina web può rappresentare una sfida. Utilizzando questi plugin, è possibile creare facilmente tabelle leggibili su qualsiasi dispositivo in pochi semplici passaggi. Inoltre, le tabelle responsive offrono sicuramente un'esperienza complessiva positiva ai visitatori del sito. Quindi, provate e fateci sapere la vostra esperienza nella sezione commenti qui sotto.
