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

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

2. Thema- en sorteeropties

In elke tabel vindt u Thema selectie optie bij Menu Theme. Klik gewoon op een thema om het toe te passen.

In hetzelfde menuthema > Alternatieve kleuren helpt de functie "Automatische styling" u de lijn op uw tafel te kleuren met de koptekst en voettekst . U kunt de sjabloonstijlen selecteren of uw eigen maken bij de instellingen van de plug-in.

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

Met de sorteerbare parameter kunt u AJAX-gegevens sorteren op de frontend. U kunt zien op Menu Formaat > Sorteren .

De tabeluitlijning gaat over het uitlijnen van de div die de hele tabel bevat, bijvoorbeeld de hele tabel centreren. U vindt deze onder Menu Opmaak > Tabel uitlijnen .

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.

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.

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

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

4. Bevriezing van rijen en kolommen

Kolom bevriezen

Bevriezen van kolommen is beschikbaar in de Menu -indeling > Responsieve opties . U kunt maximaal 5 kolommen bevriezen. Het is geteld vanaf de eerste col.

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

Als je de kolom hebt gekozen om te bevriezen, kun je door je tabel scrollen en altijd de vaste kolom weergeven.

Rij bevriezen

Je kunt het vinden via Menu Format > Table header , vanaf hier kun je de optie inschakelen en rijen laten bevriezen (maximaal 5 rijen).

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

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

5. Kolomgegevens filteren

Een filteroptie is beschikbaar via Menu Formaat  > Filters . U kunt het activeren door te klikken op om openbare gegevensfiltervelden in te schakelen.

Voorbeeld van filters:

6. Celopvulling en grensradius

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

7. Aangepaste CSS

Laten we een stap verder gaan. Als je een webdesigner bent met css-vaardigheden, kun je css toevoegen via Menu Format > Custom CSS.

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

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.

8. Responsieve WordPress-tabellen

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

Cols verbergen

WP Table Manager behandelt het responsieve ontwerp als optie met een prioriteitstool. Standaard is de responsieve functie uitgeschakeld, er zal een overloop zijn (heks werkt echter prima op mobiel). Om de Cols verbergen , moet u naar Menu Format > Responsive options gaan.

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 ligt vast tijdens de tabeleditie. Als de grootte van alle kolommen te groot is voor de container, heb je een overflow en kun je gemakkelijk scrollen op mobiele apparaten.

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

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

Herhaalde koptekst

Dit is een andere optie als u een tabel in een klein gebied op uw site wilt invoegen. U moet naar Menu-indeling> Responsieve opties gaan. Selecteer vervolgens Responsief type > 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.

9. Downloadtabel

Om uw tafel met het publiek te delen, moet u naar Menu Format , Download-knop inschakelen . Het bestandstype is dan *.xlsx bij het downloaden op de frontend.

10. Paginering

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

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.