Pomoc:Unikanie zagnieżdżonych tabel

Czasami rzeczy, które świetnie wyglądają na komputerach, powodują problemy przy wyświetlaniu treści na urządzeniach mobilnych. Zagnieżdżone table są tego najlepszym przykładem..

Przypomnienie: Zawsze możesz zobaczyć jak artykuł wygląda na urządzeniach mobilnych dodając ?useskin=fandommobile na końcu adresu lub korzystając z narzędzi deweloperskich przeglądarki.

Dlaczego zagnieżdżone tabele są złe?

Tabele zawsze starają dostosować się do dostępnej szerokości. Gdy brakuje na nie miejsca, rosną w pionie. Jeśli wewnątrz tabeli umieścisz kolejną tabelę, ta wewnętrzna tabela może „rozepchnąć” swoją komórkę, przez co cała zewnętrzna tabela stanie się zbyt szeroka i duża część treści przestaje być widoczna.

Powoduje to ucinanie części treści, zwłaszcza na mniejszych ekranach, takich jak telefony i tablety. Użytkownicy są zmuszeni do przewijania w poziomie, aby zobaczyć całą zawartość, co jest złym doświadczeniem dla użytkownika.

Jak naprawić zagnieżdzone tabele?

Lepszym rozwiązaniem jest rozdzielenie złożonej tabeli na kilka prostych. Jeśli zależy Ci na zachowaniu dotychczasowego układu, rozważ ustawienie wielu tabeli obok siebie — pozwoli to uzyskać ten sam efekt na dużym ekranie, jednocześnie pozwalając przeglądarce dostosowanie ich w razie potrzeby.

Co zrobić jeśli Twoja społeczność używa zagnieżdżonych tabel?

Znajdowanie zagnieżdżonych tabel

W trybie źródłowym, tabele możesz rozpoznać po charakterystycznych dla nich znacznikach:

  • {| oraz |} w wikitekście
  • <table> oraz </table> w HTMLu.

Jeśli zobaczysz początek tabeli i zanim trafisz na znacznik zamykający, trafisz na otwarcie nowej tabeli oznacz to, że masz do czynienia z zagnieżdżonymi tabelami. Czasami mogą mieć nawet kilka warstw.

Przykładowy kod zagnieżdżonej tabeli

Przykładowy kod zagnieżdżonej tabeli

Dzielenie tabel na mniejsze

Najpierw sprawdź, ile tabel znajduje się wewnątrz głównej tabeli. Skup się szczególnie na tych najbardziej „zagłębionych”.

Zacznij od najgłębiej zagnieżdżonych tabel i przenoś je na zewnątrz — jedna po drugiej. Po każdym przeniesieniu użyj przycisku „Podgląd”, aby sprawdzić, jak tabela wygląda samodzielnie. Jeśli coś wygląda nie tak, sprawdź ustawienia tabeli – parametry znajdują się zaraz po znaku {| w kodzie źródłowym.

Kiedy wszystkie zagnieżdżone tabele zostały już wyciągnięte, możesz usunąć główną, zewnętrzną tabelę. Teraz wszystkie tabele powinny być ułożone jedna pod drugą – co jest dużo lepsze dla urządzeń mobilnych.

Jak zachować dotychczasowy układ na komputerze

Tabele powinny być ułożone jedna pod drugą lub obok siebie. Dzięki temu, przeglądarka mobilna będzie mogła przestawić tabele tak, aby prezentowały się najlepiej przy dostępnym miejscu na ekranie.

Największym wyzwaniem jest takie dostosowanie i ustawienie tabel, które jest najlepszym kompromisem miedzy wersją na komputery a widokiem mobilnym. To może wymagać dodania CSS w celu dostosowania wyglądu na komputerach. CSS, zarówno w arkuszu jak i w kodzie, pozwala na kontrolę wyglądu tabeli w pełnej wersji, a pozostawienie domyślnego wyglądu na urządzeniach mobilnych. Jeśli potrzebujesz pomocy w dostosowaniu tabeli, przejrzyj strony w sekcji „Zobacz też”.

Dodatkowe wskazówki

Zwróć uwagę na to, że jeśli do wyświetlania tabeli jest używany szablon, naprawienie zagnieżdżonych tabel w szablonie również naprawi wersję mobilną na wszystkich stronach, które go używają. Oznacza to również, że wprowadzanie optymalizacji w szablonie może mieć wielki wypływ na całą wiki.

Jeśli w tabelach znajdują się obrazy, to komórki je zawierające dostosują swoje wymiary do obrazu. Warto zmniejszyć rozmiar obrazów do rozmiarów przyjaznych dla urządzeń mobilnych, lub całkowite wyciągnąć je z tabeli. Jeśli obraz jest bardzo duży, a znajduje się poza tabelą, mobilna przeglądarka sama dostosuje jego rozmiar, tak aby najlepiej pasował do rozdzielczości ekranu.

Badanie przypadku Brave Frontier Wiki

Społeczność Brave Frontier była chętna zostać naszą świnką doświadczalną/spiskować z nami w celu unicestwienia zagnieżdżonych tabel. Udało nam się skutecznie znaleźć balans między podzieleniem tabeli w ich najważniejszym szablonie (szablonie postaci) oraz zachowaniem wyglądu ich wersji na komputery. W efekcie mamy znacznie lepszą wersję mobilna dla dużej ilości artykułów na ich wiki. Zobaczcie sami:

Jeśli jesteś bardziej technicznym adminem i chcesz się przekonać jakie dokładnie zmiany w kodzie zostały wprowadzone, możesz zobaczyć je tutaj:

Uwaga: kod został zabezpieczony przez niechcianymi zmianami. Jeśli chcesz coś zmienić, skopiuj szablon na swoją wiki lub do brudnopisu.

Zobacz też

Dalsze wsparcie

Szukasz dalszego wsparcia lub masz pytanie? Sprawdź poniższe linki, aby dowiedzieć się więcej.