Spring naar de hoofdinhoud

WP Table Manager : Stylingtabellen

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

 

U kunt het percentage voor de tabeleditor selecteren. Dat betekent dat u uw tabel kunt in- en uitzoomen, het bereik van 50% tot 200%.

 

in-uitzoomen

 

De rijhoogte en kolombreedte kunnen worden gedefinieerd in pixels. Ga naar Menu Opmaak > Kolom-/regelgrootte toepassen en selecteer vervolgens Formaat van kolom wijzigen / Formaat van rij wijzigen . In het pop-upvenster kunt u bereik selecteren en px instellen voor kolommen of rijen. Klik op Gereed om te voltooien.

 

formaat-kolom

 

2. Thema's en opties

In elke tabel vindt u Thema selectie optie bij Menu Theme. 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 verder te gaan, is door een thema toe te passen en vervolgens gegevens te bewerken om uw eigen thema te maken en vervolgens uw tabellen te dupliceren.

 

thema-keuze

Alternatieve kleuren

In hetzelfde Menuthema > Alternatieve kleuren helpt de functie "Automatische stijl" u de lijn op uw tabel in te kleuren met stijl van de koptekst en de voettekst . U kunt de sjabloonstijlen selecteren of uw eigen maken via de plug-ininstellingen.

 

thema-verander kleur

 

En u kunt de alternatieve kleur verwijderen door op de "Verwijderen>  Automatische stijl verwijderen" in het rechtsklikmenu te klikken. Vervolgens wordt de kleur na uw bevestiging gewist.

 

verwijder-alternatieve-kleur

 

Tabel uitlijnen

Het uitlijnen van de tabel gaat over het uitlijnen van de div die de hele tabel bevat, bijvoorbeeld de hele tabel centreren. Je vindt dit onder Menu Opmaak > Tabel uitlijnen .

 

tafel uitlijnen

Celmarkering

Een celmarkering is ook beschikbaar als optie. U kunt deze functie inschakelen in de configuratie. Het is standaard uitgeschakeld. U kunt de markeringsrij selecteren om de kleur en de dekking van de markering aan te passen.

 

tafel hoogtepunt

 

3. Voeg tooltip toe aan cellen

Op elke cel in een tabel kunt u de optie Tooltip toevoegen zien wanneer 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

Het bevriezen van kolommen is beschikbaar via Menu Opmaak > Responsieve opties . U kunt maximaal 5 kolommen bevriezen. Er wordt geteld vanaf de eerste col.

 

vrieskolom

 

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 tabel scrollen en altijd de vaste kolom weergeven.

 

vaste lijn weergeven

 

Rij bevriezen

Je kunt het vinden onder Menu Opmaak > Tabelkop , vanaf hier kun je de optie inschakelen en instellen dat rijen worden bevroren (maximaal 5 rijen).

 

row-freeze-table-header

 

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

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

 

rij-freeze

 

5. Sorteren en filteren

Als u uw tabel wilt sorteren of filteren, navigeert u naar Menu Opmaak > Sorteren en filteren .

 

sorteerfilter

 

Vervolgens verschijnt er een pop-up met sorteer- en filteropties. 

 

filter-sort-pop-up

 

Als u een tabel wilt sorteren, schakelt u eenvoudig de sorteerbare optie van Frontend . U kunt een kolom selecteren voor standaardsortering en de richting ervan.

Selecteer in dit geval bijvoorbeeld kolom A met ASC- richting.

 

sorteeropties

 

Er zijn 2 filteropties:

 

filter-opties

 

  • Binnenkolom: u kunt gegevens filteren in de koptekst van elke kolom. Met de schakelknop kunt u het zoekveld in de koptekst weergeven of verbergen.

 

filter-binnen-kolom

 

  • Geavanceerd filterformulier: zodra de optie is geselecteerd, kunt u gegevens in een tabel zoeken en filteren

 

geavanceerd filter

 

Hoofdzoekopdracht: wanneer u deze functie inschakelt, wordt er een zoekinvoerveld aan de frontend toegevoegd. Hierdoor kunnen gebruikers eenvoudig door alle gegevens in de tabel zoeken.

 

hoofd-zoekopdracht

 

6. Celopvulling en randradius

U vindt het randpictogram op de werkbalk waarmee u de opvulling en de randradius op de cel kunt aanpassen.

 

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 nog een stap verder gaan. Als u een webontwerper bent met CSS-vaardigheden, kunt u CSS toevoegen via Menu Opmaak > Aangepaste CSS.

 

format-custom-css

 

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

 

aangepaste tabel-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?

Cols verbergen

WP Table Manager verwerkt het responsieve ontwerp optioneel met een prioriteitstool. Standaard is de responsieve functie uitgeschakeld, er zal een overflow zijn (die echter prima werkt op mobiel). Om Verbergen Cols Menu Formaat > Responsieve opties gaan

 

responsive-hiding-col

 

De responsieve modus is geavanceerd, u kunt een prioriteit definiëren voor het verbergen van kolommen op mobiele formaten.
Wanneer kolommen verborgen zijn, wordt een mobiel menu met een selectievakje weergegeven om het weergeven/verbergen van kolommen te forceren. De kolomgrootte staat vast tijdens de tabeleditie. Als de grootte van alle kolommen te groot is voor de container, ontstaat er een overflow 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

 

Herhaalde koptekst

Dit is een andere optie als u een tabel in een klein gebied op uw site wilt invoegen. Navigeer naar Menu-indeling> Responsieve opties. Selecteer vervolgens Responsief type > Herhaalde koptekst.

 

herhaalde koptekst

 

Er zijn opties om aan te passen aan uw vraag:

  • Responsief breekpunt (px): Selecteer een breekpuntwaarde in pixels om te definiëren wanneer de tabel naar deze responsieve modus schakelt
  • Responsieve max-hoogte (px): wanneer de responsieve modus is geactiveerd, afhankelijk van de breekpuntwaarde, definieer dan een max-hoogte om een ​​erg lange tabel te vermijden
  • Styling in responsieve modus: pas een standaardstijl toe voor deze responsieve modus of gebruik de tabelkleuren

Daarna kunt u zien hoe de tafel er op de frontend uitziet.

 

herhaalde-header-frontend

 

Herhaalde koptekst gebruikt en de filteroptie is ingeschakeld, kunt u filteren door in het tekstvak in mobiele weergave te typen.

 

filter-herhaalde-header

 

9. Exporteren naar Excel

Om uw tabel op uw pc op te slaan, gaat u naar Menutabel en klikt u op de knop Excel exporteren . Het bestandstype zal dan *.xlsx zijn na het exporteren op de frontend.

 

export-excel

 

10. Paginering

U vindt deze functie in elke tabeleditie Menuformaat > Paginering Gebruik de schakelknop om het aantal rijen in te schakelen en te kiezen dat op een pagina moet worden weergegeven.

 

pagination-wptm

 

11. Opmaak van randen van cellen

U kunt randtypen voor uw tabel toepassen, zoals randbreedte, randkleur, randstijl. Selecteer eerst het celbereik en klik vervolgens op het pictogram op de werkbalk.

 

border-stijl

 

12. Print tabel op frontend

Soms moet u uw tabel afdrukken. Dus om de knop Afdrukken op de frontend weer te geven, moet u eerst naar de Menutabel de knop Afdrukken aanvinken

 

print-knop