Srovnávací tabulky: Formát a příklady

Srovnávací tabulka hodnotí každou možnost podle stejných rozhodovacích dimenzí, takže čtenář vidí smysluplné rozdíly, aniž by je musel rekonstruovat z oddělených odstavců. Je to jeden z nejhodnotnějších prvků stránky pro konverzi a extrakci odpovědních enginů – ale pouze pokud je publikována jako data, nikoli jako obrázek dat.

Legenda: „Součástí" znamená, že daná schopnost je součástí uvedeného tarifu bez doplňkového poplatku. „Není k dispozici" znamená, že poskytovatel ji v tomto tarifu nenabízí. „Neznámé" znamená, že tvrzení nebylo možné ověřit z uvedeného zdroje. Názvy a údaje výše jsou ilustrativní; struktura je produkční model.

Proč na tomto prvku záleží

Porovnávání vytváří kognitivní zátěž. Když jsou tři produkty popsány ve třech samostatných sekcích, čtenář si musí zapamatovat každou cenu, sjednotit různá znění a rozhodnout, zda chybějící funkce chybí, nebo není zmíněna. Tabulka tuto paměťovou zátěž odstraňuje. Její řádky deklarují rozhodovací dimenze, sloupce obsahují možnosti a každá průsečíková buňka poskytuje odpověď. Čtenář může procházet jeden sloupec nebo napříč jedním kritériem, aniž by ztratil kontext.

Tato struktura také zlepšuje strojovou extrahovatelnost: schopnost vyhledávacího systému nebo odpovědního enginu zachovat vztah mezi popiskem a jeho hodnotou při opětovném použití obsahu. Jasný záhlavní řádek, explicitní řádkové hlavičky, jeden fakt na buňku a úplné dimenze vytvářejí kompaktní sadu výroků subjekt–predikát–hodnota. „Relay — minimální smlouva — roční" lze snadno izolovat a citovat. Barevné rozložení do karet obsahující stejná slova může pro vidícího návštěvníka vypadat jako tabulka, ale neodhaluje žádné spolehlivé vztahy mezi řádky a sloupci.

Obrázek tabulky není srovnávací tabulka. Je to snímek obrazovky obsahující text. Osoba používající čtečku obrazovky nemůže procházet její hlavičky a buňky. Čtenář nemůže čistě zkopírovat cenu, vyhledávat v textu, zvětšit text bez zvětšení celého obrázku nebo jej přizpůsobit úzké obrazovce. Crawlery a odpovědní enginy se mohou pokoušet o optické rozpoznávání znaků, ale i úspěšné rozpoznání nezaručuje, že správná hodnota zůstane přiřazena správnému řádku a sloupci. Stejně tak hromada stylovaných div prvků může napodobovat mřížku, zatímco zahazuje sémantiku tabulky. Náklady jsou zřejmé: stránka vynakládá výzkumné úsilí na produkci faktů a pak skrývá jejich vztahy před mnoha lidmi i stroji.

Kdy to použít

Použijte srovnávací tabulku, když čtenáři musí porovnat alespoň dvě možnosti podle alespoň tří společných dimenzí. Vhodná témata zahrnují produkty, tarify, metody, úrovně služeb, technické specifikace, pravidla způsobilosti a krátký seřazený seznam. Dimenze musí být srovnatelné: cena s cenou, komunikační kanál s komunikačním kanálem, smluvní podmínky s podmínkami.

Nepoužívejte ji jen proto, že se několik faktů vejde do řádků. Dvousloupcový seznam popisků a hodnot o jednom objektu je specifikační tabulka, nikoli srovnání. Rozvrh je časový harmonogram. Matice surových měření může být datová tabulka, jejímž účelem je analýza, nikoli volba. Dlouhý narativní argument patří do prózy, protože buňka by neměla obsahovat minieseje.

Téměř správná použití vyžadují zvláštní pozornost:

