Wzorce projektowania tabel w sieci

Tabele są wzorcem projektowym do wyświetlania dużych ilości danych w wierszach i kolumnach, dzięki czemu są wydajne przy przeprowadzaniu analizy porównawczej obiektów kategorii. Stoły były używane do tego celu już w ^II wieku, a kiedy świat zaczął się cyfryzować, stoły pojawiły się wraz z nami.

Nieuniknione było, że sieć będzie obsługiwała wyświetlanie danych w formacie tabelarycznym. Tabele HTML prezentują dane tabelaryczne w semantyczny i strukturalnie odpowiedni sposób. Jednak domyślne style w tabelach HTML nie są najbardziej estetyczną rzeczą, jaką kiedykolwiek widziałeś. W zależności od pożądanego projektu wizualnego, upiększenie tych tabel wymagało pewnego wysiłku na froncie CSS. Dziesięć lat temu artykuł z „Top 10 CSS Table Designs” został opublikowany w Smashing Magazine i nadal cieszy się dużym zainteresowaniem do dnia dzisiejszego.

Sieć bardzo się rozwinęła w ciągu ostatniej dekady i wygodniej niż kiedykolwiek jest dostosowywanie witryny lub aplikacji do widoku, w którym jest wyświetlana. Mając to na uwadze, musimy nadal dokonywać przemyślanych wyborów projektowych, które nie naruszają dostępność. Ponieważ tabele nie wydają się w najbliższym czasie wypadać z łask, zobaczmy, jak można tworzyć tabele w Internecie w 2019 roku.

Opcje tylko CSS

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

Niestety, bez pomocy JavaScript do manipulacji DOM na froncie dostępności, mamy tylko garść opcji tylko CSS. Ale w przypadku małych zbiorów danych często są wystarczające.

Opcja 1: Nic nie rób

Zaczniemy od scenariusza, który nie wymaga dużego wysiłku. Jeśli Twoje dane mieszczą się w tabeli zawierającej tylko kilka kolumn i wiele wierszy, taka tabela jest w zasadzie gotowa na urządzenia mobilne.

Problem, który miałbyś, to prawdopodobnie zbyt duża ilość miejsca na szerszych ekranach, więc może być wskazane „ograniczenie” maksymalnej szerokości stołu do max-width , jednocześnie pozwalając jej zmniejszyć się w razie potrzeby na wąskim ekranie.

Ten rodzaj wzorca działa najlepiej, jeśli same dane nie są wierszami i wierszami tekstu. Jeśli są to wyrażenia numeryczne lub krótkie, prawdopodobnie ujdzie ci to na sucho, jeśli nie zrobisz zbyt wiele.

Opcja 2: stylizuj zwój

David Bushell opisał swoją technikę responsywnych tabel w 2012 roku, która polegała na wywołaniu przepełnienia i umożliwieniu użytkownikom przewijania, aby zobaczyć więcej danych. Można argumentować, że nie jest to rozwiązanie responsywne, ale technicznie kontener odpowiada szerokości widocznego obszaru.

Przyjrzyjmy się najpierw „podstawowemu” przepełnieniu. Wyobraź sobie, że używam cytatów powietrznych wokół basic, ponieważ stylizacja przewijających się cieni jest zupełnie inna. Jednak w tym przypadku „podstawowy” odnosi się do faktu, że stół w żaden sposób nie ulega przekształceniom.

Ta technika tworzenia przewijanych cieni pochodzi od Roma Komarova i Lei Verou, którzy przerzucają się nawzajem pomysłami na tworzenie magii. Opiera się na użyciu wielu gradientów (liniowych i promieniowych) jako obrazów tła w elemencie zawierającym i użyciu background-attachment: local do pozycjonowania tła względem jego zawartości.

Zaletą tej techniki jest to, że w przypadku przeglądarek, które nie obsługują przewijania cieni, nadal można normalnie przewijać tabelę. Wcale nie łamie układu.

