• 11 min read
• CSS,JavaScript,Design Patterns,Responsive Web Design
• Zapisane do czytania w trybie offline
• Share on Twitter, LinkedIn

Tabele są wzorcem projektowym do wyświetlania dużych ilości danych w wierszach i kolumnach, dzięki czemu są wydajne do wykonywania analiz porównawczych na obiektach kategorycznych. Tabele były używane do tego celu już w II wieku, a kiedy świat zaczął się zmieniać na cyfrowy, tabele przyszły razem z nami.

Nieuniknione było, że sieć będzie wspierać wyświetlanie danych w formacie tabelarycznym. Tabele HTML prezentują dane tabelaryczne w sposób semantyczny i strukturalnie odpowiedni. Jednakże, domyślne style tabel HTML nie są najbardziej estetyczną rzeczą, jaką kiedykolwiek widziałeś. W zależności od pożądanego projektu wizualnego, wymagany jest pewien wysiłek na froncie CSS, aby upiększyć te tabele. Dekadę temu, artykuł z “Top 10 CSS Table Designs” został opublikowany w Smashing Magazine, i do dziś cieszy się sporym zainteresowaniem.

Internet bardzo się rozwinął w ciągu ostatniej dekady, i wygodniej niż kiedykolwiek jest sprawić, by twoja strona lub aplikacja dostosowała się do rzutni, na której jest oglądana. W związku z tym, musimy nadal dokonywać przemyślanych wyborów projektowych, które nie ograniczają dostępności. Ponieważ tabele nie wydają się wychodzić z łask w najbliższym czasie, zobaczmy, jak tabele mogą być tworzone w sieci w 2019 roku.

Opcje tylko CSS

Jeśli Twój zbiór danych nie jest tak duży, a funkcje takie jak paginacja i sortowanie nie są konieczne, to rozważ opcję bez JavaScript. Możesz uzyskać całkiem niezłe rezultaty, które działają dobrze na całej gamie rozmiarów ekranu bez dodatkowej wagi dużej biblioteki.

Niestety, bez pomocy JavaScriptu dla niektórych manipulacji DOM na froncie dostępności, mamy tylko garść opcji CSS-only. Ale dla małych zestawów danych są one często wystarczające.

Opcja 1: Nie rób nic

Zaczniemy od scenariusza niewymagającego dużego wysiłku. Jeśli Twoje dane mieszczą się w tabeli z zaledwie kilkoma kolumnami i wieloma wierszami, to taka tabela jest dość dobrze przystosowana do urządzeń mobilnych już na starcie.

Problemem, jaki byś miał, jest prawdopodobnie zbyt duża ilość miejsca na szerszych ekranach, więc może być wskazane “ograniczenie” maksymalnej szerokości tabeli za pomocą max-width, pozwalając jej jednocześnie zmniejszać się w razie potrzeby na wąskim ekranie.

Ten rodzaj wzorca działa najlepiej, jeśli dane nie są wierszami i liniami tekstu. Jeśli są to dane numeryczne lub krótkie frazy, prawdopodobnie możesz uciec od nie robienia zbyt wiele.

Opcja 2: Style The Scroll

David Bushell napisał o swojej technice dla responsywnych tabel w 2012 roku, która obejmowała wywołanie przepełnienia i umożliwienie użytkownikom przewijania, aby zobaczyć więcej danych. Można by argumentować, że nie jest to dokładnie rozwiązanie responsywne, ale technicznie rzecz biorąc, kontener reaguje na szerokość rzutni.

Spójrzmy najpierw na “podstawowy” overflow. Wyobraź sobie, że używam cudzysłowów wokół basic, ponieważ stylizacja dla przewijanych cieni jest czymś innym. Mimo to, w tym przypadku “basic” odnosi się do faktu, że tabela nie przekształca się w żaden sposób.

Ta technika robienia przewijających się cieni pochodzi od Romy Komarov i Lea Verou, które wykorzystują nawzajem swoje pomysły, aby stworzyć magię. Opiera się ona na użyciu wielu gradientów (liniowych i radialnych) jako obrazów tła na elemencie zawierającym, oraz użyciu background-attachment: local do pozycjonowania tła względem jego zawartości.

Co jest miłe w tej technice, to fakt, że dla przeglądarek, które nie obsługują cieni przewijania, nadal można przewijać tabelę w normalny sposób. Nie łamie to układu w ogóle.

Inną opcją przewijania byłoby odwrócenie nagłówków tabeli z konfiguracji wierszy do konfiguracji kolumn, stosując jednocześnie przewijanie w poziomie zawartości elementu <tbody>. Ta technika wykorzystuje zachowanie Flexbox do przekształcenia wierszy tabeli w kolumny.

Zastosowując display: flex do tabeli, sprawiamy, że elementy <thead> i <tbody> stają się dziećmi flex, które domyślnie są ułożone obok siebie w tej samej linii flex.

