WP Table Manager : Styling Tables

1. Format

Na pasku narzędzi można ustawić styl komórki, taki jak: czcionka, rozmiar czcionki, styl tekstu, kolor tła komórki, kolor tekstu, wyrównanie w poziomie i pionie komórki, ... Można go zastosować do pojedynczej komórki lub wielu komórek

 

stylowy stół

 

Wysokość wiersza i szerokość kolumny można zdefiniować w pikselach. Przejdź do menu Format> Zastosuj rozmiar kolumny / linii , a następnie wybierz Zmień rozmiar kolumny / Zmień rozmiar wiersza . W wyskakującym okienku możesz wybrać zakres i ustawić piksel dla kolumn lub wierszy. Kliknij przycisk Gotowe, aby zakończyć.

 

zmień rozmiar kolumny

 

2. Opcje motywu i sortowania

W każdej tabeli można znaleźć opcję wyboru motywu w opcji Motyw menu. Po prostu kliknij motyw, aby go zastosować.

Zastosowanie motywu spowoduje zastąpienie wszystkich danych i stylu w tabeli. Aby kontynuować, należy zastosować motyw, a następnie edytować dane, aby utworzyć własny motyw, a następnie zduplikować tabele.

 

wybór motywu

 

W tym samym Motyw menu> Kolory alternatywne funkcja „Automatyczne stylizowanie” pomaga pokolorować linię na stole za pomocą opcji Styl nagłówka i Stopka . Możesz wybrać style szablonów lub stworzyć własne w ustawieniach wtyczki.

 

motyw zmieniający kolor

 

Parametr sortable umożliwia sortowanie danych AJAX w interfejsie użytkownika. Możesz zobaczyć w menu Format> Sortuj .

 

tabela sortowania

 

Wyrównanie tabeli polega na wyrównaniu elementów div zawierających całą tabelę, na przykład wyśrodkowaniu całej tabeli. Możesz znaleźć w Format menu> Wyrównaj tabelę .

 

wyrównanie tabeli

 

Podświetlenie komórki jest również dostępne jako opcja. Możesz włączyć tę funkcję w konfiguracji. Domyślnie jest wyłączone. Możesz wybrać kolor podświetlenia, dopasować kolor i krycie podświetlenia.

 

podświetlanie tabeli

 

3. Dodaj podpowiedź do komórek

Na każdej komórce w tabeli możesz zobaczyć opcję Dodaj podpowiedź po kliknięciu jej prawym przyciskiem myszy.

 

dodaj etykietkę

 

Możesz ustawić szerokość podpowiedzi w pikselach. Spowoduje to wyświetlenie podpowiedzi z edytorem do edycji.

 

edytor podpowiedzi

 

Dodaj treść i zapisz, gotowe! Etykietka wyświetli się po stronie publicznej po najechaniu myszką.

 

przeciągnij etykietkę

 

4. Zamrażanie rzędów i kolumn

Zamrażanie kolumny

Zamrażanie kolumn jest dostępne w Format menu > Opcje responsywne . Możesz zablokować do 5 kolumn. Jest liczony od pierwszego kol.

 

kolumna zamrażająca

 

Aby zamrozić kolumnę / wiersz, istnieje dodatkowa opcja, która pozwala ustalić wysokość tabeli (ponieważ twój kontener tabeli może mieć nieskończoną wysokość).

 

wysokość stołu

 

Po wybraniu kolumny do zamrożenia będziesz mógł przewijać tabelę i zawsze wyświetlać stałą kolumnę.

 

naprawianie wyświetlania linii

Zamrażanie rzędów

Możesz go znaleźć w Format menu> Nagłówek tabeli , tutaj możesz włączyć opcję i ustawić wiersze do zamrożenia (do 5 wierszy).

 

wiersz-zamrożenie-nagłówka-tabeli

 

Jeśli chcesz ustawić wysokość stołu, wróć do opcji responsywnych.

Następnie pierwszy wiersz zostanie zamrożony na interfejsie użytkownika zgodnie z ustawieniem.

 

zamrażanie wierszy

 