Inną opcją przewijania byłoby przerzucenie nagłówków tabeli z konfiguracji wierszowej do konfiguracji kolumnowej, przy jednoczesnym zastosowaniu przewijania poziomego do zawartości elementu <tbody> . Ta technika wykorzystuje zachowanie Flexbox do przekształcania wierszy tabeli w kolumny.

Stosując display: flex do tabeli, sprawia, że <thead> i <tbody> oba elementy potomne flex są domyślnie ułożone obok siebie w tej samej linii flex.

Sprawiamy również, że element <tbody> jest kontenerem elastycznym, dzięki czemu wszystkie elementy <tr> w nim zawarte są elastyczne i ułożone w jednej linii elastycznej. Na koniec, każda komórka tabeli musi mieć ustawiony sposób wyświetlania na block zamiast domyślnej table-cell .

Zaletą tej techniki jest to, że nagłówki są zawsze widoczne, podobnie jak stały efekt nagłówka, dzięki czemu użytkownicy nie tracą kontekstu podczas przewijania kolumn danych. Należy zwrócić uwagę na to, że ta technika powoduje rozbieżność w porządku wizualnym i źródłowym, co sprawia, że ​​rzeczy są nieco nieintuicyjne.

Posyp na niektóre JavaScript

Jak wspomniano wcześniej, opcje układu, które obejmują morfing tabeli przez modyfikację display wartości, czasami mają negatywny wpływ na dostępność, co wymaga niewielkich manipulacji DOM w celu poprawienia.

Ponadto Andrew Coyle oferuje szereg wskazówek dotyczących projektowania tabel danych, w tym funkcje takie jak paginacja, sortowanie, filtrowanie itd. (funkcje, które wymagają trochę JavaScriptu do włączenia).

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

Wiersze do bloków, z poprawką ułatwień dostępu

O ile mi wiadomo, ta responsywna technika tabel danych pochodzi z artykułu CSS-Tricks „Responsive Data Tables” autorstwa Chrisa Coyiera z 2011 roku. Od tego czasu została zaadaptowana i rozszerzona przez wiele innych.

Istotą tej techniki jest wykorzystanie zapytania o media do przełączenia właściwości wyświetlania elementu tabeli i jego elementów potomnych w celu block w wąskim obszarze wyświetlania.

Na wąskim ekranie nagłówki tabeli są wizualnie ukryte, ale nadal istnieją w drzewie dostępności. Stosując atrybuty danych do komórek tabeli, możemy wyświetlać etykiety danych za pomocą CSS, zachowując zawartość etykiety w kodzie HTML. Zapoznaj się z poniższym CodePen, aby dowiedzieć się, jak wyglądają znaczniki i style:

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

Taki efekt możemy osiągnąć dzięki automarginesom w kontekście elastycznego formatowania. Jeśli ustawimy właściwość wyświetlania dla każdego elementu <td> na flex, ponieważ pseudo-elementy generują pola tak, jakby były bezpośrednimi dziećmi ich elementu, z którego pochodziły, stają się flex dziećmi elementu <td> .

Następnie pozostaje kwestia ustawienia margin-right: auto na pseudo-elemencie, aby przesunąć zawartość komórki na dalszy koniec komórki.

Innym sposobem wykonania wąskiego układu rzutni jest użycie kombinacji Grid i display: contents . Należy pamiętać, że display: contents w obsługiwanych przeglądarkach ma obecnie problemy z dostępnością, a tej metody nie należy używać w środowisku produkcyjnym, dopóki te błędy nie zostaną naprawione.

Ale może czytasz to po naprawieniu 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 elementy podrzędne kontenera siatki uczestniczą w kontekście formatowania siatki; w tym przypadku jest to element <td> .

Gdy display: contents zostanie zastosowany do <td> , zostaje on „zastąpiony” przez jego zawartość, w tym przypadku pseudoelement i <span> w <td> stają się zamiast tego dziećmi siatki.

