Tabele HTML, kiedyś powszechnie używane w układach stron internetowych, są teraz bólem głowy dla wielu projektantów stron internetowych. Stoły często najlepiej sprawdzają się przy stałych szerokościach, co oznacza, że mogą siać spustoszenie w responsywnych projektach witryn o doskonałych pikselach. Więc co robi WordPresser?

Pierwszą rzeczą do zrobienia z tabel jest ich używać oszczędnie. Tabele powinny być używane do danych tabelarycznych i nic więcej.

Nie jesteś pewien, czy tabela jest odpowiednią opcją dla określonego zestawu danych? Umieść to w teście arkusza kalkulacyjnego. Czy dane te mają sens przedstawione w arkuszu kalkulacyjnym?

Jeśli tak, to odpowiednim wyborem jest tabela HTML. Jeśli nie, rozważ użycie listy lub innego elementu do prezentacji danych.

Po zidentyfikowaniu tabeli jako najlepszej opcji, co wtedy? Upewnij się, że renderuje się pięknie niezależnie od wielkości urządzenia, które ogląda stół. Łatwiej powiedzieć niż zrobić, prawda?

Nie bój się. W tym samouczku dowiesz się o pięciu różnych narzędziach, których możesz użyć, aby tabele HTML były pięknie responsywne.

Jak Obsługiwane są tabele przez WordPress?

Nie ma prostej odpowiedzi na to pytanie. Sposób prezentacji tabel w WordPress różni się w zależności od motywu, ponieważ stylizacja tabel jest obsługiwana przez CSS dostarczany z każdym motywem.

Tak więc tabele są renderowane zgodnie z regułami CSS dołączonymi do aktywnego motywu. Zmieniaj motywy i sposób renderowania tabel.

Niektóre motywy mają lepszą wbudowaną obsługę responsywnych tabel niż inne. Na przykład TwentySixteen dobrze radzi sobie z tabelami, o ile mają tylko dwie lub trzy kolumny wypełnione krótkimi bitami danych.

Jednak nie wszystkie motywy są tak dokładnie zaprojektowane jak TwentySixteen.

Przyjrzyjmy się, jak TwentySixteen radzi sobie z tabelą HTML podczas renderowania na urządzeniu przenośnym. Oto trochę HTML, który stworzy tabelę z pięcioma kolumnami i sześcioma wierszami.

Pokazuje najpopularniejsze systemy zarządzania treścią według W3Techs.

Ładowanie gist jpen365 / 690646da6b8a6926f49b0c2f50a4b197

Po wrzuceniu do postu z aktywowanym motywem dziecięcym TwentySixteen, ta tabela wygląda całkiem dobrze oglądana na laptopie lub monitorze stacjonarnym. To oczywiste, że TwentySixteen zawiera przemyślaną stylizację stołu.

Możemy użyć Chrome Developer Tools device Mode, aby zobaczyć, jak rzeczy wyglądają na mniejszym urządzeniu.

screenshot of table with no plugins installed
Stół bez zainstalowanych wtyczek.

To nie jest idealne.

Programiści TwentySixteen zawierali style CSS, które sprawiają, że tabele są responsywne. Gdyby ta tabela zawierała tylko dwie lub trzy kolumny, prawdopodobnie wyglądałaby całkiem dobrze.

Jednak ta tabela zawiera pięć kolumn, co jest zbyt dużo dla domyślnej stylizacji tabeli zawartej w TwentySixteen.

Naprawmy Ten stół.

Ręczne Dostosowywanie Tabel

Pierwszą opcją, na którą przyjrzymy się, jest ręczna poprawka, która obejmuje dodanie CSS i JavaScript do motywu. To może wydawać się trudne, ale w rzeczywistości jest całkiem proste.

Aby tabele były responsywne, potrzebujemy trzech rzeczy:

  • Prawidłowo sformatowana tabela HTML.
  • Krótki bit JavaScript do kojarzenia każdej komórki nagłówka tabeli z komórkami danych pojawiającymi się w tej samej kolumnie tabeli.
  • Prosty zestaw reguł CSS, który zostanie uruchomiony, gdy wyświetlacz zmniejszy się poniżej określonej szerokości. Ten bit CSS zmieni układ wierszy tabeli w kolumny, ukryje wiersz komórek nagłówków i doda zawartość komórek nagłówków do każdej komórki danych.

Ważne jest, aby pamiętać, że tabela musi być odpowiednio sformatowany, aby to działało.

Skrypt jest przeznaczony do wyszukiwania komórek nagłówkowych w thead element i przypisać je jako atrybuty HTML do komórek danych w tbody element.

Jeśli tworzysz tabelę nie zawiera thead oraz tbody elementy kod nie będzie działać.