Uczynimy również element <tbody> kontenerem flex, przez co wszystkie elementy <tr> w jego obrębie stają się dziećmi flex ułożonymi w jednej linii flex. Wreszcie, każda komórka tabeli musi mieć ustawione wyświetlanie na block zamiast domyślnego table-cell.

Zaletą tej techniki jest to, że nagłówki są zawsze na widoku, jak stały efekt nagłówka, więc użytkownicy nie tracą kontekstu podczas przewijania kolumn danych. Jedną rzeczą, na którą należy zwrócić uwagę jest to, że ta technika skutkuje rozbieżnością kolejności wizualnej i źródłowej, a to czyni rzeczy nieco nieintuicyjnymi.

Sprinkle On Some JavaScript

Jak wspomniano wcześniej, opcje układu, które obejmują morfing tabeli poprzez modyfikację wartości display czasami mają negatywne implikacje dla dostępności, które wymagają pewnych drobnych manipulacji DOM, aby je skorygować.

W dodatku, istnieje wiele wskazówek dotyczących doświadczenia użytkownika, jeśli chodzi o projektowanie tabel danych od Andrew Coyle’a, w tym funkcje takie jak paginacja, sortowanie, filtrowanie i tak dalej (funkcje, które wymagają włączenia niektórych JavaScript).

Jeśli pracujesz z relatywnie prostszym zbiorem danych, być może chciałbyś napisać własne funkcje dla niektórych z tych funkcji.

Rows To Blocks, With Accessibility Fix

O ile mi wiadomo, ta technika responsywnej tabeli danych pochodzi z artykułu CSS-Tricks “Responsive Data Tables” autorstwa Chrisa Coyiera z 2011 roku. Od tego czasu została ona zaadaptowana i rozszerzona przez wiele innych osób.

Istotą tej techniki jest wykorzystanie zapytania o media do przełączenia właściwości display elementu tabeli i jej dzieci na block w wąskiej rzutni.

Na wąskim ekranie nagłówki tabeli są wizualnie ukryte, ale nadal istnieją w drzewie dostępności. Poprzez zastosowanie atrybutów danych do komórek tabeli, możemy następnie wyświetlić etykiety dla danych za pomocą CSS, zachowując zawartość etykiety w HTML. Zapoznaj się z poniższym CodePenem, aby zobaczyć, jak wyglądają znaczniki i style:

Oryginalna metoda stosuje szerokość do pseudoelementu wyświetlającego tekst etykiety, ale to oznacza, że musisz znać ilość miejsca potrzebnego na etykietę na początek. W powyższym przykładzie zastosowano nieco inne podejście, w którym etykieta i dane znajdują się po przeciwnych stronach bloku zawierającego.

Możemy osiągnąć taki efekt za pomocą auto-marginesów w kontekście formatowania flex. Jeśli ustawimy właściwość display dla każdego elementu <td> na flex, ponieważ pseudoelementy generują pola tak, jakby były bezpośrednimi dziećmi swojego elementu wyjściowego, stają się one dziećmi flex elementu <td>.

Potem, jest to kwestia ustawienia margin-right: auto na pseudoelemencie, aby przesunąć zawartość komórki do skrajnej krawędzi komórki.

Innym podejściem do wąskiego układu rzutni jest użycie kombinacji Grid i display: contents. Należy pamiętać, że display: contents w przeglądarkach wspierających ma obecnie problemy z dostępnością, a ta metoda nie powinna być używana w produkcji, dopóki te błędy nie zostaną naprawione.

Ale może czytasz to po rozwiązaniu tych błędów, w takim przypadku, oto alternatywna opcja układu.

Każdy element <tr> jest ustawiony na display: grid, a każdy element <td> jest ustawiony na display: contents. Tylko bezpośrednie dzieci kontenera siatki uczestniczą w kontekście formatowania siatki; w tym przypadku jest to element <td>.

Gdy display: contents jest stosowane do <td>, zostaje “zastąpione” przez jego zawartość, w tym przypadku pseudoelement i <span> wewnątrz <td> stają się dziećmi siatki.

Co podoba mi się w tym podejściu, to możliwość użycia max-content do rozmiaru kolumny pseudoelementów, zapewniając, że kolumna zawsze będzie miała szerokość najdłuższej etykiety, bez konieczności ręcznego przypisywania wartości szerokości dla niej.

W przyszłości, gdy wartości min-content, max-content i fit-content (objęte przez CSS Intrinsic & Extrinsic Sizing Module Level 3) będą obsługiwane jako ogólne wartości width i height, będziemy mieli jeszcze więcej opcji układania rzeczy.

