WP Table Manager : Styling Tables

1. Formato

La scheda del formato è disponibile a destra dello schermo per impostazione predefinita. Contiene parametri diversi.

 

image31

 

  • Tipo di cella: impostazione predefinita o HTML. Il tipo predefinito consente di effettuare il calcolo con esso HTML inserendo contenuti HTML come immagini. Un editor WYSIWYG per ogni cella verrà implementato nella prossima versione, per il momento in cui aggiungi HTML nella cella.
  • Sfondo cellulare colore: definire il colore di sfondo ovviamente

 

image32

 

I bordi e le opzioni dei caratteri possono essere applicati su celle singole o multiple

 

image33

 

La larghezza di riga e colonna può essere definita in pixel. Seleziona la colonna o la riga in qualsiasi punto della tabella e convalida le dimensioni.

 

2 Temi e opzioni di ordinamento

In ogni tabella puoi trovare Selezione del tema opzione a Tema del menu. Basta fare clic su un tema per applicarlo.

L'applicazione di un tema sostituirà tutti i dati e lo stile all'interno della tabella. Quindi il modo di procedere è applicare un tema, quindi modificare i dati per creare il proprio tema e duplicare le tabelle.

 

tema a scelta

 

Sullo stesso Tema del menu> Colori alternativi, la funzione "Stile automatico" ti aiuta a colorare la linea sul tavolo con Stile dell'intestazione e Stile del piè di pagina opzioni. Puoi selezionare gli stili del modello o crearne uno tuo nelle impostazioni del plug-in.

 

tema-alter-color

 

Il parametro ordinabile consente di effettuare l'ordinamento dei dati AJAX sul frontend. Puoi vedere su Formato menu> Ordina.

 

sort-table

 

L'allineamento della tabella riguarda l'allineamento del div che contiene l'intera tabella, ad esempio centrare tutta la tabella. Puoi trovarlo a Formato menu> Allinea tabella.

 

tavolo-align

 

Un'evidenziazione della cella è disponibile anche come opzione. È possibile abilitare questa funzione nella configurazione. È disabilitato per impostazione predefinita. È possibile selezionare la riga di evidenziazione per regolare il colore e l'opacità dell'evidenziazione.

 

tavolo-clou

 

3 Aggiungi tooltip sulle celle

Su ogni cella di una tabella, puoi vedere l'opzione Aggiungi tooltip quando fai un clic destro su di essa.

 

add-tooltip

 

È possibile impostare la larghezza della descrizione comandi in pixel. Ti porterà a una descrizione comandi con un editor da modificare.

 

tooltip-editore

 

Aggiungi contenuto e salva, il gioco è fatto, la descrizione comandi verrà visualizzata sul lato pubblico al passaggio del mouse.

 

tooltip-hover

 

4 Congelamento di linee e colonne

Il congelamento di riga o colonna è disponibile nel menu Formato> Opzioni reattive. Puoi congelare fino a 5 righe o colonne. Viene conteggiato dalla prima riga / colonna.

 

freeze-line

 

Per bloccare la riga c'è un'opzione aggiuntiva che ti consente di correggere l'altezza della tabella (perché il contenitore della tabella potrebbe avere un'altezza infinita).

 

freeze-fila

 

Dopo aver scelto la linea o la colonna da bloccare, potrai scorrere sulla tabella e visualizzare sempre la linea / le righe fisse.

 

fix-line-visualizzazione

 

5 Filtraggio dei dati della colonna

Un'opzione di filtro è disponibile all'indirizzo Formato menu > Filtri. Puoi attivarlo facendo clic per abilitare i campi di filtro dei dati pubblici.

 

filter-colonna

 

Esempio di filtri:

 

reattivo-table-scroll

 

6 Imbottitura cellulare e raggio del bordo

È possibile trovare l'icona del bordo sulla barra degli strumenti per regolare il riempimento e il raggio del bordo sulla cella.

 

padding-border

 

Nota che se hai applicato un tema, alcuni CSS personalizzati verranno aggiunti automaticamente. Puoi comunque modificarlo ovviamente.

 

7 CSS personalizzato

Facciamo un passo avanti. Se sei un web designer con competenze CSS potrai aggiungere CSS a Formato menu> CSS personalizzato. 

 

formato-custom-css

 

Il codice CSS è colorato usando il mirroring del codice e può essere scritto in meno CSS, funziona anche!

 

custom-table-css

 

Le celle, la linea, le colonne hanno coordinate per identificare ognuna e applicare CSS personalizzati su di essa. R è la riga, C è la colonna.

 

css-visualizzazione

 

8 Tabelle WordPress reattive

Le mie tabelle sono sensibili o usano lo scorrimento su piccoli dispositivi?

WP Table Manager gestisce il design reattivo con uno strumento prioritario, come opzione. Per impostazione predefinita, la funzione di risposta è disabilitata, ci sarà un overflow (la strega funziona benissimo sui dispositivi mobili).

 

reattivo-mode

 

La modalità reattiva è avanzata, puoi definire una priorità per nascondere le colonne su dimensioni mobili. Quando le colonne sono nascoste, verrà visualizzato un menu mobile con casella di controllo per forzare la visualizzazione / nascondere delle colonne.  
La dimensione della colonna è stata corretta durante l'edizione della tabella. Se la dimensione di tutte le colonne è troppo grande per il contenitore, avrai un overflow e potrai scorrere facilmente sui dispositivi mobili.

Tabella con scorrimento (meglio per una piccola quantità di colonne)

 

reattivo-table-scroll

 

Tabella con colonna nascosta (meglio per una grande quantità di colonne)

 

57bb0cb0ac948

 

9 Scarica la tabella

Per condividere il tuo tavolo con il pubblico, devi abilitare Pulsante di download opzione a Scheda tabella sul pannello di destra. Il tipo di file sarà * .xlsx.

 

download-table

 

10 paginatura

Puoi trovare questa funzione su Menu> Formato scheda in ogni tabella. Utilizzare il pulsante di attivazione / disattivazione per abilitare e selezionare il numero di righe da visualizzare in una pagina.

 

impaginazione-wptm