Potrebujete na webe peknú tabuľku? WordPress vás prekvapí

článok na blog uverejnený: 31. októbra 2022

Môj známy potreboval na web umiestniť tabuľku, ktorá bude nielen pekná, ale bude umožňovať vyhľadávanie v obsahu, dokáže zobraziť prednastavený počet riadkov a podobne. A – pokiaľ je možné – má byť zadarmo. A že používa redakčný systém WordPress. Na pohľad je riešenie jednoduché, no keď preskúmal tri-štyri pluginy, napadlo mu, že nechce strácať čas ďalším prieskumom a možno mu dám vhodný tip ja. Dobrý nápad 🙂

Dostali ste sa do podobnej situácie? Potrebujete vložiť na svoju web-stránku tabuľku?
Ak používate redakčný systém WordPress, rýchlo zistíte, že vkladanie tabuliek je jedna zo slabín základného editoru WordPressu. Teda presnejšie, bola. Pretože existujú pluginy – zásuvné moduly rozširujúce základné možnosti redakčného systému. Ktorý plugin vybrať a aké tabuľky vo WordPress-e získate? Odpovede nájdete v článku.

Kedy použiť tabuľku a kedy graf?

Tabuľky sú skvelý spôsob, ako zobraziť údaje v prehľadnej forme. Najmä ak neobsahujú veľa údajov. Príkladov okolo seba nájdete poľahky stovky. Môže to byť prehľad veľkostí odevov v tabuľke, tabuľka veku odchodu do dôchodku, tabuľka športovej ligy a i.
Tabuľka môže byť tiež sprostredkovateľom poriadku v dokumentoch, ktorých je na stránke veľa (napríklad prehľad uznesení a zápisníc obecného zastupiteľstva v tabuľke). Alebo môže poskytnúť čitateľovi kompletný prehľad údajov zo záujmovej oblasti, ako napríklad prehľad štátov podľa počtu obyvateľov.
Avšak tabuľku môžete na web-stránke použiť ešte aj inak. V závere článku nepreskočte upozornenie.

Na ľahšie porozumenie súvislostí medzi údajmi nie je tabuľka ani pri dobre zvolenej štruktúre ideálna. Lepšie je použiť graf (príklad – graf rastu populácie Tokia od r. 1920, graf funkcie kosínus a pod. ). Z neho hneď vidno približnú hodnotu i priebeh údajov.

Použiť tabuľku alebo graf? Pri voľbe je rozhodujúca poskytovaná presnosť údaja. Ak chcete čitateľovi poskytnúť konkrétne informácie alebo presné hodnoty, zvoľte tabuľku. V prípade, že chcete znázorniť trendy, štruktúru alebo porovnanie údajov, je vhodnejší graf.

Ako vložiť tabuľku do WordPress-u

Keď potrebujete vložiť tabuľku do stránky v redakčnom systéme WordPress, je k dispozícii niekoľko desiatok riešení. V zásade môžete na vytvorenie tabuľky použiť plugin alebo HTML kód. Komu sa však už chce dnes programovať HTML tabuľku? Záleží od finančných a funkčných kritérií, ktoré riešenie vám bude vyhovovať.

Viaceré tabuľkové pluginy umožňujú v platených verziách zlučovať a rozdeľovať bunky, filtrovať, dokonca zobraziť grafy. Pozrime sa na prehľad najčastejšie používaných tabuľkových pluginov pre WordPress a charakteristiku štyroch vybraných z nich. Všetky občas používam a odporučil som ich môjmu známemu z úvodu. Každý má svoje výhody i nedostatky, avšak plne pokryje aj v neplatenej verzii možnosti na vytvorenie a zobrazenie jednoduchej tabuľky.

Gutenberg
TablePress
Data Tables Generator by Supsystic
Ninja Tables – Best Data Table Plugin for WordPress
Visualizer
wpDataTables – WordPress Tables & Table Charts Plugin
Flexible Table Block
Table Make
Tablesome
Table Addons for Elementor
Easy Tables (Table Manager for WPBakery Page Builder)

GUTENBERG

Tabuľky vo WordPress-e a Gutenberg

WordPress prešiel od svojho prvého spustenia v roku 2003 dlhú cestu. Vo verzii 5.0 priniesol od decembra 2018 výraznú zmenu možností úpravy obsahu webu jeho blokový editor Gutenberg .
V podobe pluginu bol Gutenberg dostupný 2 roky predtým než sa stal súčasťou inštalačnej verzie WordPressu, no nedosahoval takú popularitu ako iné podobné pluginy. Napriek tomu je dnes (vo vylepšenej verzii) súčasťou WordPressu. A umožňuje aj vkladanie tabuliek, ktoré bolo v klasickom editore slabinou.