• Různá kritéria pro každou možnost: nejprve použijte samostatné profily, pak porovnávejte pouze společná kritéria. Mřížka s neodpovídajícími dimenzemi vytváří iluzi rovnocennosti.
• Jeden verdikt bez podpůrných dimenzí: použijte přímé doporučení a vysvětlete zdůvodnění. Jednořádková tabulka přidává ceremonii, nikoli přehlednost.
• Více než pět sloupců možností: rozdělte oblast podle cílové skupiny nebo použijte filtrovatelnou přístupnou tabulku. Zmenšování textu, dokud se vše nevejde, činí prvek technicky přítomným, ale prakticky nepoužitelným.
• Vizuální kontrolní seznam funkcí: použijte tabulku pouze tehdy, pokud má každý symbol definovaný význam a každá možnost dostává odpověď v každém řádku.
• Často se měnící živá data: použijte udržovaný zdroj dat a viditelné datum ověření. Pokud nikdo nemůže data udržovat aktuální, tabulku nepublikujte.

Kam ji umístit

Umístěte primární srovnávací tabulku poté, co stránka definuje publikum, způsob výběru a dimenze, ale před dlouhými recenzemi jednotlivých možností. Čtenáři potřebují dostatek kontextu k interpretaci řádků; neměli by muset přečíst celou stránku, než se dostanou ke srovnání.

Na stránce A vs B tabulka obvykle následuje po přímé odpovědi a krátké poznámce „jak jsme porovnávali". Na stránce s výběrem následuje po kritériích zařazení a předchází podrobným položkám. Menší specifikační tabulka se může objevit v sekci produktu, ale nesmí být v rozporu s primární tabulkou ani zavádět jiný význam pro stejný popisek.

Neumisťujte tabulku přímo vedle jiné hutné srovnávací tabulky, nesouvisející výzvy k akci nebo celošířkového snímku obrazovky. Konkurující si mřížky činí cestu čtení nejasnou. Nevkládejte reklamní banner mezi popisek a tabulku ani poznámku ke zdroji mezi řádek a fakt, který kvalifikuje. Udržujte popisek, datum ověření, legendu, tabulku a poznámku ke zdroji jako jeden ohraničený celek. Výzva k akci může následovat po vysvětlujícím verdiktu, nikoli přerušovat důkazy.

Anatomie

Označený obrázek musí identifikovat tyto oblasti, aniž by vkládal vysvětlení přímo do obrázku:

1. Popisek: uvádí, co je porovnáváno, pro koho a v rámci kterého tarifu nebo scénáře.
2. Datum ověření: uvádí přesné datum, kdy byly ceny a dostupnost zkontrolovány.
3. Hlavičky sloupců: pojmenovávají možnosti; první hlavička pojmenovává sloupec rozhodovacích dimenzí.
4. Hlavičky řádků: každá pojmenovává jednu rozhodovací dimenzi.
5. Tělové buňky: obsahují jeden fakt, jedno číslo s jednotkou nebo jeden definovaný symbol.
6. Zvýrazněný sloupec: označuje redakční doporučení, pokud existuje; nikdy nemění ani neskrývá základní fakta.
7. Legenda: definuje každý symbol a stavový popisek ve viditelném textu.
8. Poznámka ke zdroji: uvádí primární zdroj nebo metodu použitou k ověření tvrzení.

Vykreslená legenda: ✓ = dostupné v uvedeném tarifu; — = v tomto tarifu nedostupné; N/A = dimenze se nevztahuje; Neznámé = tým nemohl fakt ověřit. Publikovaná komponenta musí také zpřístupnit tyto významy asistenčním technologiím – například viditelným nebo skrytým textem v každé buňce – a nespoléhat se pouze na samotné znaky.

Příklady designu

Každá varianta používá stejné sémantické jádro. Vizuální úpravy mohou měnit důraz a hustotu, ale nesmí přeměnit buňky na obrázky, odstranit hlavičky, sloučit buňky nebo kódovat význam pouze barvou.

Standard: dvě až čtyři možnosti, tři až osm rozhodovacích řádků, bez redakčního zvýraznění. Toto je výchozí nastavení, když stránka vysvětluje kompromisy, nikoli vyhlašuje jednoho vítěze.

Zvýrazněné doporučení: jeden sloupec možnosti může obdržet textový popisek, například „Nejlepší pro malé týmy." Barva je doplňková. Zvýraznění nesmí změnit pořadí řádků, zakrýt nevýhody nebo snížit kontrast textu u jiné možnosti.

Se symboly: vhodné pro opakující se binární údaje o dostupnosti funkcí. Používejte pouze tehdy, když je legenda viditelná a každá buňka má přístupný textový ekvivalent. Ceny, limity a kvalifikace zůstávají textem.

