WP Table Manager: stilizzazione delle tabelle
- 1. Formato
- 2. Temi e opzioni
- 3. Aggiungi descrizione comandi alle celle
- 4. Congelamento di righe e colonne
- 5. Ordina e filtra
- 6. Riempimento delle celle e raggio del bordo
- 7. CSS personalizzato
- 8. Tabelle WordPress reattive
- 9. Esporta in Excel
- 10. Paginazione
- 11. Stile del bordo delle celle
- 12. Stampa la tabella sul frontend
1. Formato
Sulla barra degli strumenti, puoi impostare lo stile per la cella come: carattere, dimensione del carattere, stile del testo, colore di sfondo per la cella, colore del testo, allineamento orizzontale e verticale della cella, ... Può essere applicato per una singola cella o più celle
È possibile selezionare la percentuale per l'editor di tabelle. Ciò significa che è possibile ingrandire o ridurre la tabella, con un intervallo dal 50% al 200%.
L'altezza della riga e la larghezza della colonna possono essere definite in pixel. Vai al menu Formato > Applica dimensione colonna/riga , quindi seleziona Ridimensiona colonna / Ridimensiona riga . Nella finestra popup, puoi selezionare l'intervallo e impostare i pixel per colonne o righe. Fai clic sul Fine per terminare.
2. Temi e opzioni
In ogni tabella, puoi trovare di selezione del tema nel menu Tema. Basta cliccare su un tema per applicarlo.
Colori alternativi
Nello stesso menu Tema > Colori alternativi , la funzione "Stile automatico" ti aiuta a colorare la linea sulla tabella con Intestazione e Piè di pagina . Puoi selezionare gli stili del modello o crearne di personalizzati nelle impostazioni del plugin.
Puoi rimuovere il colore alternativo cliccando "Rimuovi > Rimuovi stile automatico" nel menu contestuale. Il colore verrà cancellato dopo la tua conferma.
Allineamento della tabella
L'allineamento della tabella serve ad allineare i div che contengono l'intera tabella, ad esempio centrando l'intera tabella. Puoi trovarlo in Menu Formato > Allineamento tabella .
Evidenziazione delle celle
È disponibile anche un'evidenziazione delle celle come opzione. È possibile abilitare questa funzionalità nella configurazione. È disabilitata per impostazione predefinita. È possibile selezionare la riga evidenziata per regolarne il colore e l'opacità.
3. Aggiungi descrizione comandi alle celle
Su ogni cella di una tabella, facendo clic con il pulsante destro del mouse, è possibile visualizzare l'opzione Aggiungi suggerimento.
Puoi impostare la larghezza del tooltip in pixel. Verrà visualizzata una descrizione comandi con un editor per le modifiche.
Aggiungi il contenuto e salva, il gioco è fatto, il suggerimento verrà visualizzato sul lato pubblico al passaggio del mouse.
4. Congelamento di righe e colonne
Congelamento a colonna
Il blocco delle colonne è disponibile nel menu Formato > Opzioni responsive . È possibile bloccare fino a 5 colonne. Il conteggio inizia dalla prima colonna.
Per bloccare riga/colonna è disponibile un'opzione aggiuntiva che consente di fissare l'altezza della tabella (perché il contenitore della tabella potrebbe avere un'altezza infinita).
Dopo aver scelto la colonna da bloccare, potrai scorrere la tabella e visualizzare sempre la colonna fissa.
Congelamento delle righe
Puoi trovarlo in Menu Formato > Intestazione tabella , da qui puoi attivare l'opzione e impostare le righe da bloccare (fino a 5 righe).
Se vuoi impostare l'altezza del tavolo, torna alle opzioni Responsive.
Quindi la prima riga verrà bloccata sul frontend in base all'impostazione.
5. Ordina e filtra
Se vuoi ordinare o filtrare la tabella, vai al menu Formato > Ordina e filtra .
Appare quindi un popup contenente le opzioni di ordinamento e filtro.
Per ordinare una tabella, è sufficiente abilitare "Ordinamento da frontend" . È possibile selezionare una colonna per l'ordinamento predefinito e la sua direzione.
Ad esempio, in questo caso, selezionare la colonna A con ASC .
Ci sono 2 opzioni per il filtro:
- All'interno della colonna: puoi filtrare i dati nell'intestazione di ogni colonna. Il pulsante di attivazione/disattivazione ti aiuterà a mostrare o nascondere il campo di ricerca nell'intestazione.
- Modulo di filtro avanzato: una volta selezionata l'opzione, è possibile cercare e filtrare i dati in una tabella
Ricerca principale: attivando questa funzionalità, verrà aggiunto un campo di ricerca nel frontend. Ciò consentirà agli utenti di cercare facilmente tra tutti i dati nella tabella.
6. Padding delle celle e raggio del bordo
Puoi trovare l'icona del bordo sulla barra degli strumenti che ti aiuta a regolare la spaziatura e il raggio del bordo sulla cella.
7. CSS personalizzato
Facciamo un ulteriore passo avanti. Se sei un web designer con competenze CSS, potrai aggiungere codice CSS in Formato > CSS personalizzato.
Il codice CSS è colorato utilizzando il codice mirror e può essere scritto con meno CSS, funziona anche così!
Celle, righe e colonne hanno coordinate per identificare ciascuna di esse e applicare ad essa un CSS personalizzato. R è la riga, C è la colonna.
8. Tabelle WordPress reattive
Le mie tabelle sono responsive o utilizzano lo scorrimento sui dispositivi di piccole dimensioni?
Nascondere Cols
WP Table Manager gestisce il design responsive con uno strumento prioritario, come opzione. Per impostazione predefinita, la funzionalità responsive è disabilitata, con conseguente overflow (che funziona comunque bene sui dispositivi mobili). Per utilizzare Hiding Cols , bisogna andare su Menu Formato > Opzioni Responsive.
La modalità responsive è avanzata, è possibile definire una priorità per nascondere le colonne in base alle dimensioni dei dispositivi mobili. Quando le colonne sono nascoste, verrà visualizzato un menu mobile con una casella di controllo per forzare la visualizzazione/nascondenza delle colonne.
La dimensione delle colonne viene fissata durante la modifica della tabella. Se la dimensione di tutte le colonne è troppo grande per il contenitore, si verificherà un overflow e sarà possibile scorrere facilmente sui dispositivi mobili.
Tabella con scorrimento (migliore per un numero limitato di colonne)
Tabella con colonna nascosta (migliore per un gran numero di colonne)
Intestazione ripetuta
Questa è un'altra opzione se desideri inserire una tabella in un'area ridotta del tuo sito. Vai su "Menu Formato" > "Opzioni Responsive". Quindi seleziona "Tipo Responsive" > "Intestazione ripetuta".
Ci saranno opzioni da personalizzare in base alle tue esigenze:
- Punto di interruzione reattivo (px): seleziona un valore di punto di interruzione in pixel per definire quando la tabella passerà a questa modalità reattiva
- Altezza massima reattiva (px): quando la modalità reattiva è attivata, a seconda del valore del punto di interruzione, definire un'altezza massima per evitare una tabella molto lunga
- Stile modalità reattiva: applica uno stile predefinito per questa modalità reattiva o usa i colori della tabella
Dopodiché potrai vedere come apparirà la tabella nel frontend.
Se si utilizza l'intestazione ripetuta e Filtro è abilitata, è possibile filtrare digitando nella casella di testo nella visualizzazione mobile.
9. Esporta in Excel
Per salvare la tabella sul PC, vai al menu Tabella e clicca sul Esporta Excel . Il file sarà di tipo *.xlsx dopo l'esportazione sul frontend.
10. Paginazione
Questa funzionalità è disponibile nel menu Formato > Impaginazione in ogni edizione della tabella. Utilizza il pulsante di attivazione/disattivazione per attivarla e seleziona il numero di righe da visualizzare in una pagina.
11. Stile del bordo delle celle
Puoi applicare diversi tipi di bordo alla tua tabella, come larghezza, colore e stile. Per prima cosa, seleziona l'intervallo di celle, quindi fai clic sull'icona nella barra degli strumenti.
12. Stampa la tabella sul frontend
A volte, è necessario stampare la tabella. Quindi, per visualizzare il pulsante Stampa sul frontend, per prima cosa, bisogna andare su Menu Tabella e selezionare il pulsante Stampa.




