Vloženie tabuľky a jej nastavenie je v editore Gutenberg pomerne jednoduché – vložíte na požadované miesto blok Tabuľka, ktorý nájdete v ponuke blokov po kliknutí na plusko vľavo hore a blok nastavíte. Blok Tabuľka umožňuje pridávať a odstraňovať riadky i stĺpce tabuľky, takže nemusíte na prvý raz vedieť jej presný počet riadkov a stĺpcov. Na paneli v pravej časti poskytuje v súčasnosti možnosť výberu medzi 2 základnými podobami tabuliek – predvolené  (s mriežkou) a pásy, tiež možnosť nastaviť pevnú šírku buniek tabuľky (prednastavené je automatické prispôsobenie šírky stĺpcov), i možnosti aktivovať vzhľadovo odlišnú hlavičku a pätu, meniť farbu textu v tabuľke i jej pozadia a nastaviť typografiu.

Na obrázkoch ďalej vidíte príklady vzhľadu dvoch verzií tabuliek na stránkach, ktoré boli vytvorené editorom Gutenberg.

Kombinácia zvolených nastavení môže spôsobiť, že sa tabuľka zobrazí za hranicami oblasti príspevkov. V závislosti od témy môžu niektoré tabuľky vyzerať zvláštne, preto si pred publikovaním skontrolujte vzhľad cez ukážku príspevku na rôznych zariadeniach.

Výhody:
plugin s blokom tabuliek je integrovanou súčasťou WordPressu
slovenčina
dobrá responzivita

Nevýhody:
údaje do každej bunky je potrebné vkladať manuálne
obmedzené možnosti nastavenia vzhľadu
použitie tabuľky len na stránke na jednom mieste
vyhľadávanie je možné len cez hľadanie na stránke (Ctrl – F)
triedenie/filtrovanie nie je možné

Zhrnutie pre tabuľky vytvorené cez Gutenberg:
výborné riešenie pre jednoduché nenáročné tabuľky dostupné hneď po inštalácii WordPressu (cez vstavaný editor Gutenberg)

TABLEPRESS

Tabuľky vo WordPress-e a TablePress

TablePress je podľa dlhodobých hodnotení najlepší plugin na tabuľky na trhu. Predovšetkým preto, že rieši tabuľky už pre starší klasický editor a tiež preto, že je 100% zadarmo. Jeho správa je jednoduchá a plní cieľ – vytvárať a spravovať tabuľky. S pridanými funkciami umožňuje návštevníkom stránky nájsť údaje vo veľkých tabuľkách pomocou vyhľadávania, filtrovania a zoraďovania.

Plugin je v rámci komunity používateľov WordPressu naozaj populárny, má viac ako 800 000 aktívnych inštalácií a vysoké hodnotenia (viac ako 4 000 recenzií). Pomocou TablePress môžete vytvoriť a vložiť tabuľky do akéhokoľvek príspevku pomocou krátkych kódov.

Hodnotenia pluginu sú vysoké napriek tomu, že nastavenie prvej tabuľky vyžaduje učenie sa. Na prvý šup to nejde totiž celkom ľahko.
Na obrázku hore vidíte detail nastavovania riadkov tabuľky. Plné možnosti nastavenia záložky tabuľky v TablePress uvidíte po kliknutí na tento odkaz na obrázku na novej karte. Obrázok zobrazuje výsledok na web-stránke.

Nevýhodou môže byť pre niekoho používanie skrátených kódov (shortcode) – tak ako napr. pri plugine Contact Form 7. Tabuľku umiestňujete na stránku skopírovaním a vložením skráteného kódu na konkrétne miesto, kde chcete, aby sa zobrazovala. Kód tabuľky vygeneruje samotný plugin a nájdete ho v prehľade tabuliek po kliknutí na názov pluginu v menu.

TablePress umožňuje – podobne ako väčšina tabuľkových pluginov – importovať i exportovať údaje pomocou súborov CSV.
Tie si môžete pripraviť alebo upravovať v ľubovoľnom tabuľkovom programe (Microsoft Excel, Tabuľky Google). Nezabudnite si ich však uložiť pri exporte z tabuľkového programu vo formáte CSV UTF-8, inak nemusia byť v textoch použité slovenské znaky kódované správne a po importe uvidíte len chaos znakov.

Poznámka:
ak sa rozhodnete použiť TablePress a chcete na stránku umiestniť graf, skúste plugin TablePress Extension: Chartist