5. Filtrowanie danych kolumn

Opcja filtrowania jest dostępna w menu Format  > Filtry . Możesz go aktywować, klikając, aby włączyć pola filtrowania danych publicznych.

 

kolumna filtrująca

 

Przykład filtrów:

 

responsywne przewijanie tabeli

 

6. Wypełnienie komórek i promień obramowania

Na pasku narzędzi można znaleźć ikonę obramowania, która pomaga dostosować dopełnienie i promień obramowania komórki.

 

padding-border

 

Zwróć uwagę, że jeśli zastosowałeś motyw, niektóre niestandardowe pliki CSS zostaną dodane automatycznie. Oczywiście nadal możesz go edytować.

 

7. Niestandardowy CSS

Wyjdźmy o krok dalej. Jeśli jesteś projektantem stron internetowych z umiejętnościami CSS, możesz dodać css w Format menu> Niestandardowy CSS.

 

format-custom-css

 

Kod CSS jest pokolorowany za pomocą lustra kodu i może być napisany w mniej CSS, to też działa!

 

custom-table-css

 

Komórki, linia, kolumny mają współrzędne, które identyfikują każdą z nich i stosują niestandardowy css. R to wiersz, C to kolumna.

 

wyświetlanie css

 

8. Responsywne tabele WordPress

Czy moje tabele reagują, czy używają przewijania na małych urządzeniach?

Ukrywanie kolęd

Opcjonalnie WP Table Manager obsługuje responsywny projekt za pomocą narzędzia priorytetowego. Domyślnie funkcja responsywności jest wyłączona, wystąpi przepełnienie (chociaż działa świetnie na urządzeniach mobilnych). Aby skorzystać z opcji Hiding Cols , należy przejść do Menu Format> Responsive options.

 

responsive-hiding-col

 

Tryb responsywny jest zaawansowany, możesz zdefiniować priorytet ukrywania kolumn w rozmiarach mobilnych.
Gdy kolumny są ukryte, zostanie wyświetlone mobilne menu z polem wyboru, aby wymusić wyświetlanie / ukrywanie kolumn. Rozmiar kolumn jest ustalany podczas edycji tabeli. Jeśli rozmiar wszystkich kolumn jest zbyt duży dla kontenera, pojawi się przepełnienie i będziesz mógł łatwo przewijać na urządzeniach mobilnych.

Tabela ze zwojem (lepiej dla małej ilości kolumn)

 

responsywne przewijanie tabeli

 

Tabela z ukrytą kolumną (lepiej dla dużej liczby kolumn)

 

57bb0cb0ac948

 

Powtarzający się nagłówek

To kolejna opcja, jeśli chcesz wstawić tabelę w małym obszarze witryny. Powinieneś przejść do Format menu> Opcje responsywne. Następnie wybierz Typ responsywny> Powtarzany nagłówek.

 

powtórzony nagłówek

Będą dostępne opcje dostosowania zgodnie z Twoim żądaniem:

  • Responsywny punkt przerwania ( piksele ): wybierz wartość punktu przerwania w pikselach, aby określić, kiedy tabela będzie przełączać się w ten tryb responsywny
  • Responsive max-height (px): gdy tryb responsywny jest aktywny, w zależności od wartości punktu przerwania, zdefiniuj maksymalną wysokość, aby uniknąć bardzo długiej tabeli
  • Styl responsywny : zastosuj domyślny styl dla tego trybu responsywnego lub użyj kolorów tabeli

Następnie możesz zobaczyć, jak będzie wyglądać tabela na interfejsie.

 

powtórzony nagłówek frontend

 

 

9. Pobierz tabelę

Aby udostępnić swój stół publicznie, należy włączyć opcję przycisku Pobierz w zakładce Tabela w prawym panelu. Typ pliku to * .xlsx.

 

tabela pobierania

 

10. Paginacja

Możesz znaleźć tę funkcję na karcie Menu> Format w każdej tabeli. Użyj przycisku przełączania, aby włączyć i wybrać liczbę wierszy do wyświetlenia na stronie.

 

pagination-wptm