Agli albori della costruzione di siti web, tavoli sono stati costruiti principalmente per la visualizzazione su desktop, dove lo spazio sullo schermo era abbondante. Quando i siti web hanno iniziato a includere dati complessi, le tabelle sono diventate un modo popolare per organizzare in modo ordinato grandi quantità di informazioni.
Con l'aumento dell'uso dei dispositivi mobili, la necessità di tabelle reattive è diventata vitale. Un numero sempre maggiore di utenti accede ai siti web su telefoni e tablet, dove le tabelle tradizionali causano frustrazione perché richiedono lo scorrimento orizzontale o lo zoom per leggere i contenuti.
Oggi le tabelle responsive non sono solo una questione di comodità, ma sono essenziali per il SEO e l'accessibilità, soprattutto con L'indicizzazione mobile-first di Google. Sebbene il blocco tabella predefinito di WordPress manchi di reattività integrata, è necessario ricorrere a metodi come le regolazioni CSS o i plugin per risolvere il problema.
In questa guida illustreremo il modo più semplice per creare tabelle ottimizzate per i dispositivi mobili in WordPress utilizzando un plugin.
Passo 1: installare e attivare il plugin Tableberg
Il primo passo è semplice. Andate al vostro Dashboard di WordPress e navigare verso Plugin > Aggiungi nuovo. Una volta lì, digitare Tavolo di lavoro e trovare il plugin. Una volta trovato, fare clic su Installa ora. Dopo l'installazione, non resta che Attivare it. Fare clic su Attiva per abilitare il plugin sul sito.
Passo 2: creare una nuova tabella con Tableberg
Dall'editor di WordPress, fare clic sul pulsante icona più (+), ricerca di Tavolo di lavoroe quindi aggiungere il blocco Tableberg.
Scegliere il numero di righe e colonne della tabella e premere il pulsante Crea. Per questa esercitazione, abbiamo scelto una tabella contenente 4 righe e 5 colonne.
Passo 3: Aggiungere i dati alla tabella
Dopo creazione della tabellaSi accede all'editor delle tabelle, dove è possibile aggiungere contenuto a ogni cella. Fare clic su una cella qualsiasi, toccare il pulsante segno più (+), digitare il blocco richiesto e continuare a inserire testo, immagini, elenchi, stelle di valutazione, pulsanti o tutto ciò che si adatta alle proprie esigenze.
Passo 4: Attivare le impostazioni reattive
Per assicurarsi che la tabella venga visualizzata bene su tutti i dispositivi, Tableberg offre una struttura Impostazioni di reattività sezione. Per prima cosa, selezionare la sezione blocco genitore, passare alla impostazioni sul lato destro dell'editor, quindi scorrere verso il basso per trovare la voce Impostazioni di reattività.
Quindi, scegliere il dispositivo per il quale si desidera configurare la reattività. Nella parte superiore del pannello Impostazioni di reattività, sono presenti le opzioni per Desktop, Tavoletta, e Mobile. Selezionare il dispositivo che si desidera personalizzare, in quanto questo determinerà il comportamento della tabella su quella particolare dimensione dello schermo. Qui abbiamo selezionato Mobile.
Con il dispositivo selezionato, attivare il pulsante Abilita il punto di interruzione per attivare il comportamento reattivo per il dispositivo scelto. Questa impostazione consente alla tabella di applicare le regolazioni reattive quando la larghezza dello schermo è pari o inferiore al valore impostato in Larghezza massima. Ad esempio, impostando la larghezza massima a 1024px, la tabella si adatterà in modo reattivo agli schermi più stretti di 1024px. Al di sotto di questa impostazione, si trova la voce Rendi Intestazione della riga superiore che designa la prima riga della tabella come intestazione e applica stili o formattazione specifici per distinguerla dalle altre righe.
Infine, utilizzare l'opzione Modalità per scegliere il comportamento della tabella su schermi più piccoli. È possibile selezionare Pergamena per abilitare lo scorrimento orizzontale e consentire agli utenti di scorrere la tabella se è troppo ampia. In alternativa, scegliere Pila per riorganizzare verticalmente il contenuto della tabella. Quando si utilizza la modalità Stack, si possono utilizzare opzioni aggiuntive quali Direzione della pila consentono di controllare la direzione di impilamento e Articoli per riga consente di impostare il numero di elementi da visualizzare per riga, per offrire una maggiore personalizzazione per gli schermi più piccoli.
Ecco fatto: la vostra tabella è pronta per essere visualizzata su schermi di qualsiasi dimensione. Pubblicatela e lasciate che i vostri dati fluiscano senza problemi su desktop, tablet e telefoni!
Conclusione
Le tabelle responsive non sono solo una caratteristica, ma un must nel mondo WordPress di oggi. Con Tableberg, avete trasformato le tabelle tradizionali in qualcosa che si adatta, si flette e brilla su qualsiasi schermo. Il vostro sito offre ora un modo più pulito e accessibile di presentare i dati, sia che vengano visualizzati su un desktop, un tablet o un telefono. Potrete dire addio alle visualizzazioni goffe e dare il benvenuto a un'esperienza utente che scorre fluida come i vostri contenuti. Il vostro pubblico apprezzerà l'aggiornamento e anche i motori di ricerca.