Výhody:
obsahuje pokročilý editor na vytváranie obsahu s vizuálnym rozhraním v bunke
umožňuje importovať tabuľky z externých zdrojov (Excel, GoogleSheets a i.), zo súborov .xlsx, .csv, .html a .json
existujúce ďalšie pluginy s pokročilými funkciami – radenie riadkov, meny a ďalšie
plugin je preložený do slovenčiny

Nevýhody:
responzivita tabuliek z TablePress – na mobilných zariadeniach a tabletoch môže byť časť tabuľky „za rohom“
navrhovanie tabuľky je málo priateľské pre začiatočníkov, vyžaduje čas na zvládnutie nastavovania
nie najlepšia voľba pre vizuálne príťažlivé tabuľky (existujú pokročilé možnosti úprav, no vyžaduje to čas, pridanie pár riadkov CSS)

Zhrnutie pre tabuľky vytvorené pomocou TablePress:
veľmi dobré riešenie aj pre zložitejšie tabuľky určené pre stolové počítače, no náročnejšie na nastavenie, za niektoré dostupné rozšírenia vás vývojár slušne žiada o príspevok (kúpte mi kávu a pod.)

DATA TABLES GENERATOR by SUPSYSTIC

Tabuľky vo WordPress-e a Data Tables Generator by Supsystic

Plugin umožňuje vytvárať responzívne tabuľky s triedením, vyhľadávaním, stránkovaním, filtrovaním a ďalšími funkciami. Bezplatná verzia ponúka pekne vyzerajúce tabuľky, ktoré môžu byť v platenej verzii doplnené aj o grafy a správu údajov. Autori pripravili k nahliadnutiu i stránku obsahujúcu príklady použitia tabuliek Data Tables Generator. Imponujúce riešenie 🙂

Taktiež ako TablePress funguje Data Tables Generator by Supsystic pomocou shortcode. To umožňuje po vytvorení tabuľky vkladať jej skrátený kód na ľubovoľné miesto na stránke. Nastavovanie pluginu sa môže zdať na prvý pohľad zložité, ale opak je pravdou. Najmä ak máte už nejakú skúsenosť napr. s Excelom. Pozrite na nasledujúce obrázky.

Za i-čkom v menu vľavo sa skrýva nástenka pluginu s FAQ, video tutoriálom i odkazom na dokumentáciu, info o serveri, skúšobnej dobe produktov od autorov atď. Všetko prehľadne spracované, v angličtine.

Keď chcete pridať novú tabuľku, kliknutím na Add new table sa otvorí vyskakovacie okno s úvodným nastavením. Dá sa neskôr vnútri zmeniť.
(Slovenský popis polí vytvoril prehliadač, nie plugin.)

Prehľad už vytvorených tabuliek aj s ich skrátenými kódmi vidíte pod Tables.

Ozubené koliesko vľavo dolu skrýva všeobecné nastavenia – počet riadkov na stránke, stránkovanie veľkých tabuliek a pod. Nie je ich veľa, sú prednastavené, no ak pracujete s vlastnou témou alebo veľkými tabuľkami, vyžaduje nejaký čas na premyslenie možností.

Prvá tabuľka sa po nainštalovaní pluginu navrhuje pomerne ľahko. Ak ju máte už pripravenú napr. v Exceli, stačí použiť Ctrl-C a Ctrl-V do otvoreného rozhrania návrhu novej tabuľky. Jasné, že tabuľky je možné aj importovať.
Trochu času a experimentovania zaberie – najmä pri prvej tabuľke – nastavenie šírky a úprava vzhľadu pre mobilné zariadenia v nastaveniach konkrétnej tabuľky (tlačidlo Nastavenia hneď vedľa názvu tabuľky v jej detaile).
Výsledok vyzerá po chvíli prekvapivo dobre, no nezabudnite responzivitu tabuľky otestovať na mobiloch.

Po vytvorení je možné tabuľku veľmi jednoducho duplikovať a v ďalšej len vymeniť potrebné údaje. Výborná funkcia najmä keď majú tabuľky rovnaký rozmer, štruktúru, prípadne časť údajov.

Výhody:
jednoduché vytváranie tabuliek
generuje úhľadné tabuľky s moderným vzhľadom
zvláda v bunkách výpočty pomocou vzorcov

Nevýhody:
plugin nie je preložený do slovenčiny (ak viete trochu robiť napr. s excelom, pôjde to pomerne jednoducho)
treba sa pohrať s možnosťami nastavenia vzhľadu
v tabuľke je možné vyhľadávať cez hľadanie na stránke (Ctrl – F)

