WP Table Manager : Styling Tables

1. Formaat

Op de werkbalk kunt u de stijl voor de cel instellen, zoals: lettertype, lettergrootte, tekststijl, achtergrondkleur voor cel, tekstkleur, cel horizontaal en verticaal uitgelijnd, ... Het kan worden toegepast voor een enkele cel of meerdere cellen

 

stijltafel

 

De rijhoogte en kolombreedte kunnen in pixels worden gedefinieerd. Ga aub naar Menu Formaat> Kolom- / lijngrootte toepassenen selecteer Formaat kolom wijzigen / Formaat rij wijzigen. In het pop-upvenster kunt u bereik selecteren en px instellen voor kolommen of rijen. Klik op Gedaan buton om te eindigen.

 

formaat-kolom

 

2 . Thema- en sorteeropties

In elke tabel vind je Thema selectie optie bij Menu Thema. Klik gewoon op een thema om het toe te passen.

Door een thema toe te passen, worden alle gegevens en stijl in uw tabel vervangen. Dus de manier om door te gaan is om een ​​thema toe te passen en vervolgens gegevens te bewerken om uw eigen thema te maken en vervolgens uw tabellen te dupliceren.

 

thema-keuze

 

Op hetzelfde Menu Thema> Alternatieve kleuren, de "Automatische styling" functie helpt u de lijn op uw tafel te kleuren Kopstijlen en Voettekststijl opties. U kunt de sjabloonstijlen selecteren of uw eigen stijlen maken bij plug-in-instellingen.

 

thema-verander kleur

 

Met de sorteerbare parameter kunt u AJAX-gegevens op frontend sorteren. Je kunt het zien Menu-indeling> Sorteren.

 

sorteertabel

 

De tabeluitlijning gaat over het uitlijnen van de div die de hele tabel bevat, centreer bijvoorbeeld de hele tabel. Je kunt vinden op Menu-indeling> Tabel uitlijnen.

 

tafel uitlijnen

 

Een celmarkering is ook beschikbaar als optie. U kunt deze functie inschakelen in de configuratie. Het is standaard uitgeschakeld. U kunt de rij voor markeren selecteren, de kleur en de dekking van de markering aanpassen.

 

tafel hoogtepunt

 

3 . Voeg knopinfo toe aan cellen

Op elke cel in een tabel ziet u de knopinfo toevoegen als u er met de rechtermuisknop op klikt.

 

add-tooltip

 

U kunt de tooltip-breedte in pixels instellen. Het brengt je naar een tooltip met een editor om te bewerken.

 

tooltip-editor

 

Voeg inhoud toe en sla op, je bent klaar, de tooltip wordt aan de openbare kant weergegeven bij muisaanwijzer.

 

tooltip-hover

 

4 . Bevriezing van rijen en kolommen

Kolom bevriezen

Kolom vastzetten is beschikbaar in het menu Formaat> Responsieve opties. U kunt maximaal 5 kolommen vastzetten. Het wordt geteld vanaf de eerste col.

 

freeze-lijn

 

Om col / row te laten bevriezen is er een extra optie waarmee je de hoogte van de tafel kunt bepalen (omdat je tafelcontainer een oneindige hoogte kan hebben).

 

tafelhoogte

 

Wanneer u de kolom heeft gekozen die u wilt bevriezen, kunt u door uw tafel scrollen en altijd de vaste kolom weergeven.

 

vaste lijn weergeven

Rij bevriezen

Je kunt het vinden op Menu Formaat> Tabelkop, vanaf hier kunt u de optie inschakelen en rijen vastzetten (maximaal 5 rijen).

 

table-header

 

Als u de tafelhoogte wilt instellen, ga dan terug naar Responsieve opties.

Vervolgens wordt de eerste rij op de frontend vastgezet volgens de instelling.

 

rij-freeze

 

5 . Kolomgegevens filteren

Een filteroptie is beschikbaar op Menu-indeling > Filters. U kunt het activeren door op te klikken om velden voor het filteren van openbare gegevens in te schakelen.

 

filterkolom

 

Voorbeeld van filters:

 

responsive-table-scroll

 

6 . Celvulling en randradius

U kunt het randpictogram op de werkbalk vinden om de opvulling en de randradius op de cel aan te passen.

 

opvulrand

 

Merk op dat als je een thema hebt toegepast, sommige aangepaste css automatisch zullen worden toegevoegd. Je kunt het natuurlijk nog steeds bewerken.

 

7 . Aangepaste CSS

Laten we een stap verder gaan. Als je een webdesigner bent met css-vaardigheden, kun je css toevoegen op Menu-indeling> Aangepaste CSS. 

 

format-custom-css

 

De CSS-code is gekleurd met code mirror en kan in minder CSS worden geschreven, het werkt ook!

 

custom-table-css

 

Cellen, lijn, kolommen hebben coördinaten om ze allemaal te identificeren en er aangepaste css op toe te passen. R is rij, C is kolom.

 

CSS-weergave

 

8 . Responsieve WordPress tabellen

Reageren mijn tafels of gebruik ik de scroll op kleine apparaten?

WP Table Manager behandelt het responsieve ontwerp met een prioriteitstool, als een optie. Standaard is de responsieve functie uitgeschakeld, er zal een overloop zijn (die werkt prima op mobiel). Om te kunnen gebruiken Cols verbergen optie, moet u naar gaan Menu-indeling> Responsieve opties.

 

responsieve modus

 

De responsieve modus is geavanceerd, u kunt een prioriteit definiëren voor het verbergen van kolommen op mobiele formaten. Wanneer kolommen zijn verborgen, wordt een mobiel menu met selectievakje weergegeven om het weergeven / verbergen van kolommen te forceren.  
De kolomgrootte is vast tijdens de tafeleditie. Als de grootte van alle kolommen te groot is voor de container, heb je een overloop en kun je gemakkelijk scrollen op mobiele apparaten.

Tafel met een scroll (beter voor een klein aantal kolommen)

 

responsive-table-scroll

 

Tabel met verborgen kolom (beter voor een groot aantal kolommen)

 

57bb0cb0ac948

 

9 . Tafel downloaden

Om uw tafel met het publiek te delen, moet u inschakelen Download knop optie bij Tabblad Tab op het rechter paneel. Het bestandstype is * .xlsx.

 

download-tabel

 

10 . Paginering

Je kunt deze functie vinden op Menu> Formaat tabblad in elke tabel. Gebruik de schakelknop om het aantal rijen voor weergave op een pagina in te schakelen en te kiezen.

 

pagination-wptm