Wadą tego podejścia jest to, że potrzebujesz dodatkowego <span> lub <p> wokół treści w komórce tabeli, jeśli już go nie ma, w przeciwnym razie, nie byłoby sposobu na zastosowanie do niej stylów.

Prosta paginacja

Ten przykład pokazuje podstawową implementację paginacji, która została zmodyfikowana poza CodePen przez Gjore Milevskiego, aby paginować w wierszach tabeli zamiast w divach. Jest to rozszerzenie przykładu “style the scroll” omówionego w poprzedniej sekcji.

Z perspektywy układu, Flexbox jest bardzo przydatny do pozycjonowania elementów paginacji w różnych rozmiarach rzutni. Różne projekty będą miały różne wymagania, ale uniwersalność Flexboksa powinna pozwolić na odpowiednie dostosowanie się do tych różnic.

W tym przypadku, paginacja jest wyśrodkowana na stronie i znajduje się nad tabelą. Kontrolki do nawigacji w tył i w przód są umieszczone po obu stronach wskaźników strony na szerszych ekranach, ale wszystkie cztery pojawiają się nad wskaźnikami strony na wąskich ekranach.

Możemy to osiągnąć poprzez lewarowanie właściwości order. Wizualna zmiana kolejności treści powinna być zawsze wykonywana z rozwagą, ponieważ ta właściwość nie zmienia kolejności źródła – tylko to, jak pojawia się na ekranach.

Simple Sorting

Ten przykład pokazuje podstawową implementację sortowania zmodyfikowaną z tego fragmentu kodu przez Petera Noble’a, aby zaspokoić zarówno tekst, jak i cyfry:

Przydałby się jakiś wskaźnik, która kolumna jest aktualnie sortowana i w jakiej kolejności. Możemy to zrobić za pomocą klas CSS, które następnie możemy dowolnie stylizować. W tym przypadku, symbole wskaźników są pseudoelementami, które są przełączane po kliknięciu nagłówka docelowego.

Proste wyszukiwanie

Ten przykład jest podstawową funkcją filtrowania, która iteruje przez całą zawartość tekstową każdej komórki tabeli i stosuje klasę CSS do ukrycia wszystkich wierszy, które nie pasują do pola wyszukiwania.

Taka implementacja jest stosunkowo naiwna i jeśli Twój przypadek użycia tego wymaga, sensowne może być wyszukiwanie po kolumnie. W tym scenariuszu, dobrym pomysłem może być posiadanie każdego pola wejściowego jako części tabeli w ich odpowiednich kolumnach.

Let A Library Handle It

Powyższe fragmenty JavaScript służą do zademonstrowania jak tabele z większymi ilościami danych mogą być ulepszone, aby ułatwić życie użytkownikom tych tabel. Jednak w przypadku naprawdę dużych zbiorów danych, prawdopodobnie sensowne będzie użycie istniejącej biblioteki do zarządzania dużymi tabelami.

Wzór przełączania kolumn jest taki, że nieistotne kolumny są ukryte na mniejszych ekranach. Zwykle nie jestem fanem ukrywania zawartości tylko dlatego, że rzutnia jest wąska, ale to podejście Maggie Costello Wachs z Filament Group rozwiązuje ten mój problem, zapewniając rozwijane menu, które pozwala użytkownikom przełączać ukryte kolumny z powrotem na widok.

Powyższy artykuł został opublikowany w 2011 roku, ale Filament Group od tego czasu opracowała pełny zestaw responsywnych wtyczek stołowych znanych jako Tablesaw, które zawierają funkcje takie jak sortowanie, wybór wierszy, internacjonalizacja i tak dalej.

Funkcja przełączania kolumn w TableSaw również nie zależy już od jQuery, w przeciwieństwie do przykładów z oryginalnego artykułu. Tablesaw jest jedną z jedynych bibliotek, jakie udało mi się znaleźć, która nie ma zależności od jQuery w tej chwili.

Wrapping Up

Istnieje niezliczona ilość wzorców projektowania tabel, a to, które podejście wybierzesz, zależy w dużej mierze od rodzaju danych, jakie posiadasz i docelowej grupy odbiorców tych danych. Na koniec dnia, tabele są metodą organizacji i prezentacji danych. Ważne jest, aby dowiedzieć się, które informacje mają największe znaczenie dla użytkowników i zdecydować się na podejście, które najlepiej zaspokoi ich potrzeby.

Dalsza lektura

• “CSS-Only Responsive Tables,” David Bushell
• “Accessible, Simple, Responsive Tables,” Davide Rizzo, CSS-Tricks
• “Responsive Table Layout,” Matt Smith
• “Responsive Patterns: Tables,” Brad Frost
• “Hey, It’s Still OK To Use Tables,” Adrian Roselli
• “Tables, CSS Display Properties, And ARIA,” Adrian Roselli
• “Data Tables,” Heydon Pickering

(ra, il)

.