A szerzőről
Chen Hui Jing autodidakta designer és fejlesztő, akinek rendkívüli szeretete a CSS. Webes projektjeiben a kódsorok csökkentése rendkívül boldoggá teszi. Ő …További információHuijing↬
- 11 perc olvasás
- CSS,JavaScript,Design Patterns,Responsive Web Design
- Off-line olvasásra mentve
- Megosztás Twitteren, LinkedIn
A táblázatok nagy mennyiségű adat sorokban és oszlopokban történő megjelenítésére szolgáló tervezési minta, így hatékonyak a kategorikus objektumok összehasonlító elemzéséhez. A táblázatokat már a 2. században is használták erre a célra, és amikor a világ elkezdett digitalizálódni, a táblázatok is velünk együtt jöttek.
Elkerülhetetlen volt, hogy a web támogassa az adatok táblázatos formában történő megjelenítését. A HTML táblázatok szemantikailag és szerkezetileg megfelelő módon mutatják be a táblázatos adatokat. A HTML táblázatok alapértelmezett stílusai azonban nem éppen a legesztétikusabb dolog, amit valaha is láttál. A kívánt vizuális dizájntól függően némi erőfeszítésre volt szükség a CSS-fronton, hogy ezeket a táblázatokat megszépítsük. Egy évtizeddel ezelőtt a Smashing Magazine-on megjelent egy cikk a “Top 10 CSS Table Designs” címmel, amely a mai napig nagy látogatottságot élvez.
A web sokat fejlődött az elmúlt évtizedben, és minden eddiginél kényelmesebbé vált, hogy webhelyét vagy alkalmazását a nézetablakhoz igazítsa, amelyben megtekintik. Ennek ellenére továbbra is megfontolt tervezési döntéseket kell hoznunk, amelyek nem veszélyeztetik a hozzáférhetőséget. Mivel úgy tűnik, hogy a táblázatok nem fognak egyhamar kiesni a népszerűségből, nézzük meg, hogyan hozhatók létre táblázatok a weben 2019-ben.
CSS-Only Options
Ha az adatállománya nem olyan nagy, és az olyan funkciók, mint a lapozás és a rendezés nem szükségesek, akkor fontolja meg a JavaScript-mentes lehetőséget. Elég szép eredményeket érhet el, amelyek a képernyőméretek teljes skáláján jól működnek egy nagy könyvtár súlya nélkül.
Sajnos, a JavaScript segítsége nélkül néhány DOM-manipulációhoz a hozzáférhetőség frontján, csak egy maroknyi, csak CSS-re épülő lehetőségünk van. De kis adathalmazok esetében ezek gyakran elegendőek.
1. lehetőség: Ne csinálj semmit
Egy alacsony erőfeszítésű forgatókönyvvel kezdünk. Ha az adatai elférnek egy olyan táblázatban, amelynek csak néhány oszlopa és sok sora van, akkor egy ilyen táblázat már eleve eléggé mobilkész.
A probléma valószínűleg az, hogy szélesebb képernyőn túl sok hely van, ezért célszerű lehet max-width-vel “lekorlátozni” a táblázat maximális szélességét, miközben keskeny képernyőn hagyjuk, hogy szükség szerint zsugorodjon.
See the Pen Table #1: Few columns, many rows by (Chen Hui Jing) on CodePen.
Ez a fajta minta akkor működik a legjobban, ha az adatok önmagukban nem sorok és sorok szövegéből állnak. Ha ezek numerikusak, vagy rövid mondatok, akkor valószínűleg megúszhatod azzal, hogy nem csinálsz sokat.
2. lehetőség: Style The Scroll
David Bushell még 2012-ben írta le a reszponzív táblázatokra vonatkozó technikáját, amely a túlcsordulás megidézését és a felhasználók görgetésének lehetővé tételét foglalja magában, hogy több adatot láthassanak. Lehet vitatkozni azzal, hogy ez nem éppen reszponzív megoldás, de technikailag a konténer reagál a nézetablak szélességére.
Lássuk először az “alap” túlcsordulást. Képzeld el, hogy az alap körül légből kapott idézőjeleket használok, mert a görgető árnyékok formázása minden, csak nem az. Mégis, ebben az esetben az “alap” arra utal, hogy a táblázat semmilyen módon nem alakul át.
Lásd a Pen Table #3: Style the scroll (basic) by Chen Hui Jing on CodePen.
Ez a technika a gördülő árnyékok elkészítéséhez Roma Komarov és Lea Verou egymás ötleteiből kiindulva varázsolta el a varázslatot. Több gradiens (lineáris és radiális) háttérképet használ a tartalmazó elemen, és a background-attachment: local segítségével pozícionálja a hátteret a tartalomhoz képest.
Az a szép ebben a technikában, hogy azokban a böngészőkben, amelyek nem támogatják a gördülő árnyékokat, továbbra is a szokásos módon görgethetjük a táblázatot. Egyáltalán nem töri meg az elrendezést.
Egy másik görgetési lehetőség az lenne, ha a táblázat fejléceit soros elrendezésről oszlopos elrendezésre fordítanánk, miközben a <tbody> elem tartalmára vízszintes görgetést alkalmazunk. Ez a technika kihasználja a Flexbox viselkedését, hogy a táblázat sorait oszlopokká alakítsa át.
Sea the Pen Table #3: Style the scroll (flipped headers) by Chen Hui Jing on CodePen.
A táblázatra a display: flex alkalmazásával a <thead> és a <tbody> elemet is flex gyermekké tesszük, amelyek alapértelmezés szerint egymás mellett, ugyanabban a flex sorban helyezkednek el.
A <tbody> elemet is flex konténerré tesszük, így a benne lévő összes <tr> elemet is flex gyermekké tesszük, amelyek szintén egyetlen flex sorban helyezkednek el. Végül pedig minden egyes táblázatcellának block-re kell állítani a megjelenítését az alapértelmezett table-cell helyett.
Ez a technika előnye, hogy a fejlécek mindig láthatóak, mint egy fix fejléc effekt, így a felhasználók nem veszítik el a kontextust, miközben görgetik az adatoszlopokat. Egy dolog, amire figyelni kell, hogy ez a technika a vizuális és a forrás sorrendjének eltérését eredményezi, és ez kissé intuitívvá teszi a dolgokat.
Sprinkle On Some JavaScript
Mint korábban említettük, a táblázat display értékek módosításával történő morfózásával járó elrendezési lehetőségek néha negatív hatással vannak a hozzáférhetőségre, amelyek kijavításához kisebb DOM-manipulációra van szükség.
Emellett Andrew Coyle számos felhasználói élményre vonatkozó tippet ad az adattáblák tervezésével kapcsolatban, beleértve az olyan funkciókat, mint a lapozás, a rendezés, a szűrés és így tovább (ezek a funkciók némi JavaScriptet igényelnek az engedélyezéshez).
Ha viszonylag egyszerűbb adatkészlettel dolgozol, talán saját függvényeket szeretnél írni néhány ilyen funkcióhoz.
Rows To Blocks, With Accessibility Fix
Mennyire én tudom, ez a reszponzív adattábla technika Chris Coyier “Responsive Data Tables” című CSS-Tricks cikkéből származik még 2011-ből. Azóta sokan mások is adaptálták és kibővítették.
A technika lényege, hogy egy médiakérdés segítségével a táblázatelem és gyermekei kijelzési tulajdonságát block-re váltjuk egy szűk nézetablakon.
Keskeny képernyőn a táblázat fejléceit vizuálisan elrejtjük, de a hozzáférhetőségi fában továbbra is léteznek. Ha adatattribútumokat alkalmazunk a táblázat celláira, akkor CSS segítségével megjeleníthetjük az adatok címkéit, miközben a címke tartalma a HTML-ben marad. Kérjük, tekintse meg az alábbi CodePen-t, hogy hogyan néz ki a jelölés és a stílusok:
See the Pen Table #2: Rows to blocks by Chen Hui Jing on CodePen.
Az eredeti módszer szélességet alkalmaz a címke szövegét megjelenítő pszeudoelemre, de ez azt jelenti, hogy kezdetben tudnod kell, mekkora helyre van szüksége a címkének. A fenti példa egy kissé eltérő megközelítést alkalmaz, amelynek során a címke és az adatok a bennük lévő blokk ellentétes oldalán helyezkednek el.
Egy ilyen hatást az automatikus margókkal érhetünk el flex formázási környezetben. Ha minden <td> elem megjelenítési tulajdonságát flexre állítjuk, mivel az álelemek úgy generálnak dobozokat, mintha a kiinduló elemük közvetlen gyermekei lennének, a <td> flex gyermekeivé válnak.
Ezután már csak az álelem margin-right: auto beállításával kell a cella tartalmát a cella túlsó szélére tolni.
Egy másik megközelítés a keskeny nézetablak elrendezéshez a Grid és a display: contents kombinációját használja. Kérjük, vegye figyelembe, hogy a display: contents-nak a támogató böngészőkben jelenleg hozzáférhetőségi problémái vannak, és ezt a módszert nem szabad termelésben használni, amíg ezeket a hibákat nem javítják.
De lehet, hogy ezt a hibák megoldása után olvassa, ebben az esetben itt egy alternatív elrendezési lehetőség.
Lásd a Pen Table #2: Rows to blocks (alt) by Chen Hui Jing on CodePen.
Minden <tr> elem display: grid-re van állítva, és minden <td> elem display: contents-ra van állítva. Csak a rácskonténer közvetlen gyermekei vesznek részt a rácsformázási kontextusban; ebben az esetben ez a <td> elem.
Amikor a display: contents-t a <td>-ra alkalmazzuk, annak tartalmával “helyettesítjük”, ebben az esetben az álelem és a <td>-n belüli <span> lesz helyette a rács gyermeke.
Azt szeretem ebben a megközelítésben, hogy a max-content segítségével méretezhetjük az álelemek oszlopát, így biztosítva, hogy az oszlop mindig a leghosszabb címke szélessége legyen, anélkül, hogy manuálisan kellene hozzá szélességi értéket rendelnünk.
A jövőben, amikor a min-content, max-content és fit-content méretezési értékek (amelyeket a CSS Intrinsic & Extrinsic Sizing Module 3. szintje fed le) általános width és height értékként támogatottak lesznek, még több lehetőségünk lesz a dolgok elrendezésére.
Ez a megközelítés hátránya, hogy szükség van arra a további <span> vagy <p> értékre a táblázat cellájának tartalma körül, ha az még nem rendelkezik ilyennel, különben nem tudnánk stílusokat alkalmazni rá.
Egyszerű lapozás
Ez a példa egy alapvető lapozási implementációt mutat, amelyet Gjore Milevski módosított erről a CodePenről, hogy div-ek helyett a táblázat sorain lapozzon. Ez az előző részben tárgyalt “style the scroll” példa kiterjesztése.
See the Pen Table #4: Simple pagination by Chen Hui Jing on CodePen.
A Flexbox az elrendezés szempontjából nagyon jól jön a paginációs elemek különböző nézetablakméretekben való elhelyezéséhez. A különböző projekttervek eltérő követelményeket támasztanak, de a Flexbox sokoldalúságának lehetővé kell tennie, hogy ezeket a különbségeket megfelelően figyelembe vegye.
Ebben az esetben a lapozás az oldal közepére és a táblázat fölé kerül. A visszafelé és előre navigálásra szolgáló vezérlőelemek szélesebb képernyőkön az oldaljelzők két oldalán helyezkednek el, keskeny képernyőkön azonban mind a négy az oldaljelzők felett jelenik meg.
A order tulajdonság levarázsolásával érhetjük el ezt. A tartalom vizuális átrendezését mindig megfontoltan kell végezni, mert ez a tulajdonság nem változtatja meg a forrás sorrendjét – csak azt, ahogyan az a képernyőkön megjelenik.
Egyszerű rendezés
Ez a példa egy alapvető rendezési implementációt mutat be, amelyet Peter Noble e kódrészletéből módosított, hogy szöveges és számjegyeket is figyelembe vegyen:
Lásd a Pen #Table 5: Simple sorting by Chen Hui Jing on CodePen.
Szükséges lenne valamilyen jelzés arról, hogy éppen melyik oszlopot és milyen sorrendben rendezzük. Ezt megtehetjük CSS osztályok hozzáadásával, amelyeket aztán tetszés szerint stilizálhatunk. Ebben az esetben a jelző szimbólumok pszeudoelemek, amelyek a célfejlécre kattintva változnak.
Egyszerű keresés
Ez a példa egy alapvető szűrési funkció, amely végigjárja az egyes táblázatcellák összes szöveges tartalmát, és egy CSS-osztályt alkalmazva elrejti azokat a sorokat, amelyek nem felelnek meg a keresési beviteli mezőnek.
Lásd a Pen Table #6: Simple filtering by Chen Hui Jing on CodePen.
Egy ilyen megvalósítás viszonylag naiv, és ha a felhasználási eset megköveteli, érdemes lehet inkább oszloponként keresni. Ebben a forgatókönyvben jó ötlet lehet, ha az egyes beviteli mezők a táblázat részeként a saját oszlopaikban szerepelnek.
Let A Library Handle It
A fenti JavaScript-töredékek annak bemutatására szolgálnak, hogyan lehet a nagyobb mennyiségű adatot tartalmazó táblázatokat úgy bővíteni, hogy megkönnyítsük a táblázatok felhasználóinak életét. De igazán nagy adathalmazok esetén valószínűleg érdemes lehet egy meglévő könyvtárat használni a nagy táblázatok kezeléséhez.
Az oszlopváltó minta olyan, amelynek segítségével a nem lényeges oszlopok elrejthetők a kisebb képernyőkön. Általában nem vagyok híve a tartalom elrejtésének csak azért, mert a nézetablak keskeny, de Maggie Costello Wachs (Filament Group) megközelítése feloldja ezt az aggályomat azzal, hogy egy legördülő menüt biztosít, amely lehetővé teszi a felhasználók számára, hogy az elrejtett oszlopokat visszakapcsolják.
A fenti cikk még 2011-ben jelent meg, de a Filament Group azóta kifejlesztette a Tablesaw nevű reszponzív táblázati pluginek teljes csomagját, amely olyan funkciókat tartalmaz, mint a rendezés, a sorok kiválasztása, a nemzetköziesítés és így tovább.
A TableSaw oszlopváltó funkciója szintén nem függ már a jQuerytől, ellentétben az eredeti cikkben szereplő példákkal. A Tablesaw egyike az egyetlen olyan könyvtáraknak, amelyeket jelenleg nem függ a jQuerytől.
Wrapping Up
Táblázatok tervezési mintáinak számtalan fajtája létezik, és az, hogy melyik megközelítést választjuk, nagyban függ az adatok típusától és az adatok célközönségétől. Végső soron a táblázatok az adatok szervezésének és bemutatásának módszere. Fontos, hogy kitalálja, mely információk számítanak leginkább a felhasználók számára, és olyan megközelítés mellett döntsön, amely a legjobban szolgálja az igényeiket.
További olvasmányok
- “CSS-Only Responsive Tables”, David Bushell
- “Accessible, Simple, Responsive Tables”, Davide Rizzo, CSS-Tricks
- “Responsive Table Layout”, Matt Smith
- “Responsive Patterns: Adrian Roselli
- “Tables, CSS Display Properties, And ARIA,” Adrian Roselli
- “Data Tables,” Heydon Pickering
(ra, il) “Táblák, CSS Display Properties, And ARIA,” Adrian Roselli
(ra, il)