WP Table Manager: Stilizarea tabelelor

1. Format

Pe bara de instrumente, puteți seta stilul pentru celulă, cum ar fi: fontul, dimensiunea fontului, stilul textului, culoarea de fundal pentru celulă, culoarea textului, alinierea orizontală și verticală a celulei... Poate fi aplicat pentru o singură celulă sau pentru mai multe celule

Puteți selecta procentul pentru editorul de tabel. Aceasta înseamnă că puteți mări/micșora tabelul, în intervalul de la 50% la 200%.

Înălțimea rândului și lățimea coloanei pot fi definite în pixeli. Accesați Meniu Format > Aplicare dimensiune coloană/linie , apoi selectați Redimensionare coloană / Redimensionare rând . În fereastra pop-up, puteți selecta un interval și seta px pentru coloane sau rânduri. Faceți clic pe Gata pentru a termina.

2. Teme și opțiuni

În fiecare tabel, puteți găsi de selectare a temei în meniul Temă. Trebuie doar să faceți clic pe o temă pentru a o aplica.

Culori alternative

În aceeași Temă de meniu > Culori alternative , funcția „Stilizare automată” vă ajută să colorați linia din tabel cu a antetului și a subsolului . Puteți selecta stilurile șablonului sau puteți crea propriile stiluri în setările pluginului.

Și puteți elimina culoarea alternativă făcând clic pe „Eliminare >  Elimină stilizarea automată” din meniul care apare clic dreapta. Apoi, culoarea va fi ștearsă după confirmarea dvs.

Aliniere tabel

Alinierea tabelului se referă la alinierea div-urilor care conțin întregul tabel, de exemplu, centrarea întregului tabel. Puteți găsi acest lucru în meniul Format > Aliniere tabel .

Evidențierea celulelor

O evidențiere a celulelor este, de asemenea, disponibilă ca opțiune. Puteți activa această funcție în configurare. Este dezactivată în mod implicit. Puteți selecta rândul de evidențiere pentru a ajusta culoarea și opacitatea evidențierii.

3. Adăugați un tooltip la celule

Pe fiecare celulă dintr-un tabel, puteți vedea opțiunea Adăugare tooltip când faceți clic dreapta pe ea.

Puteți seta lățimea tooltip-ului în pixeli. Veți fi direcționat către un tooltip cu un editor pe care îl puteți edita.

Adăugați conținut și salvați, ați terminat, fereastra de instrumente va fi afișată în partea publică la trecerea cursorului cu mouse-ul.

4. Înghețarea rândurilor și coloanelor

Congelarea coloanei

Înghețarea coloanelor este disponibilă în meniul Format > Opțiuni responsive . Puteți îngheța până la 5 coloane. Se numără de la prima coloană.

Pentru a îngheța culorile/rândurile, există o opțiune suplimentară care vă permite să fixați înălțimea tabelului (deoarece containerul tabelului poate avea o înălțime infinită).

După ce ați ales coloana pe care doriți să o înghețați, veți putea derula în tabel și veți putea afișa întotdeauna coloana fixă.

Înghețarea rândurilor

Îl puteți găsi în Meniu Format > Antet tabel , de aici puteți activa opțiunea și seta înghețarea rândurilor (până la 5 rânduri).

Dacă doriți să setați înălțimea tabelului, vă rugăm să reveniți la opțiunile Responsive.

Apoi, primul rând va fi înghețat pe frontend după setare.

5. Sortare și filtre

Dacă doriți să sortați sau să filtrați tabelul, navigați la meniul opțiunea Sortare și filtre

Apoi apare o fereastră pop-up care conține opțiuni de sortare și filtrare. 

Dacă doriți să sortați un tabel, pur și simplu activați de sortare în frontend . Puteți selecta o coloană pentru sortarea implicită și direcția acesteia.

De exemplu, în acest caz, selectați coloana A cu ASC .

Există 2 opțiuni pentru filtrare:

• În interiorul coloanei: puteți filtra datele din antetul fiecărei coloane. Butonul de comutare vă va ajuta să afișați sau să ascundeți câmpul de căutare din antet.