To, 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 jej wartości szerokości.

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

Minusem tego podejścia jest to, że potrzebujesz dodatkowego <span> lub <p> wokół zawartości w komórce tabeli, jeśli jeszcze jej nie było, w przeciwnym razie nie byłoby możliwości zastosowania do niej stylów.

Prosta paginacja

Ten przykład pokazuje podstawową implementację stronicowania, która została zmodyfikowana w tym CodePen przez Gjore Milevski, aby dzielić na strony wiersze tabeli zamiast elementów div. Jest to rozszerzenie przykładu „stylizuj zwój” omówionego w poprzedniej sekcji.

Z perspektywy układu, Flexbox jest bardzo przydatny do pozycjonowania elementów paginacji w różnych rozmiarach okien ekranu. Różne projekty będą miały różne wymagania, ale wszechstronność Flexbox powinna pozwolić Ci odpowiednio uwzględnić te różnice.

W takim przypadku paginacja jest wyśrodkowana na stronie i nad tabelą. Elementy sterujące nawigacją wstecz i do przodu są umieszczone po obu stronach wskaźników strony na szerszych ekranach, ale wszystkie cztery pojawiają się nad wskaźnikami stron na wąskich ekranach.

Możemy to zrobić, wykorzystując właściwość 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 sposób, w jaki pojawia się na ekranach.

Proste sortowanie

Ten przykład pokazuje podstawową implementację sortowania zmodyfikowaną na podstawie tego fragmentu kodu przez Petera Noble, aby uwzględnić zarówno tekst, jak i cyfry:

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

Proste wyszukiwanie

Ten przykład to podstawowa funkcja filtrowania, która iteruje całą zawartość tekstową każdej komórki tabeli i stosuje klasę CSS, aby ukryć wszystkie wiersze, które nie pasują do pola wejściowego wyszukiwania.

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

Niech biblioteka się tym zajmie

Powyższe fragmenty kodu JavaScript służą do zademonstrowania, w jaki sposób można ulepszyć tabele z większą ilością danych, aby ułatwić życie użytkownikom tych tabel. Jednak w przypadku naprawdę dużych zestawów danych sensowne może być użycie istniejącej biblioteki do zarządzania dużymi tabelami.

Wzorzec przełączania kolumn to taki, w którym nieistotne kolumny są ukrywane na mniejszych ekranach. Zwykle nie jestem fanem ukrywania treści tylko dlatego, że widok jest wąski, ale to podejście Maggie Costello Wachs z Filament Group rozwiązuje ten problem, zapewniając rozwijane menu, które pozwala użytkownikom przełączać ukryte kolumny z powrotem do pogląd.

Powyższy artykuł został opublikowany w 2011 roku, ale od tego czasu Filament Group opracowała pełny zestaw responsywnych wtyczek do tabel, znanych jako Tablesaw, które obejmują 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 to jedna z niewielu bibliotek, jakie udało mi się znaleźć, która w tej chwili nie jest zależna od jQuery.

Zawijanie

Istnieje mnóstwo wzorców projektowania tabel, a wybrane podejście zależy w dużej mierze od rodzaju posiadanych danych i docelowych odbiorców tych danych. W ostatecznym rozrachunku tabele to sposób na organizację i prezentację danych. Ważne jest, aby dowiedzieć się, które informacje są najważniejsze dla Twoich użytkowników i zdecydować się na podejście, które najlepiej odpowiada ich potrzebom.

Dalsza lektura

• „Tabele responsywne zawierające tylko CSS”, David Bushell
• „Dostępne, proste, responsywne tabele”, Davide Rizzo, CSS-Tricks
• „Responsywny układ stołu”, Matt Smith
• „Wzory responsywne: Stoły”, Brad Frost
• „Hej, nadal można używać tabel”, Adrian Roselli
• „Tabele, właściwości wyświetlania CSS i ARIA”, Adrian Roselli
• „Tabele danych”, Heydon Pickering