Responsywne tabele – znane techniki z przykładami

Responsywne tabele – znane techniki z przykładami

Czas płynie, internet się zmienia a my wciąż korzystamy z tabelek. Nie do gridu rzecz jasna. To jedna z podstawowych form prezentacji zbioru danych i jeden z pierwszych elementów dokumentu HTML. Z jakiegoś powodu, tabela nie ewoluowała z czasem jak reszta a dziś walczymy z nią na małym ekranie.

Natura problemu

Tabele nie współpracują z ideą responsive web design. Często bywają długie i obszerne. Pojedynczy wiersz nie może się zawijać aby tabela nie straciła sensu. Z drugiej strony duża ilość kolumn powoduje, że na małej ilości miejsca, dane nachodzą na siebie i tracą kompletnie czytelność.

Co zrobić zatem gdy ekran jest węższy niż minimalna szerokość tabeli? Cóż… możesz zmniejszyć rozmiar czcionki i paddingi ale tekst będzie zbyt mały by móc go czytać. Możesz również powiększyć widok i przewijać myszą lub gestami ale to niewygodne bo często potrzeba nam widzieć cały wers.

Responsywne tabelki - natura problemu

Co zatem zrobić by tabela stała się w pełni funkcjonalna i dobrze wyglądała na urządzeniach mobilnych? Poniżej znajdziesz listę sprawdzonych rozwiązań. Jak to w życiu bywa, każde rozwiązanie ma swoje wady i zalety. Metoda, którą wybierzesz zależy wyłącznie od Ciebie i od tego co musisz w danym momencie osiągnąć.

Media Queries

Jedną z metod RWD dostosowywania tabelek jest użycie media queries oraz psedoelementów. W tym przykładzie każdy element tabeli wyświetlany jest do pewnej szerokości ekranu blokowo. Oznacza to, że nie działają reguły opływania komórek a każda wyświetlana jest jedna pod drugą. Atrybut content pozwala wyświetlić nagłówek czego dana pozycja dotyczy. Dzięki temu ukrywając sekcję thead zachowujemy strukturę informacji.

See the Pen Responsive Table by Alico (@alico) on CodePen.light

W przykładzie pokusiłbym się jeszcze o wykorzystanie data-attribute by nie zapisywać nagłówków tabeli w pliku CSS bo to niewygodne i nieeleganckie.
Wystarczy do odpowiedniej komórki dodać na przykład data-th="CODE" a następnie pobrać tę wartość w CSS w taki sposób: content: attr(data-th).

JavaScript

Kolejną z technik organizacji tabel na urządzeniach mobilnych jest wykorzystanie JavaScript do dynamicznej zmiany układu i przenoszenia elementów. Powie ktoś, że to „nieładne” rozwiązanie ale co zrobić gdy na stronie mamy dużo rozbudowanych tabel? Ręczne dostosowywanie ich za pomocą CSS może się okazać bardzo żmudne.

FooTable

Demo i dokumentacja | Kod

Wtyczka jQuery zaprojektowana z myślą o frameworku Bootstrap lecz równie dobrze radzi sobie bez niego. Podstawową zasadą tej techniki jest ukrywanie wybranych kolumn przy określonych punktach przełamania. Na małym ekranie po kliknięciu w wiersz, kolumny rozwijają się ujawniając bardziej szczegółowe informacje z tabeli.

Oprócz zmiany układu tabeli, FooTable oferuje również przydatne komponenty jak filtrowanie, sortowanie czy wyszukiwarkę danych. Opcją wartą uwagi (w przypadku big data) jest również stronnicowanie.

Tablesaw

Demo | Kod i dokumentacja

Plugin oferuje kilka ciekawych metod wyświetlania tabel:

  • Swipe – tabela ukrywa wybrane kolumny. Użytkownik za pomocą przycisków Poprzedni/Następny zmienia kolumnę, która ma się wyświetlić.
  • Sortable – za pomocą checkboxów użytkownik wybiera, które dane z tabeli mają być wyświetlone.
  • Stack – rozwiązanie pokazane wcześniej przy media queries. Tabela wyświetla kolejne komórki jedna pod drugą.

W połączeniu mechanizmem filtrowania danych a także opcją zaznaczania/odznaczania wierszy, Tablesaw stanowi prawdziwy kombajn w świecie responsywnych tabel.

Na co uważać

Istnieją również mniej zalecane metody reorganizowania tabel. Wiele z nich wykorzystuje powielanie treści lub dynamiczne tworzenie i przemieszczanie wierszy i kolumn. Takie metody tworzą problemy więc zalecam ich unikać.

  1. Często potrzebujmy nadać tabeli unikalny ID . Sklonowana tabela tworzy błąd powielonych identyfikatorów.
  2. Powielanie treści nie jest poprawne pod względem optymalizacji SEO.
  3. Wtyczki JavaScript są OK dopóki nie musimy wyświetlić 50 tabel z ogromną ilością danych. Inicjacja skryptów może drastycznie pogorszyć wydajność strony bo wymaga wielu manipulacji drzewa DOM i nasłuchiwania zdarzeń.

Podsumowanie

Czy to już wszystko? W zasadzie omówione zostały najczęściej spotykane i sprawdzone techniki responsywnych tabel. Ja preferuję metodę z media queries ponieważ nie wymaga żadnych dodatkowych skryptów. Pluginy jQuery mogą okazać się wybawieniem w przypadku większej ilości danych i potrzeby ich sortowania. Należy jednak pamiętać o kwestiach wydajnościowych i zawsze szukać najprostszej drogi.

Czy tabela musi być tabelą? Każdy odpowie coś innego… Moim zdaniem zamiast walczyć z wyglądem nieszczęsnej tabelki, zawsze możesz opakować dane w kilka div-ów i manipulować nimi do woli z poziomu CSS.

Newsletter

Maksymalnie raz w miesiącu dostaniesz powiadomienie o nowych wpisach.
Zapisz się do newslettera — ja nie śmiecę.

Ta strona wykorzystuje pliki cookies wyłącznie w celach statystycznych.