Mobilní zobrazení s lepivým prvním sloupcem: tabulka se posouvá horizontálně uvnitř vlastního označeného kontejneru. Samotná stránka nikdy nesmí získat horizontální posouvání. Ponechte první sloupec lepivý, aby čtenář mohl zachovat dimenzi při procházení možnostmi; zachovejte klávesnicový přístup a viditelný stav fokusu pro oblast posouvání.

Parametry

Následující parametry tvoří přenositelný obsahový kontrakt. „Zdroj" znamená, odkud autor nebo renderer získává hodnotu, nikoli důkaz uváděný pro obchodní tvrzení.

Tři sloupce možností plus sloupec hlaviček řádků je běžné, čitelné výchozí nastavení. Šest sloupců celkem je obvyklý strop pro redakční tabulku. Větší datová sada potřebuje záměrné filtrování nebo segmentaci, nikoli postupně menší typografii.

Syntaxe a příklady kódu

Všechny tři formy musí mapovat na stejný popisek, datum kontroly, pořadí sloupců, řádky, legendu a zvýraznění. Markdown pipe tabulka je zdrojová data uvnitř typované direktivy; vnější prvek poskytuje metadata a chování.

Přenositelná Markdown direktiva

:::comparison-table{caption="Email platforms for a 10-person team" verification-date="2026-08-27" highlight-column="relay"}
| Decision dimension | Northstar | Relay | Postbox |
|---:|---:|---:|---:|
| Monthly price, 10 users | $90 | $120 | Not available |
| Approval workflow | Included | Included | Not available |
| Minimum contract | Monthly | Annual | Unknown |

Legend: Included = part of the named plan; Not available = absent from the plan; Unknown = not verified.

Source: vendor plan and pricing pages.
:::

Hugo shortcode

Stávající generický pomocník pro tabulky nenese popisek, datum ověření, rozsah hlaviček řádků, legendu, zdroj ani zvýraznění jako prvotřídní pole. Dokud jeho renderer nesplňuje tento kontrakt, používejte pro živé srovnání sémantické HTML, nikoli vizuálně podobnou, ale strukturálně neúplnou mřížku. Zamýšlené mapování v Hugo je:

{{< comparison-table caption="Email platforms for a 10-person team" verification-date="2026-08-27" highlight-column="relay" >}}
| Decision dimension | Northstar | Relay | Postbox |
|---:|---:|---:|---:|
| Monthly price, 10 users | $90 | $120 | Not available |
| Approval workflow | Included | Included | Not available |
| Minimum contract | Monthly | Annual | Unknown |

Legend: Included = part of the named plan; Not available = absent from the plan; Unknown = not verified.

Source: vendor plan and pricing pages.
{{< /comparison-table >}}

Renderer musí vygenerovat nativní <table class="art-table">, <caption>, <thead> a <tbody>; scope="col" na hlavičkách sloupců; scope="row" na hlavičkách řádků; a uzavřenou oblast pro horizontální posouvání. Zápis není povolením nahrazovat tabulku kartami nebo obrázkem.

WordPress blok nebo shortcode

[comparison_table caption="Email platforms for a 10-person team" verification_date="2026-08-27" highlight_column="relay"]
Decision dimension | Northstar | Relay | Postbox
Monthly price, 10 users | $90 | $120 | Not available
Approval workflow | Included | Included | Not available
Minimum contract | Monthly | Annual | Unknown
[legend]Included = part of the named plan; Not available = absent from the plan; Unknown = not verified.[/legend]
[source]Vendor plan and pricing pages.[/source]
[/comparison_table]

Vlastní WordPress blok může vystavit stejná pole v ovládacích prvcích formuláře. Musí ukládat nebo vykreslovat nativní značení tabulky a zachovávat vztahy, když styly nebo skripty selžou.

Příklady

Dobře: srovnání připravené k rozhodnutí

Toto funguje, protože každý tarif odpovídá na každou rozhodovací dimenzi, čísla obsahují jednotky a předpoklad počtu míst, absence je explicitní a datum kontroly vymezuje platnost tvrzení. Nejdůležitější rozhodovací řádek – celková cena pro skutečný tým – je první. Každá buňka obsahuje jeden fakt, nikoli prodejní tvrzení.

Špatně: přesvědčivě vypadající mřížka

