Tutti i siti Web moderni sono progettati per funzionare correttamente su diverse larghezze dello schermo. In passato le tabelle venivano create utilizzando semplice HTML. Poiché il web design flessibile è diventato il nuovo standard, 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 reattive, il testo incluso al loro interno è estremamente difficile da leggere sulle dimensioni dello schermo dei dispositivi mobili, motivo per cui vengono utilizzate per sviluppare tabelle reattive che adattano il loro layout a seconda delle dimensioni dello schermo su cui vengono visualizzate, Le media query HTML e CSS devono essere utilizzate insieme tra loro.
- Soluzione 1: le tabelle possono essere create utilizzando Divi Builder.
- Soluzione 2: utilizza i plugin di tabella che includono questa funzionalità per impostazione predefinita!
- WP Table Manager
- Interfaccia per il WP Table Manager
- Conclusione
Le tabelle possono essere costruite con un layout leggibile su schermi di tutte le dimensioni per un singolo insieme di informazioni che non sia troppo grande o diversificato, e ciò può essere ottenuto con approcci HTML e CSS di base. Tuttavia, se la tabella è destinata a contenere una notevole quantità di dati, non è facile costruire un layout leggibile su dispositivi mobili o schermi con larghezza inferiore a 786 pixel.
Se il web designer che lavora con HTML e CSS per rendere una tabella reattiva su tutte le dimensioni dello schermo non considera la quantità di dati, è probabile che incontrerà problemi che influiscono in modo significativo sulla leggibilità del contenuto del sito. Ecco alcuni suggerimenti che tu, come progettista di siti Web Divi, potresti mettere in pratica quando tenti di creare manualmente tabelle reattive.
Mentre riduci le dimensioni della tabella per ospitare uno schermo più piccolo, dovrai costruire più classi CSS, ciascuna delle quali avrà come target una particolare risoluzione dello schermo.
Una soluzione alternativa che potresti fare è nascondere colonne specifiche dalla tabella quando la dimensione dello schermo è inferiore.
Per schermi più piccoli, puoi includere scorrimenti orizzontali o verticali nelle intestazioni e nei piè di pagina della tabella.
Crea un'unica tabella che può essere ridimensionata per adattarsi a tutte le dimensioni dello schermo e ingrandisci la tabella 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 reattive utilizzando le funzionalità integrate di Divi. Dai un'occhiata qui. Sono state aggiunte funzionalità di scorrimento orizzontale alle colonne che traboccano dal contenitore della tabella, consentendo alla tabella di essere più reattiva all'input dell'utente. Puoi saperne di più andando alla pagina del tutorial:
Soluzione 2: utilizza i plugin di tabella che includono questa funzionalità per impostazione predefinita!
Creare una tabella reattiva per il tuo sito web Divi non è più un problema, grazie all'abbondanza di soluzioni plugin GRATUITE disponibili nel repository. Tuttavia, è un po' complicato trovare plugin per tabelle che abbiano opzioni di reattività mobile integrate. plugin più diffusi come wpDataTables non hanno questa funzionalità come opzione gratuita.
In questo articolo consideriamo uno dei migliori plugin WP Tabe Builder.
WP Table Manager
WP Table Manager è l'unico plugin per tabelle WordPress che fornisce un'intera interfaccia per fogli di calcolo per gestire le tabelle. Crea una tabella, seleziona un tema e inizia a modificare le tabelle non appena finisci di crearle. Beneficerai 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, Fogli Google e Office 365; per consentire all'utente finale di modificare una tabella è semplice come fare clic su una cella e modificare i dati con o senza l'assistenza di un editor di testo visivo.
WP Table Manager ti consente di progettare tabelle accattivanti e reattive utilizzando una semplice interfaccia visiva. L'uso è gratuito. Una volta attivato, verrai indirizzato alla guida alla configurazione. Segui le procedure e apporta le modifiche necessarie a tuo piacimento. Come per magia, hai creato un bellissimo tavolo che viene visualizzato magnificamente su ogni dispositivo di qualsiasi dimensione. Quindi tutto ciò che devi fare è copiare lo shortcode e incollarlo nella pagina in cui vuoi che appaia. Il builder offre attualmente sette elementi (testo, immagine, elenco, pulsante, valutazione a stelle, HTML personalizzato e codice breve) che puoi trascinare e rilasciare nei segnaposto della tabella utilizzando la funzione di trascinamento della selezione. Questi possono essere utilizzati per costruire vari tipi di tabelle, come tabelle di confronto dei prodotti, tabelle dei prezzi, tabelle di elenco, ecc.; questo è il plugin Table che abbiamo scoperto durante la nostra indagine essere il più adatto ai principianti. Tieni presente che la presente versione non dispone di un campo di ricerca o di qualsiasi altro tipo 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 di utilizzo, Visualizer o Tablepress sono entrambe scelte eccellenti.
Interfaccia per il WP Table Manager
Puoi 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 di filtro sulla tabella, puoi cercare dati in ogni colonna e filtrare l'intera tabella. Funziona anche su tabelle enormi, inclusa l'impaginazione
- La freccia su e giù presente su ciascuna colonna organizzerà i dati della tabella. L'ordinamento dei dati delle tabelle funziona anche su tabelle di grandi dimensioni, inclusa l'impaginazione.
- Dopo aver costruito la tabella con tutti i dati necessari, puoi consentire agli utenti di ordinare, ma puoi anche stabilire un ordine predefinito. Ciò può essere molto utile quando le informazioni cambiano nel tempo, poiché puoi ordinare i corridori dopo la gara in base all'ordine di arrivo.
- L'impaginazione è necessaria se desideri visualizzare una tabella di grandi dimensioni sul frontend del tuo sito web mantenendo le risorse del server. Seleziona un numero preimpostato di righe della tabella, ciascuna pagina.
Esiste anche un modo aperto per gestire i documenti Excel tramite l'importatore di file Excel WP Table Manager . Tuttavia, puoi importare e trasformare i dati Excel solo come tabella HTML modificabile o importare il file Excel con il suo stile che include 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 multimediale di WordPress o un client FTP. Quindi, seleziona il tuo file Excel e avvia la sincronizzazione dalle impostazioni della tabella.
La sincronizzazione tra la tua tabella WordPress e il file Excel può essere effettuata regolarmente, tra un minuto e un giorno. È anche possibile definire il ritardo della 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; questa è solo una normale tabella HTML modificabile come un plugin ! Foglio di calcolo WordPress.
D'altra parte, dopo aver creato una tabella ordinata con tutti i dati desiderati, puoi esportarla come un file Excel convenzionale e, ad amp , rieseguire il foglio Excel aggiornato in un secondo momento. I tuoi utenti ora possono esportare la tabella come foglio Excel sul frontend di WordPress.
Il 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 mentre sei in movimento. Sii ancora più produttivo con la sincronizzazione dei file OneDrive! Seleziona un file Excel di Office 365 da sincronizzare, adattalo automaticamente e sarà attivo sul tuo sito web.
WP Table Manager ti aiuta a creare e importare schede dal database; ora include uno strumento per generare tabelle da una selezione di contenuti del database di siti Web, che in precedenza non era disponibile. Vengono selezionate tabelle e colonne dal database, vengono applicati filtri configurabili e le tabelle vengono gestite tramite l'interfaccia WP Table manager . Quando il database viene aggiornato, la tua tabella viene automaticamente incrementata! Inoltre, hai a tua disposizione opzioni di ordinamento, filtraggio, progettazione automatica e impaginazione.
Se non sei uno sviluppatore, puoi collegare visivamente qualsiasi materiale del database alla tua tabella HTML. Tutte le tabelle nel database vengono presentate durante la generazione di una nuova tabella dal contenuto del database.
Il database del tuo sito web può eseguire una semplice ricerca e selezionare tabelle e colonne; questo è piuttosto vantaggioso in un vasto database. Inoltre, una procedura guidata è qui per aiutarti passo dopo passo con la tabella dal database.
Nella fase finale, prima di visualizzare l'anteprima della tabella dal database, puoi scrivere la tua query personalizzata sulle tabelle del database specificate. Supportiamo alcune funzioni, come SELECT, REPLACE, RENAME, SHOW, EXPLAIN, DESCRIBE.
Una tabella di database a volte viene fornita con molte righe; pertanto, questa opzione può aiutare a visualizzare una tabella che si adatta allo schermo. Inoltre, puoi impostare un numero predefinito di righe della tabella, per ogni pagina. Inoltre, puoi anche scegliere una colonna per ordinare l'intera tabella per impostazione predefinita.
La connessione alle tabelle del database WordPress non è limitata alle sole tabelle WordPress. È possibile collegare tutte le tabelle che non provengono da WordPress ma installate sullo stesso database.
Tra l'enorme quantità di dati sulla tua tabella, puoi creare alcune regole personalizzate per concentrarti su un oggetto specifico. Se lo conosci, puoi giocare 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 quella funzionalità sensata) (se l'utente ha accesso a quella funzionalità pratica); questo è molto comodo per modificare in batch alcuni dati del database come, ad amp , diverse date post-pubblicazione che avrebbero richiesto del tempo se eseguite una per una.
Conclusione
Le tabelle sono uno dei modi più efficaci per mostrare una serie di informazioni. Tuttavia, per una persona meno tecnica, creare tabelle su una pagina web è una sfida. Utilizzando questi plugin , puoi facilmente creare tabelle leggibili su qualsiasi dispositivo in pochi semplici passaggi. Inoltre, le tabelle reattive offriranno sicuramente esperienze complessivamente positive ai visitatori del tuo sito. Quindi, provalo e facci sapere la tua esperienza nella sezione commenti qui sotto.