Oto JavaScript, którego będziemy używać:

Ładowanie gist jpen365 / f34bbff7d9db99f912e1e75193071718

A oto odpowiedni CSS.

Ładowanie gist jpen365/337ee996d81ad4b6ea62474b3639df3b

Najprostszym sposobem użycia tego kodu jest dodanie go bezpośrednio do posta lub strony, na której pojawia się tabela. Możesz to zrobić, upuszczając CSS pomiędzy styl znaczników, oraz upuszczanie JavaScript pomiędzy skrypt tagi.

Jeśli zdecydujesz się to zrobić, upewnij się, że zminimalizujesz JavaScript przed upuszczeniem go do edytora tekstu lub funkcja wpautop doda podziały akapitów do skryptu, łamiąc go w trakcie.

screenshot of wordpress post editor with css and minified javascript added to end of post.
Edytor postów WordPress z CSS i minified javascript dodany na końcu postu.

Wynik jest rzeczywiście bardzo ładny. Oto jak wygląda tabela podczas podglądu z iPhone5 preview w Google Chrome.

screenshot of table with manual css and javascript added
Dodano tabelę z ręcznym CSS i javascript.

Lepszy sposób na stoły

Dodawanie CSS i JavaScript bezpośrednio do posta nie jest najlepsze sposób na dodanie kodu.

Jeśli kiedykolwiek użyjesz tego kodu tylko raz, dodanie go bezpośrednio do posta lub strony, na której pojawia się tabela, jest w porządku.

Jeśli jednak zamierzasz regularnie korzystać z tabel, lepszym sposobem dodania kodu jest osadzenie go bezpośrednio w plikach motywów.

Dodanie kodu do motywu naprawdę nie jest takie trudne. Możesz to zrobić w zaledwie czterech krokach.

  • Najpierw upewnij się, że używasz motywu podrzędnego, aby uniknąć utraty pracy przy następnej aktualizacji motywu.
  • Po drugie, skopiuj i wklej CSS do motywu styl.css plik.
  • Po trzecie, Zapisz JavaScript jako osobny plik i prześlij go do katalogu motywu.
  • Po czwarte, użyj wp_enqueue_script funkcja w Twoich motywach funkcje.php plik, aby dodać zasób JavaScript do motywu, upewniając się, aby ustawić in_footer za prawdziwe, kiedy to robisz.

Najtrudniejszą częścią procesu jest dodanie pliku skryptu z wp_enqueue_script ale mogę zrobić ten krok trochę łatwiej.

Oto fragment kodu, który możesz dodać do funkcje.php plik, który doda plik JavaScript do motywu zakładając, że plik JavaScript responsive-stoły.js i umieść go w głównym katalogu tematycznym.

Ładowanie gist jpen365 / edbaff053f33d0d44d219a0a2687d802

Twój funkcje.php plik może wyglądać nieco inaczej, ale daje to wyobrażenie o tym, jak powinna wyglądać funkcja enqueue.

WPMU dev writer i programista WordPress Daniel Pataki omówił wp_enqueue_script funkcja dogłębnie na tym blogu. Możesz więc odnieść się do tego samouczka–tak jak ja-jeśli zmagasz się z tym krokiem.

Po wykonaniu wszystkich czterech kroków CSS i JavaScript będą dostępne na każdej stronie witryny, a wszelkie tabele w witrynie będą responsywne.

Dobra robota.

Używanie wtyczki do tworzenia tabeli

Oczywiście, może nie chcesz iść do tych wszystkich problemów i po prostu wolisz użyć wtyczki tabeli WordPress.

Z pewnością istnieje wiele wtyczek tabel w katalogu wtyczek WordPress, z których wiele twierdzi, że tabele są responsywne.

Aby zaoszczędzić czas na szukaniu, sprawdź nasz post na temat wyboru najlepszej wtyczki tabeli WordPress, która porównuje różne responsywne wtyczki tabeli, które wykonują dobrą robotę renderowania tabel na urządzeniach o dowolnej wielkości.