Zhrnutie pre tabuľky vytvorené pomocou Table Generator by Supsystic:
príjemné riešenie pre jednoduché moderné tabuľky s komfortným nastavovaním, pokročilé funkcie sú dostupné vo verzii PRO, skvelý na vytváranie veľkých tabuliek

NINJA TABLES

Tabuľky vo WordPress-e a Ninja Tables

Pluginy s označením Ninja sú v komunite WordPressu známe. Vďaka pluginom. ktoré aj v neplatených verziách ponúkajú veľa. Stoja za nimi rôzne tímy nadšencov a firiem, ktoré používajú na označenie svojich produktov názov japonských bojovníkov. Najznámejší je Ninja Forms – plugin na tvorbu kontaktných formulárov s viac ako 900 tisíc inštaláciami.

Tabuľkový plugin Ninja Tables je od inej autorskej skupiny. Má viac ako 70 tisíc inštalácií a v názve dodatok – Best Data Table Plugin for WordPress. Najlepší plugin pre údajové tabuľky pre WordPress. Pozrime sa aká je realita.

Slováka, ktorý nevie po anglicky, odradí už prvé okno nastavovania – ukazuje, že nedostatkom pluginu je jazyk. Nie je to pravda. Plugin je čiastočne preložený aj do slovenčiny, avšak nie v tejto časti zobrazenia (počas nastavovania tabuľky komunikuje v dôležitých častiach po slovensky). Takže hor sa do toho!

Pre mňa osobne je v tomto plugine trochu otravné prvotné nastavovanie cez vyskakovacie okná a pomenovávanie stĺpcov. Predchádzajúci plugin je v tomto komfortnejší. Avšak výsledok stojí za to, takže autorom pluginu záľubu v oknách odpúšťam. Pripravte sa na „prehrýzanie sa“ cez okná na nasledujúcich obrázkoch a prežijete nastavovanie bez ujmy 😀

  1. Zeleným tlačidlom Create Your First Table začnete vytvárať novú tabuľku

2. Pri manuálnom vytváraní tabuľky vložíte v druhom okne názov, alebo si v ľavom menu vyberiete iný spôsob vytvorenia

3. Tretie okno vás vyzve na vloženie názvu prvého stĺpca

4. Stačí uviesť do prvého poľa meno prvého stĺpca (bude v hlavičke tabuľky)

5. Pomocou Pridať stĺpec / Pridať údaje vyplníte tabuľku údajmi

6. Po kliknutí na Uložiť sa objaví prehľad vytvorených tabuliek s prvou tabuľkou a jej shorcode

V prípade, že potrebujete zmeniť prednastavené zarovnanie údajov v stĺpci doľava na iné, alebo potrebujete inú úpravu, nastavujete aj ďalšie záložky, ktoré vidíte na obrázku č. 5 (Table Configuration, Dable Design,…). Na nich objavíte aj možnosti úpravy aktívne len v PRO verzii.
V hornej časti obrázka č. 5 za názvom i v prehľade tabuliek vidíte podobne ako v pluginoch TablePress i Data Table Generator by Supsystic, že Ninja Tables pracuje so skrátenými kódmi. Takisto ako oni umožňuje vkladať tabuľku na ľubovoľné miesto na stránke skopírovaním jej skráteného kódu do textového poľa v editore.

A takto vyzerá hotová tabuľka vytvorená pomocou pluginu Ninja Tables na stránke.

Ak už používate niektorý plugin na tvorbu tabuliek a potrebujete ho zmeniť, tabuľky vytvorené pomocou TablePress / Data Tables Generator od Supsystic / Ultimate Tables vie plugin Ninja Tables importovať priamo. Pri tabuľkách vytvorených inými než uvedenými pluginmi je potrebné súbory tabuliek exportovať vo formáte CSV/JSON. Ninja Tables umožňuje súbory CSV/JSON nahrať.

Výhody:
vytváranie pekných tabuliek
funkcie vyhľadávania a zoraďovania podľa stĺpcov
je čiastočne preložený do slovenčiny

Nevýhody:
početné množstvo okien, kým vidíte tabuľku

Zhrnutie pre tabuľky vytvorené pomocou Ninja Tables:
asi najľahšie bezplatné riešenie s funkciami vyhľadávania a zoraďovania podľa stĺpcov, bezplatná verzia nemá filtre, manuálne triedenie riadkov, pridávanie CSS a pod.