• Formular de filtrare avansat: odată ce opțiunea este selectată, puteți căuta și filtra datele într-un tabel

Căutare principală: Când activați această funcție, se va adăuga un câmp de introducere a datelor de căutare în interfață. Acest lucru permite utilizatorilor să caute cu ușurință prin toate datele din tabel.

6. Umplutura celulelor și raza bordurii

Puteți găsi pictograma bordură în bara de instrumente care ajută la ajustarea umplerii și a razei bordurii celulei.

7. CSS personalizat

Să mergem cu un pas mai departe. Dacă ești un designer web cu abilități de CSS, vei putea adăuga CSS în Meniu Format > CSS personalizat.

Codul CSS este colorat folosind oglinda codului și poate fi scris cu mai puțin CSS, funcționează și așa!

Celulele, liniile și coloanele au coordonate pentru a le identifica și a le aplica CSS personalizat. R este rândul, C este coloana.

8. Tabele WordPress responsive

Tabelele mele sunt responsive sau folosesc derularea pe dispozitive mici?

Ascunderea coloanelor

WP Table Manager gestionează designul responsiv cu un instrument de prioritate, ca opțiune. În mod implicit, funcția responsive este dezactivată, va exista un overflow (care funcționează perfect pe mobil). Pentru a utiliza Hiding Cols , trebuie să accesați Meniu Format > Responsive options.

Modul responsiv este avansat, puteți defini o prioritate pentru ascunderea coloanelor pe dimensiunile mobile. Când coloanele sunt ascunse, va fi afișat un meniu mobil cu o casetă de selectare pentru a forța afișarea/ascunderea coloanelor.
Dimensiunea coloanei este fixă ​​în timpul editării tabelului. Dacă dimensiunea tuturor coloanelor este prea mare pentru container, veți avea un overflow și veți putea derula cu ușurință pe dispozitivele mobile.

Tabel cu sul (mai bine pentru un număr mic de coloane)

Tabel cu coloană ascunsă (mai bine pentru un număr mare de coloane)

Antet repetat

Aceasta este o altă opțiune dacă doriți să inserați un tabel într-o zonă mică de pe site-ul dvs. Ar trebui să navigați la Meniu Format > Opțiuni responsive. Apoi selectați Tip responsiv > Antet repetat.

Vor exista opțiuni de personalizare în funcție de cerințele dumneavoastră:

• Punct de întrerupere responsiv (px): Selectați o valoare a punctului de întrerupere în pixeli pentru a defini când tabelul va comuta la acest mod responsiv
• Înălțime maximă responsivă (px): Când modul responsiv este activat, în funcție de valoarea punctului de întrerupere, definește o înălțime maximă pentru a evita un tabel foarte lung
• Stilizare mod responsiv: Aplicați un stil implicit pentru acest mod responsiv sau utilizați culorile tabelului

După aceea, puteți vedea cum va arăta tabelul pe frontend.

Dacă utilizați Antet repetat și Filtru este activată, puteți filtra tastând în caseta de text din vizualizarea mobilă.

9. Export în Excel

Pentru a salva tabelul pe PC, trebuie să accesați Meniul Tabel și să faceți clic pe Exportă Excel . Tipul fișierului va fi *.xlsx după exportarea pe frontend.

10. Paginarea

Puteți găsi această funcție în meniul Format > Paginare din fiecare ediție de tabel. Folosiți butonul de comutare pentru a activa și a alege numărul de rânduri care vor fi afișate pe o pagină.

11. Stilizarea marginilor celulelor

Puteți aplica tipuri de chenar pentru tabel, cum ar fi lățimea chenarului, culoarea chenarului, stilul chenarului. Mai întâi, selectați intervalul de celule, apoi faceți clic pe pictograma din bara de instrumente.

12. Imprimați tabelul pe frontend

Uneori, trebuie să imprimați tabelul. Așadar, pentru a afișa butonul Imprimare pe frontend, mai întâi trebuie să navigați la Meniul Tabel și să bifați butonul Imprimare.