Salta al contenuto principale

WP Table Manager: stilizzazione delle tabelle

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

 

tabella di stile

 

È 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%.

 

ingrandire-rimpicciolire

 

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.

 

ridimensiona-colonna

 

2. Temi e opzioni

In ogni tabella, puoi trovare di selezione del tema nel menu Tema. Basta cliccare su un tema per applicarlo.

L'applicazione di un tema sostituirà tutti i dati e gli stili all'interno della tabella. Quindi, il modo migliore per procedere è applicare un tema, quindi modificare i dati per creare un tema personalizzato e infine duplicare le tabelle.

 

scelta del tema

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.

 

tema-alter-colore

 

Puoi rimuovere il colore alternativo cliccando "Rimuovi >  Rimuovi stile automatico" nel menu contestuale. Il colore verrà cancellato dopo la tua conferma.

 

rimuovi-colore-alterno

 

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 .

 

allineamento della 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à.

 

evidenziazione della tabella

 

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.

 

aggiungi-tooltip

 

Puoi impostare la larghezza del tooltip in pixel. Verrà visualizzata una descrizione comandi con un editor per le modifiche.

 

editor di suggerimenti

 

Aggiungi il contenuto e salva, il gioco è fatto, il suggerimento verrà visualizzato sul lato pubblico al passaggio del mouse.

 

suggerimento-hover

 

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.

 

colonna di congelamento

 

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).

 

altezza del tavolo

 

Dopo aver scelto la colonna da bloccare, potrai scorrere la tabella e visualizzare sempre la colonna fissa.

 

visualizzazione della linea 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).

 

intestazione-tabella-blocco-riga

 

Se vuoi impostare l'altezza del tavolo, torna alle opzioni Responsive.

Quindi la prima riga verrà bloccata sul frontend in base all'impostazione.

 

congelamento delle righe

 

5. Ordina e filtra

Se vuoi ordinare o filtrare la tabella, vai al menu Formato > Ordina e filtra .

 

filtro di ordinamento

 

Appare quindi un popup contenente le opzioni di ordinamento e filtro. 

 

filtro-ordinamento-popup

 

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 .

 

opzioni di ordinamento

 

Ci sono 2 opzioni per il filtro:

 

opzioni-di-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.

 

filtro-all'interno-della-colonna

 

  • Modulo di filtro avanzato: una volta selezionata l'opzione, è possibile cercare e filtrare i dati in una tabella

 

filtro avanzato

 

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.

 

ricerca principale

 

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.

 

bordo di riempimento

 

Tieni presente che se hai applicato un tema, verrà aggiunto automaticamente del codice CSS personalizzato. Naturalmente, puoi comunque modificarlo.

 

7. CSS personalizzato

Facciamo un ulteriore passo avanti. Se sei un web designer con competenze CSS, potrai aggiungere codice CSS in Formato > CSS personalizzato.

 

formato-css-personalizzato

 

Il codice CSS è colorato utilizzando il codice mirror e può essere scritto con meno CSS, funziona anche così!

 

tabella-personalizzata-css

 

Celle, righe e colonne hanno coordinate per identificare ciascuna di esse e applicare ad essa un CSS personalizzato. R è la riga, C è la colonna.

 

visualizzazione css

 

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.

 

responsive-hiding-col

 

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)

 

scorrimento-tabella-responsivo

 

Tabella con colonna nascosta (migliore per un gran numero di colonne)

 

57bb0cb0ac948

 

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".

 

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.

 

intestazione ripetuta-frontend

 

Se si utilizza l'intestazione ripetuta e Filtro è abilitata, è possibile filtrare digitando nella casella di testo nella visualizzazione mobile.

 

filtro-intestazione-ripetuta

 

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.

 

esportazione-excel

 

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.

 

paginazione-wptm

 

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.

 

stile bordo

 

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.

 

pulsante di stampa

 

An Error Occurred: Whoops, looks like something went wrong.

Sorry, there was a problem we could not recover from.

The server returned a "500 - Whoops, looks like something went wrong."

Help me resolve this