Špeciálne prípady tabuliek sú cenové tabuľky (pricing tables). Cenové tabuľky ako nástroj marketingu pomáhajú pri prezentovaní a zvýrazňovaní produktov v jednoduchých porovnaniach. Môžu výrazne pomôcť – ak je produkt prezentovaný správnym spôsobom – rýchlo zvýšiť predaj. O pluginoch na vytváranie cenových tabuliek sa dočítate v niektorom inom článku.

Prečo používať plugin na vytvorenie tabuľky?

Prečo použiť na vytvorenie tabuľky plugin a nevložiť ju ako obrázok? Dôvodov je viacero – responzivita, aktualizácia údajov, súčasné zmeny vzhľadu na všetkých zverejnených stránkach,…
V prípade, že budete potrebovať údaje v tabuľke alebo jej vzhľad zmeniť, môžete sa kedykoľvek vrátiť do pluginu a vykonať potrebné zmeny bez sledovania, kde všade je tabuľka na vašom webe použitá. Tabuľka sa automaticky aktualizuje na všetkých miestach, kde ste ju umiestnili. To oceníte napríklad pri vytváraní e-shopu, kde môžete potrebovať k vybraným produktom zverejniť prehľadné tabuľky veľkostí, alebo iné údaje.

Všetko uvedené platí v prípade, že používate tabuľky na svojom webe relatívne často, alebo ich je veľa. Ak máte len jednu-dve tabuľky raz za čas, postačí tabuľka vložená do textu ako obrázok – screenshot z Excelu 😉

Spôsobov pridania tabuliek na stránky je veľa. Vo WordPresse nájdete množstvo pluginov, ktoré to dokážu. Viac-menej všetky používajú podobné princípy. Niektoré sa nastavujú komfortnejšie, iné menej. Podstatné je, že netreba tabuľky zložito programovať. A ako vidíte na obrázkoch, aj výsledok býva pohľadný.

Upozornenie:
Použitie tabuľky na stránkach prináša so sebou aj jeden vedľajší efekt.
Tabuľka vizuálne člení stránku na časť „nad tabuľkou“ a „pod tabuľkou“. Na to je dobré pamätať pri dizajnovom návrhu vzhľadu stránky, prípadne v článku. Príliš veľa tabuliek môže „rozbiť“ a sťažiť čitateľnosť vlastného obsahu.

Príklad je táto stránka. Množstvo tabuliek a obrázkov pri jednotlivých pluginoch vizuálne spravilo stránku málo prehľadnou. Bolo ju preto potrebné rozdeliť do vzhľadovo kompaktných sekcií pomocou blokov page buildera (ak neviete ako na to, príďte na kurz WordPress II – dizajnovanie a tvorba obsahu, špičkové grafické podstránky pre neprogramátorov). Tabuľkám to neublížilo a stránka získala prehľadnosť 🙂

Ak potrebujete na webe peknú tabuľku, WordPress vás prekvapí príjemne. Hoci v klasickom editore spred 10 rokov boli tabuľky jeho slabým miestom, dnes má v štandardnej ponuke v rámci editora Gutenberg možnosti na tvorbu jednoduchých tabuliek, a zvládne aj náročnejšie tabuľky pomocou pluginov. Elegantne a relatívne rýchlo.

autorom článku je: Ján Tóth
- absolvent FEI STU a FM UK. Po ukončení štúdia pracoval rok vo vydavateľstve ako vedúci IT, následne na vedúcich pozíciách súkromných firiem a tiež ako riaditeľ slovenského zastúpenia nadnárodnej spoločnosti. Autor a spoluautor kníh z oblasti IT, článkov z oblasti zdravia a kozmetiky, prekladateľ, prednášateľ, v súčasnosti pracuje ako lektor a konzultant na voľnej nohe.

Páčil sa vám článok? Pošleme vám podobné.
Aktivujte si okamžité zasielanie noviniek a článkov – už vám od nás nikdy nič neunikne. Môžeme vás okamžite informovať o aktuálnej akcii, novinke, špeciálnej kampani či zľave alebo novom článku na našom blogu. Akonáhle sa u nás v novinkách niečo zmení alebo pridá, do pár minút vám automaticky posielame email s odkazom na novinku na našu stránku. A odhlásiť sa môžete kedykoľvek. Nič neriskujete.


Nikam neodchádzajte, pozrite si naše novinky, akcie alebo si
prečítajte ďalšie podobné články:

Podobné články z kategórie
pekné tabuľky, tvorba web-stránok, web stránky, WordPress


Aktuálna akcia na IT kurzy a počítačové a marketingové kurzy v Bratislave