Špatná verze selhává ještě před zohledněním stylování. „Skvělá hodnota" a „výkonné" jsou marketingové fráze bez ověřitelného významu. Zaškrtnutí nemá legendu. „Pokročilé nástroje" není definováno. Prázdná buňka Starter může znamenat chybí, nelze použít, neznámé nebo zapomenuto. „Vše, co potřebujete" balí neomezené množství tvrzení do jedné buňky. Řádky sledují propagační témata, nikoli rozhodnutí kupujícího, chybí datum kontroly a chybí zdroj.

Opravte to pojmenováním přesných dimenzí, jako je limit hostů, doba uchování historie schvalování a dostupnost jednotného přihlašování; ověřením všech tří tarifů vůči každému řádku; nahrazením prázdných míst explicitními stavy; definováním symbolů; a datováním revize. Pokud tyto údaje nelze získat, publikujte upřímné „Neznámé", nikoli příznivý odhad.

Značení schema a přístupnost

Neexistuje žádný obecný typ ani vlastnost Schema.org pro srovnávací tabulku. Prvek zůstává součástí obklopujícího Article, Product nebo kolekční stránky. Fakta mohou napájet platné vlastnosti produktu, nabídky nebo hodnocení pouze tehdy, když stránka nezávisle splňuje pravidla způsobilosti a dokládání pro tato strukturovaná data. Nepřevádějte zvýrazněný sloupec na značení aggregateRating, review nebo offers, pokud podkladový obsah skutečně neposkytuje tyto hodnoty.

Přístupnost pramení ze vztahů, nikoli z vzhledu. Použijte <th scope="col"> pro každou hlavičku možnosti a <th scope="row"> pro každou rozhodovací dimenzi. Přidejte stručný <caption>, který identifikuje tabulku. Vyhněte se slučování buněk, protože rowspan a colspan ztěžují navigaci a extrakci; místo toho zopakujte popisek nebo tabulku rozdělte. Udržujte zdrojové pořadí logické a neodstraňujte tabulku ze stromu přístupnosti.

Na malých obrazovkách umístěte přetečení na kontejner kolem tabulky, nikdy na stránku. Poskytněte oblasti pro posouvání s klávesnicovým fokusem přístupný název a viditelný stav fokusu. Lepivý první sloupec může pomoci zachovat kontext, ale nesmí zakrývat zaměřený obsah ani spoléhat na skripty pro odhalení dat. Symboly vyžadují viditelné textové definice a textové ekvivalenty na úrovni buněk. Barva může zvýraznit doporučený sloupec, ale hlavička také potřebuje textový popisek.

Pravidla psaní

Vybírejte řádky podle rozhodovací hodnoty, nikoli podle pohodlí. Umístěte kritérium, které s největší pravděpodobností změní čtenářovu volbu, jako první, pak následují nezbytné schopnosti, celkové náklady, omezení, podpora a sekundární podrobnosti. Abecední řazení je užitečné pouze tehdy, když čtenáři přicházejí se znalostí názvu dimenze; pro nákupní rozhodnutí je obvykle špatné. Pořadí podle dodavatele je propagační taxonomie, nikoli priorita čtenáře.

Parita dimenzí je absolutní: každá možnost musí být posouzena v každém řádku. Prázdná buňka je sice také odpovědí, ale nejednoznačnou, proto jsou prázdné buňky v publikovaných tabulkách zakázány. Používejte tyto stavy přesně:

• Není k dispozici: možnost neposkytuje danou schopnost v rámci uvedeného tarifu nebo podmínek.
• Nelze použít: dimenze se na danou možnost logicky nevztahuje.
• Neznámé: tým nemohl odpověď ověřit z vhodného zdroje.

Jedna buňka obsahuje jeden fakt, číslo nebo definovaný symbol. Uvádějte jednotky a podmínky: „$49/měsíc pro 5 míst" je použitelné; „Dostupné" není. „10 GB na pracovní prostor" je použitelné; „Štědré úložiště" není. Pokud hodnota potřebuje kvalifikaci, udržujte ji krátkou a připojte poznámku ke zdroji k tabulce. Pokud potřebuje odstavec, vysvětlete ji pod tabulkou a použijte stručný popisek buňky, například „Podmíněné."

