WP Table Manager: Styling Tables

1. Format

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

Możesz wybrać wartość procentową dla edytora tabeli. Oznacza to, że możesz powiększać/pomniejszać tabelę w zakresie od 50% do 200%.

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ć px dla kolumn lub wierszy. Kliknij Gotowe , aby zakończyć.

2. Motywy i opcje

wyboru motywu znajdziesz w menu Motyw. Wystarczy kliknąć motyw, aby go zastosować.

Alternatywne kolory

W tym samym menu Motyw > Kolory alternatywne funkcja „Automatyczne stylizowanie” pozwala na pokolorowanie linii w tabeli za pomocą nagłówka i Stopki . Możesz wybrać style szablonu lub utworzyć własne w ustawieniach wtyczki.

Możesz usunąć alternatywny kolor, klikając „Usuń >  Usuń automatyczny styl” w menu kontekstowym. Po potwierdzeniu kolor zostanie usunięty.

Wyrównanie tabeli

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

Wyróżnianie komórek

Podświetlanie komórek jest również dostępne opcjonalnie. Funkcję tę można włączyć w konfiguracji. Domyślnie jest wyłączona. Możesz wybrać wiersz podświetlenia, aby dostosować kolor i krycie podświetlenia.

3. Dodaj podpowiedź do komórek

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

Możesz ustawić szerokość podpowiedzi w pikselach. Przeniesie Cię to do podpowiedzi z edytorem, który możesz edytować.

Dodaj treść i zapisz. Gotowe. Podpowiedź zostanie wyświetlona publicznie po najechaniu myszką.

4. Zamrażanie wierszy i kolumn

Zamrażanie kolumny

Zamrożenie kolumn jest dostępne w menu Format > Opcje responsywne . Można zamrozić do 5 kolumn. Liczenie odbywa się od pierwszej kolumny.

Aby zamrozić kolor/wiersz, dostępna jest dodatkowa opcja umożliwiająca ustalenie wysokości tabeli (ponieważ kontener tabeli może mieć nieskończoną wysokość).

Po wybraniu kolumny do zamrożenia będziesz mieć możliwość przewijania tabeli i zawsze będziesz wyświetlać ustaloną kolumnę.

Zamrażanie rzędów

Można to znaleźć w Format menu > Nagłówek tabeli . W tym miejscu można włączyć opcję i ustawić zamrożenie wierszy (maksymalnie 5 wierszy).

Jeśli chcesz ustawić wysokość tabeli, wróć do opcji responsywnych.

Następnie pierwszy wiersz zostanie zamrożony na froncie zgodnie z ustawieniem.

5. Sortowanie i filtrowanie

Jeśli chcesz posortować lub filtrować tabelę, przejdź do Format menu > Sortowanie i filtry .

Następnie pojawi się okno zawierające opcje sortowania i filtrowania. 

Jeśli chcesz posortować tabelę, po prostu włącz sortowania w interfejsie . Możesz wybrać kolumnę do domyślnego sortowania i jej kierunek.

Na przykład w tym przypadku wybierz kolumnę A z ASC .

Istnieją 2 opcje filtrowania:

• Wewnątrz kolumny: możesz filtrować dane w nagłówku każdej kolumny. Przycisk przełączający pozwala wyświetlić lub ukryć pole wyszukiwania w nagłówku.

• Formularz zaawansowanego filtrowania: po wybraniu tej opcji można wyszukiwać i filtrować dane w tabeli

Wyszukiwanie główne: Po włączeniu tej funkcji w interfejsie użytkownika pojawi się pole wyszukiwania. Dzięki temu użytkownicy będą mogli łatwo przeszukiwać wszystkie dane w tabeli.

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

Ikonę obramowania znajdziesz na pasku narzędzi. Umożliwia ona dostosowanie odstępu i promienia obramowania komórki.

7. Niestandardowy CSS