Pamiętaj jednak, że te wtyczki nie wpłyną na żadne istniejące tabele już dodane do twojej witryny. Jeśli szukasz wtyczki, która naprawi tabele z mocą wsteczną, sprawdź poniższe wtyczki.

  • Magic Liquidizer Responsive Table

    Ta wtyczka jest zaprojektowana do tworzenia standardowego HTML tabela elementy reagują. Wszystko, co musisz zrobić, to zainstalować i aktywować wtyczkę, a wszelkie tabele osadzone w postach i stronach będą magicznie upłynnione (made responsive).

    Strona ustawienia wtyczki zawiera opcję określenia szerokości widoku, przy której działają ustawienia responsywne.

    Jeśli tabele zbyt szybko przechodzą w tryb responsywny lub przerywają układ przed przejściem na tryb responsywny, możesz dostosować szerokość widoku.

    Ponadto, jeśli wtyczka nie działa za pomocą tabela element jako selektor, można również ustawić wtyczkę do wyboru tabel przez # id lub .Klasa.

    Co właściwie robi Wtyczka to dodaje Wyświetlacz: Brak; do tabeli CSS przy ustawionej szerokości widoku. Następnie używa JavaScript, aby odbudować tabelę jako listę opisów HTML.

    Nagłówki są dodawane jako terminy, a wartości tabeli są dodawane jako definicje. Oto wynik.

    screenshot of table with magic liquidizer plugin
    Table created with Magic Liquidizer Responsive Table plugin.

    Być może zauważyłeś, że podpis tabeli nie został odebrany i wyświetlony przez tę wtyczkę.

    Jeśli używasz tej wtyczki, będziesz chciał uniknąć używania podpis ponieważ nie będzie wyświetlany, gdy tabela jest wyświetlana w trybie responsywnym.

    Zainteresowany Magic Liquidizer Responsive Table?

    Pobierz
  • Automatyczne Tablice Responsywne

    screenshot of auto responsive tables plugin from wp.org

    Ta super prosta wtyczka robi dokładnie to, co mówi, że zrobi: automatycznie spraw, aby Twoje tabele były responsywne. Zainstaluj go, Aktywuj, skonfiguruj kilka podstawowych ustawień, a wszystkie tabele HTML osadzone w postach i stronach będą renderowane responsywnie.

    Po zainstalowaniu wtyczki odwiedź Ustawienia > Responsywne Stoły aby skonfigurować wtyczkę.

    Najpierw zaznacz pole wyboru, aby tabele były responsywne, następnie ustaw punkt przerwania, w którym powinny przełączyć się w tryb responsywny, a następnie zdecyduj, w jaki sposób mają być stylizowane.

    Wybranie domyślnych opcji stylizacji spowoduje utworzenie tabeli, która wygląda następująco:

    screenshot of table with auto responsive tables plugin
    Table created with Automatic Responsive Tables plugin.

    Całkiem nieźle, prawda? Jak to działa?

    Podobnie jak Magic Liquidizer, ten plugin dodaje Wyświetlacz: Brak; do tabeli i przebudowuje tabele przy użyciu JavaScript.

    Jednak zamiast używać znaczącej semantycznie listy opisów, ta wtyczka buduje tabelę responsywną z elementów div.

    Efekt końcowy wygląda naprawdę ładnie, ale z punktu widzenia semantyki znaczniki nie są idealne.

    Ponadto warto zauważyć, że ta wtyczka nie renderuje podpisu tabeli w trybie responsywnym. Musisz więc znaleźć inny sposób dodania podpisu lub tytułu tabeli.

    Interesują Cię automatyczne Tablice responsywne?

    Pobierz

Która opcja jest dla ciebie odpowiednia?

To zależy.

Jak często korzystasz z tabel?

Jakie zestawy danych prezentujesz w tabelach HTML?

Czy chcesz wtyczkę, która robi wszystkie ciężkie rzeczy, czy chcesz być praktyczny z kodem swojej witryny?

Sposób, w jaki odpowiesz na te pytania, pomoże określić, które z tych narzędzi jest odpowiednie dla Twojej witryny WordPress.

  • Potrzebujesz potężnego narzędzia do tworzenia złożonych tabel, które można sortować i przeszukiwać? Czy masz do czynienia z dużymi zbiorami danych i tabelami o stałej szerokości, które chcesz przewijać bez naruszania responsywnego projektu witryny? Następnie wybierz jedną z wtyczek, które sprawdziliśmy w tym poście.
  • Czy lubisz grzebać w kodzie i chcesz ręcznie wykonane rozwiązanie, które jest lekkie na zasoby i wygląda pięknie? Wypróbuj ręczną implementację i dostosuj ją, aby była twoja.
  • Szukasz tylko łatwego przycisku? Spójrz na automatyczne responsywne tabele lub Magic Liquidizer Responsive Table. Jedno z tych dwóch na pewno cię uszczęśliwi.

Tabele nie muszą wyglądać okropnie na smartfonach i tabletach. Przy odrobinie przezorności i wysiłku możesz użyć tabel HTML na swojej stronie WordPress i sprawić, by wyglądały świetnie na każdym urządzeniu.

Czy korzystasz z tabel HTML? Jak upewnić się, że wyglądają świetnie na każdym urządzeniu? Czy używasz narzędzia lub wtyczki, której nie umieściliśmy na naszej liście?

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…