Použijte tři až osm řádků pro shrnutí a ne více než deset bez silného důvodu. Použijte dva až pět sloupců možností plus sloupec hlaviček řádků. Udržujte hlavičky konkrétní a paralelní. Nevkládejte do buněk tlačítka, formuláře, automaticky přehrávaná média, odstavce prodejního textu, reference, hodnocení hvězdičkami bez uvedené metodiky ani vnořené tabulky. Nikdy nepoužívejte sloučené buňky v redakčním srovnání.

Datum kontroly je povinné, protože ceny, zásoby, názvy tarifů a dostupnost funkcí se mění. Uvádějte přesné datum, nikoli „nedávno" nebo „aktuální." Před publikací přiřaďte vlastníka a interval kontroly. Zastaralá tabulka je horší než žádná tabulka: její čistá struktura činí zastaralé tvrzení neobvykle autoritativním a snadno opakovatelným.

Typy příspěvků, které ji používají

Pole postTypes v frontmatter je strojově čitelným propojením s těmito šesti dokumenty. Viditelná tabulka vysvětluje redakční umístění, které samotný identifikátor nést nemůže.

Kontrolní seznam QA

• Výstupem je nativní HTML tabulka, nikoli obrázek, canvas, CSS mřížka nebo hromada div prvků.
• Tabulka má užitečný popisek, jeden jasný záhlavní řádek, rozsah hlaviček sloupců a rozsah hlaviček řádků.
• Každá možnost je posouzena v každé dimenzi; žádná publikovaná buňka není prázdná.
• „Není k dispozici", „Nelze použít" a „Neznámé" jsou používány podle jejich odlišných významů.
• Každá buňka obsahuje jeden fakt, číslo s jednotkami nebo definovaný symbol – nikdy marketingovou frázi.
• Každý symbol má viditelnou textovou legendu a přístupný textový ekvivalent ve své buňce.
• Řádky jsou seřazeny podle rozhodovací relevance, nikoli abecedně nebo podle pořadí na stránce dodavatele.
• Tabulka zůstává v limitu sloupců nebo byl obsah záměrně segmentován.
• Na mobilu je horizontální posouvání omezeno na označenou oblast tabulky a stránka se neposouvá do stran.
• Lepivý první sloupec, pokud je použit, zůstává čitelný, bezpečný pro klávesnici a vysoce kontrastní.
• Žádné buňky nejsou sloučeny a žádné buňky neobsahují vnořené tabulky nebo komplexní interaktivní ovládací prvky.
• Je uvedeno přesné datum kontroly a vhodná poznámka k primárnímu zdroji.
• Zvýrazněný sloupec, pokud existuje, má textový popisek a nepotlačuje nepříznivé skutečnosti.
• Tabulka stále sděluje své vztahy, když není k dispozici vlastní stylování a skripty.

FAQ

Kolik možností by měla srovnávací tabulka obsahovat?

Použijte dva až pět sloupců možností v hlavní tabulce. Pokud je více možností nezbytných, rozdělte srovnání do tabulek pro konkrétní cílové skupiny nebo poskytněte filtrovatelné rozhraní, které zachovává nativní sémantiku tabulky.

Může srovnávací tabulka používat zaškrtnutí a křížky?

Ano, ale každý symbol potřebuje viditelnou textovou legendu a přístupný textový ekvivalent. Tvar nebo barva samy o sobě nejsou odpovědí, protože čtenáři nemohou spolehlivě odvodit, zda symbol znamená zahrnuto, doporučeno, testováno nebo pouze přítomno.

Co by měla znamenat prázdná buňka?

Nic. Prázdné buňky jsou zakázány, protože jejich význam je nepoznatelný. Napište „Není k dispozici", „Nelze použít" nebo „Neznámé" a používejte každý termín podle jeho definovaného významu.

Potřebuje srovnávací tabulka strukturovaná data?

Obvykle ne. Neexistuje žádné obecné schema pro srovnávací tabulku. Ponechte ji v rámci platného schématu stránky a mapujte vlastnosti produktu, nabídky nebo hodnocení pouze tehdy, když stránka má důkazy, které tyto vlastnosti vyžadují.

Jak často by se měla tabulka kontrolovat?

Přizpůsobte kadence volatilitě. Ceny a nároky na tarify mohou vyžadovat měsíční nebo čtvrtletní revizi; stabilní specifikace se mohou měnit méně často. V každém případě uveďte přesné datum poslední kontroly, aby čtenáři mohli sami posoudit aktuálnost.