O autorovi
Chen Hui Jing je designér a vývojář samouk s nadměrnou láskou k CSS. Snižování řádků kódu v jejích webových projektech jí dělá nesmírnou radost. Její zálibou je vytvářet webové stránky, které jsou pro ni nejčastěji …Více oHuijing↬
- 11 minut čtení
- CSS,JavaScript,Návrhové vzory,Responzivní webdesign
- Uloženo pro offline čtení
- Sdílet na Twitteru, LinkedIn
Tabulky jsou návrhovým vzorem pro zobrazení velkého množství dat v řádcích a sloupcích, díky čemuž jsou efektivní pro provádění srovnávací analýzy kategoriálních objektů. Tabulky se k tomuto účelu používaly již ve 2. století, a když se svět začal digitalizovat, přišly tabulky s námi.
Bylo nevyhnutelné, že web bude podporovat zobrazování dat v tabulkovém formátu. Tabulky HTML prezentují tabulková data sémanticky a strukturálně vhodným způsobem. Výchozí styly tabulek HTML však nejsou zrovna tím nejestetičtějším, co jste kdy viděli. V závislosti na požadovaném vizuálním vzhledu bylo nutné vynaložit určité úsilí na frontě CSS, aby se tyto tabulky zkrášlily. Před deseti lety vyšel na stránkách časopisu Smashing Magazine článek s názvem “10 nejlepších designů tabulek CSS”, který se dodnes těší velké návštěvnosti.
Veby se za posledních deset let hodně vyvinuly a je pohodlnější než kdy dříve přizpůsobit web nebo aplikaci viewportu, ve kterém se zobrazuje. Jak již bylo řečeno, musíme i nadále provádět promyšlená designová rozhodnutí, která neohrozí přístupnost. Protože se nezdá, že by tabulky v dohledné době upadly v nemilost, podívejme se, jak lze tabulky na webu vytvářet v roce 2019.
Varianty pouze pro CSS
Pokud váš soubor dat není tak velký a funkce jako stránkování a třídění nejsou nutné, zvažte variantu bez JavaScriptu. Můžete získat docela pěkné výsledky, které budou dobře fungovat na celé škále velikostí obrazovky, aniž by to bylo zatíženo velkou knihovnou.
Bohužel bez pomoci JavaScriptu pro některé manipulace s DOM na frontě přístupnosti máme jen několik možností pouze CSS. Pro malé sady dat jsou však často dostačující.
Možnost 1: Nedělat nic
Začneme scénářem s malým úsilím. Pokud se vaše data vejdou do tabulky s několika málo sloupci a spoustou řádků, pak je taková tabulka na začátku docela dobře připravena pro mobilní zařízení.
Problém byste pravděpodobně měli s příliš velkým prostorem na širších obrazovkách, takže by bylo vhodné “omezit” maximální šířku tabulky pomocí max-width a zároveň ji nechat zmenšit podle potřeby na úzké obrazovce.
Podívejte se na tabulku Pen #1: Málo sloupců, mnoho řádků od (Chen Hui Jing) na CodePen.
Tento druh vzoru funguje nejlépe, pokud vaše data sama o sobě nejsou řádky a řádky textu. Pokud se jedná o číselné údaje nebo krátké věty, pravděpodobně si vystačíte s tím, že toho moc neuděláte.
Možnost 2: Styl posouvání
David Bushell již v roce 2012 sepsal svou techniku pro responzivní tabulky, která zahrnovala vyvolání přetečení a umožnění uživatelům posouvat, aby viděli více dat. Někdo by mohl namítnout, že to není zrovna responzivní řešení, ale technicky vzato kontejner reaguje na šířku viewportu.
Nejprve se podívejme na “základní” přetečení. Představte si, že kolem základního používám vzdušné uvozovky, protože stylování pro rolovací stíny je všechno jiné než základní. Přesto se v tomto případě “základní” vztahuje k tomu, že se tabulka nijak netransformuje.
Podívejte se na článek Pen Table #3: Style the scroll (basic) od Chen Hui Jing na CodePenu.
Tato technika pro vytváření rolovacích stínů pochází od Roma Komarova a Lea Verou, kteří si navzájem riffují nápady, aby vytvořili kouzlo. Spočívá v použití několika gradientů (lineárních a radiálních) jako obrázků na pozadí obsahujícího prvku a použití background-attachment: local k umístění pozadí vzhledem k jeho obsahu.
Na této technice je hezké to, že u prohlížečů, které nepodporují rolovací stíny, můžete tabulku stále posouvat normálně. Vůbec to nenaruší rozvržení.
Další možností posouvání by bylo převrátit záhlaví tabulky z řádkové konfigurace na sloupcovou a zároveň použít horizontální posouvání na obsah prvku <tbody>. Tato technika využívá chování Flexboxu k transformaci řádků tabulky na sloupce.
Podívejte se na Pen Table #3: Style the scroll (flipped headers) od Chen Hui Jing na CodePen.
Při použití display: flex na tabulku se z prvků <thead> a <tbody> stanou oba flex děti, které jsou ve výchozím nastavení rozloženy vedle sebe na jednom flex řádku.
Z prvku <tbody> také uděláme flex kontejner, čímž se všechny prvky <tr> v něm stanou flex dětmi rozloženými také na jednom flex řádku. A konečně, každá buňka tabulky musí mít nastaveno zobrazení na block namísto výchozího table-cell.
Výhodou této techniky je, že záhlaví jsou stále na očích, jako efekt pevného záhlaví, takže uživatelé neztrácejí kontext při procházení sloupců s daty. Jedna věc, kterou je třeba vzít na vědomí, je, že tato technika vede k nesouladu vizuálního a zdrojového pořadí, a to činí věci poněkud neintuitivními.
Připravte si nějaký JavaScript
Jak již bylo zmíněno, možnosti rozvržení, které zahrnují morfování tabulky úpravou hodnot display, mají někdy negativní důsledky pro přístupnost, což vyžaduje drobnou manipulaci s DOM, aby se to napravilo.
Kromě toho existuje řada tipů pro uživatelské prostředí, pokud jde o návrh datových tabulek od Andrewa Coylea, včetně funkcí, jako je stránkování, řazení, filtrování a podobně (funkce, jejichž zapnutí vyžaduje určitý JavaScript).
Pokud pracujete s relativně jednodušší datovou sadou, možná byste si pro některé z těchto funkcí chtěli napsat vlastní funkce.
Řádky do bloků, s opravou přístupnosti
Pokud vím, tato technika responzivních datových tabulek vznikla v článku CSS-Tricks “Responsive Data Tables” od Chrise Coyiera v roce 2011. Od té doby ji upravilo a rozšířilo mnoho dalších autorů.
Podstatou této techniky je využití dotazu media query k přepnutí vlastnosti zobrazení prvku tabulky a jeho potomků na block na úzkém viewportu.
Na úzké obrazovce jsou záhlaví tabulky vizuálně skrytá, ale stále existují ve stromu přístupnosti. Použitím datových atributů na buňky tabulky pak můžeme pomocí CSS zobrazit popisky pro data, přičemž obsah popisku zůstane v HTML. Jak vypadají značky a styly, si prohlédněte v níže uvedeném CodePenu:
Podívejte se na tabulku Pen #2: Rows to blocks od Chen Hui Jing na CodePenu.
Původní metoda aplikuje šířku na pseudoelement zobrazující text popisku, ale to znamená, že byste na začátku museli znát velikost prostoru, který váš popisek potřebuje. Výše uvedený příklad používá poněkud odlišný přístup, kdy jsou popisek a data každý na opačné straně svého obsahujícího bloku.
Takového efektu můžeme dosáhnout pomocí automatických okrajů v kontextu formátování flex. Pokud nastavíme vlastnost zobrazení pro každý prvek <td> na flex, protože pseudoelementy generují boxy, jako by byly bezprostředními dětmi svého původního prvku, stanou se flex dětmi prvku <td>.
Poté je otázkou nastavení margin-right: auto na pseudoelementu, aby se obsah buňky posunul na vzdálený koncový okraj buňky.
Jiným přístupem, který provádí úzké rozložení na šířku pohledu, je použití kombinace Grid a display: contents. Upozorňujeme, že display: contents v podpůrných prohlížečích má v současné době problémy s přístupností a tato metoda by se neměla používat ve výrobě, dokud nebudou tyto chyby odstraněny.
Možná ale čtete tento článek až po vyřešení těchto chyb, v tom případě je zde alternativní možnost rozvržení.
Podívejte se na tabulku Pen #2: Řádky do bloků (alt) od Chen Hui Jing na CodePen.
Každý prvek <tr> je nastaven na display: grid a každý prvek <td> je nastaven na display: contents. Kontextu formátování mřížky se účastní pouze bezprostřední potomci kontejneru mřížky; v tomto případě je to prvek <td>.
Když je display: contents aplikován na <td>, je “nahrazen” jeho obsahem, v tomto případě se pseudoelement a <span> uvnitř <td> stanou místo toho potomky mřížky.
Na tomto přístupu se mi líbí možnost použít max-content k určení velikosti sloupce pseudoelementů, což zajistí, že sloupec bude vždy široký jako nejdelší popisek, aniž bychom mu museli ručně přiřazovat hodnotu šířky.
V budoucnu, až budou hodnoty velikosti min-content, max-content a fit-content (pokryté modulem CSS Intrinsic & Extrinsic Sizing Level 3) podporovány jako obecné hodnoty width a height, budeme mít ještě více možností, jak věci rozvrhnout.
Nevýhodou tohoto přístupu je, že potřebujete ten dodatečný <span> nebo <p> kolem obsahu v buňce tabulky, pokud ho již neměla, jinak by na něj nebylo možné aplikovat styly.
Jednoduché stránkování
Tento příklad ukazuje základní implementaci stránkování, kterou upravil mimo tento CodePen Gjore Milevski tak, aby stránkovala na řádky tabulky místo divů. Jedná se o rozšíření příkladu “style the scroll”, o kterém byla řeč v předchozí části.
Podívejte se na Pen Table #4: Simple pagination od Chen Hui Jing na CodePen.
Z hlediska rozložení se Flexbox velmi hodí pro umístění prvků stránkování v různých velikostech viewportu. Různé návrhy projektů budou mít různé požadavky, ale všestrannost Flexboxu by vám měla umožnit tyto rozdíly odpovídajícím způsobem zohlednit.
V tomto případě je stránkování vycentrované na stránce a nad tabulkou. Ovládací prvky pro navigaci zpět a vpřed jsou na širších obrazovkách umístěny po obou stranách ukazatelů stránky, ale na úzkých obrazovkách se všechny čtyři zobrazí nad ukazateli stránky.
Toho můžeme dosáhnout změnou vlastnosti order. Vizuální změnu pořadí obsahu je třeba vždy provádět s rozvahou, protože tato vlastnost nemění pořadí zdroje – pouze to, jak se zobrazí na obrazovkách.
Jednoduché řazení
Tento příklad ukazuje základní implementaci řazení upravenou z tohoto úryvku kódu od Petera Nobleho tak, aby vyhovovala jak textu, tak číslicím:
Přečtěte si Pen #Table 5: Simple sorting od Chen Hui Jing na CodePen.
Bylo by užitečné mít nějaký indikátor toho, který sloupec je právě řazen a v jakém pořadí. Toho můžeme dosáhnout přidáním tříd CSS, které pak můžeme stylovat, jak chceme. V tomto případě jsou symboly indikátorů pseudoelementy, které se přepínají po kliknutí na cílové záhlaví.
Jednoduché vyhledávání
Tento příklad představuje základní funkci filtrování, která iteruje veškerý textový obsah každé buňky tabulky a použije třídu CSS, aby skryla všechny řádky, které neodpovídají vstupnímu poli pro vyhledávání.
Podívejte se na Pen Table #6: Simple filtering od Chen Hui Jing na CodePen.
Taková implementace je poměrně naivní, a pokud to váš případ použití vyžaduje, může mít smysl vyhledávat raději po sloupcích. V takovém případě by bylo dobré mít každé vstupní pole jako součást tabulky v příslušných sloupcích.
Nechte to na knihovně
Výše uvedené úryvky JavaScriptu slouží k demonstraci toho, jak lze vylepšit tabulky s větším množstvím dat a usnadnit tak život uživatelům těchto tabulek. U opravdu velkých souborů dat by však pravděpodobně mělo smysl použít ke správě velkých tabulek nějakou existující knihovnu.
Vzor přepínání sloupců je takový, při kterém se na menších obrazovkách skryjí nepodstatné sloupce. Obvykle nejsem příznivcem skrývání obsahu jen proto, že je zobrazovací plocha úzká, ale tento přístup Maggie Costello Wachsové ze společnosti Filament Group tuto mou výtku řeší tím, že poskytuje rozbalovací nabídku, která umožňuje uživatelům přepnout skryté sloupce zpět do zobrazení.
Výše uvedený článek byl publikován již v roce 2011, ale společnost Filament Group od té doby vyvinula kompletní sadu zásuvných modulů pro responzivní tabulky známou jako Tablesaw, která zahrnuje funkce, jako je třídění, výběr řádků, internacionalizace atd.
Funkce přepínání sloupců v TableSaw již také není závislá na jQuery, na rozdíl od příkladů z původního článku. Tablesaw je jednou z mála knihoven, které jsem našel a které v současné době nemají závislost na jQuery.
Závěr
Existuje nespočet vzorů návrhu tabulek a to, který přístup zvolíte, do značné míry závisí na typu dat, která máte, a na cílové skupině, pro kterou jsou tato data určena. Nakonec jsou tabulky metodou pro organizaci a prezentaci dat. Je důležité zjistit, které informace jsou pro vaše uživatele nejdůležitější, a rozhodnout se pro přístup, který nejlépe vyhovuje jejich potřebám.
Další literatura
- “Responsivní tabulky pouze pro CSS,” David Bushell
- “Přístupné, jednoduché, responzivní tabulky,” Davide Rizzo, CSS-Tricks
- “Responzivní rozvržení tabulek,” Matt Smith
- “Responsivní vzory: Tabulky,” 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)