Pójdźmy o krok dalej. Jeśli jesteś projektantem stron internetowych i znasz CSS, będziesz mógł dodać CSS w sekcji Format menu > Niestandardowy CSS.

Kod CSS jest kolorowany za pomocą mechanizmu lustrzanego kodu i można go zapisać przy użyciu mniejszej ilości kodu CSS. To też działa!

Komórki, wiersze i kolumny mają współrzędne, które pozwalają na ich identyfikację i zastosowanie niestandardowego kodu CSS. R oznacza wiersz, C oznacza kolumnę.

8. Responsywne tabele WordPress

Czy moje tabele są responsywne i korzystają z przewijania na małych urządzeniach?

Ukrywanie Cols

WP Table Manager obsługuje responsywny projekt za pomocą narzędzia priorytetowego, jako opcję. Domyślnie funkcja responsywności jest wyłączona, co spowoduje przepełnienie (co jednak działa świetnie na urządzeniach mobilnych). Aby skorzystać z ukrywania kolumn , należy przejść do Formatu menu > Opcje responsywne.

Tryb responsywny jest zaawansowany, można zdefiniować priorytet ukrywania kolumn w wersjach mobilnych. Po ukryciu kolumn, na urządzeniu mobilnym pojawi się menu z polem wyboru, które wymusi wyświetlanie/ukrywanie kolumn.
Rozmiar kolumn jest ustalany podczas edycji tabeli. Jeśli rozmiar wszystkich kolumn będzie zbyt duży dla kontenera, pojawi się przepełnienie, co umożliwi łatwe przewijanie na urządzeniach mobilnych.

Tabela z przewijaniem (lepsza przy małej liczbie kolumn)

Tabela z ukrytą kolumną (lepsza w przypadku dużej liczby kolumn)

Powtarzający się nagłówek

To kolejna opcja, jeśli chcesz wstawić tabelę na małym obszarze witryny. Przejdź do Formatu menu > Opcje responsywne. Następnie wybierz Typ responsywny > Powtarzający się nagłówek.

Dostępne będą opcje dostosowywania do Twoich potrzeb:

• Punkt przerwania responsywnego (px): Wybierz wartość punktu przerwania w pikselach, aby określić, kiedy tabela przełączy się na ten tryb responsywny
• Maksymalna wysokość responsywna (px): Po aktywowaniu trybu responsywnego, w zależności od wartości punktu przerwania, zdefiniuj maksymalną wysokość, aby uniknąć bardzo długiej tabeli
• Stylizacja trybu responsywnego: Zastosuj domyślny styl dla tego trybu responsywnego lub użyj kolorów tabeli

Następnie możesz zobaczyć jak tabela będzie wyglądała w interfejsie użytkownika.

Jeśli używasz powtarzającego się nagłówka i Filtr jest włączona, możesz filtrować, wpisując tekst w polu tekstowym w widoku mobilnym.

9. Eksportuj do Excela

Aby zapisać tabelę na komputerze, należy przejść do menu „Tabela” i kliknąć przycisk „Eksportuj do Excela” . Po wyeksportowaniu do interfejsu użytkownika plik będzie miał format *.xlsx.

10. Paginacja

Tę funkcję znajdziesz w menu Format > Paginacja w każdej edycji tabeli. Użyj przycisku przełączającego, aby włączyć i wybrać liczbę wierszy wyświetlanych na stronie.

11. Stylizacja obramowania komórek

Możesz zastosować typy obramowania dla swojej tabeli, takie jak szerokość, kolor i styl obramowania. Najpierw zaznacz zakres komórek, a następnie kliknij ikonę na pasku narzędzi.

12. Wydrukuj tabelę na front-endzie

Czasami musisz wydrukować swoją tabelę. Aby więc wyświetlić przycisk „Drukuj” w interfejsie, najpierw przejdź do menu „Tabela” i zaznacz przycisk „Drukuj”.