Vergleichstabellen: Format und Beispiele

Eine Vergleichstabelle bewertet jede Option anhand derselben Entscheidungsdimensionen, sodass ein Leser sinnvolle Unterschiede erkennen kann, ohne sie aus separaten Absätzen rekonstruieren zu müssen. Sie ist eines der wertvollsten Seitenelemente für Conversion und Extraktion durch Antwortmaschinen – aber nur, wenn sie als Daten und nicht als Abbildung von Daten veröffentlicht wird.

Legende: „Enthalten“ bedeutet, dass die Funktion Teil des genannten Tarifs ohne Zusatzoption ist. „Nicht verfügbar“ bedeutet, dass der Anbieter sie in diesem Tarif nicht anbietet. „Unbekannt“ bedeutet, dass die Angabe nicht aus der genannten Quelle überprüft werden konnte. Die Namen und Zahlen oben sind beispielhaft; die Struktur ist das Produktionsmodell.

Warum dieses Element wichtig ist

Vergleiche bedeuten kognitive Arbeit. Wenn drei Produkte in drei separaten Abschnitten beschrieben werden, muss der Leser sich jeden Preis merken, unterschiedliche Formulierungen normalisieren und entscheiden, ob eine fehlende Funktion abwesend oder lediglich nicht erwähnt ist. Eine Tabelle nimmt diese Gedächtnisaufgabe ab. Ihre Zeilen geben die Entscheidungsdimensionen vor, ihre Spalten enthalten die Optionen, und jede Schnittstelle liefert die Antwort. Der Leser kann eine Option oder ein Kriterium überfliegen, ohne den Zusammenhang zu verlieren.

Diese Struktur verbessert auch die maschinelle Extrahierbarkeit: die Fähigkeit eines Suchsystems oder einer Antwortmaschine, die Beziehung zwischen einer Bezeichnung und ihrem Wert bei der Wiederverwendung von Inhalten zu bewahren. Eine klare Kopfzeile, explizite Zeilenüberschriften, eine Tatsache pro Zelle und vollständige Dimensionen erzeugen einen kompakten Satz von Subjekt–Prädikat–Wert-Aussagen. „Relay – Mindestvertragslaufzeit – jährlich“ lässt sich leicht isolieren und zitieren. Ein farbiges Kartenlayout mit denselben Wörtern mag für einen sehenden Besucher wie eine Tabelle aussehen, legt aber keine verlässlichen Zeilen-und-Spalten-Beziehungen offen.

Ein Bild einer Tabelle ist keine Vergleichstabelle. Es ist ein Screenshot, der Text enthält. Eine Person, die einen Screenreader verwendet, kann dessen Kopfzeilen und Zellen nicht navigieren. Ein Leser kann einen Preis nicht sauber kopieren, darin suchen, Text vergrößern, ohne das gesamte Bild zu vergrößern, oder es an einen schmalen Bildschirm anpassen. Crawler und Antwortmaschinen mögen eine optische Zeichenerkennung versuchen, aber selbst erfolgreiche Zeichenerkennung garantiert nicht, dass der richtige Wert der richtigen Zeile und Spalte zugeordnet bleibt. Ebenso kann ein Haufen gestylter div-Elemente ein Raster nachahmen, während die Tabellensemantik verworfen wird. Die Kosten sind klar: Die Seite investiert Rechercheaufwand in die Erstellung von Fakten und versteckt dann ihre Beziehungen vor vielen Menschen und Maschinen.

Wann es verwendet wird

Verwenden Sie eine Vergleichstabelle, wenn Leser mindestens zwei Optionen anhand von mindestens drei gemeinsamen Dimensionen bewerten müssen. Geeignete Themen umfassen Produkte, Tarife, Methoden, Service-Stufen, technische Spezifikationen, Berechtigungsregeln und eine kurze bewertete Liste. Die Dimensionen müssen vergleichbar sein: Preis gegen Preis, Supportkanal gegen Supportkanal, Vertragslaufzeit gegen Vertragslaufzeit.

Verwenden Sie sie nicht nur, weil mehrere Fakten in Zeilen passen. Eine zweispaltige Bezeichnungs-und-Werte-Liste über ein Objekt ist eine Spezifikationstabelle, kein Vergleich. Ein Zeitplan ist ein Fahrplan. Eine Matrix von Rohmessungen kann eine Datentabelle sein, deren Zweck Analyse statt Entscheidung ist. Ein langes narratives Argument gehört in Prosa, da eine Zelle keinen Miniaufsatz enthalten sollte.

Beinahe-Fehler erfordern besondere Sorgfalt:

• Unterschiedliche Kriterien für jede Option: Erstellen Sie zuerst separate Profile und vergleichen Sie dann nur die gemeinsamen Kriterien. Ein Raster mit ungleichen Dimensionen erzeugt eine Illusion von Gleichwertigkeit.
• Ein Urteil ohne unterstützende Dimensionen: Verwenden Sie eine direkte Empfehlung und erläutern Sie die Begründung. Eine einzeilige Tabelle fügt Zeremonie hinzu, keine Klarheit.
• Mehr als fünf Optionsspalten: Teilen Sie das Feld nach Zielgruppe auf oder verwenden Sie eine filterbare, barrierefreie Tabelle. Text zu verkleinern, bis alles passt, macht das Element technisch vorhanden, aber praktisch unbrauchbar.
• Eine visuelle Funktionscheckliste: Verwenden Sie eine Tabelle nur, wenn jedes Symbol eine definierte Bedeutung hat und jede Option für jede Zeile eine Antwort erhält.
• Häufig wechselnde Live-Daten: Verwenden Sie eine gepflegte Datenquelle und ein sichtbares Prüfdatum. Wenn niemand die Daten aktuell halten kann, veröffentlichen Sie die Tabelle nicht.

Wo es platziert wird

Positionieren Sie die primäre Vergleichstabelle, nachdem die Seite die Zielgruppe, die Auswahlmethode und die Dimensionen definiert hat, aber bevor lange optionenweise Bewertungen kommen. Leser benötigen genügend Kontext, um die Zeilen zu interpretieren; sie sollten nicht die gesamte Seite lesen müssen, bevor sie den Vergleich erhalten.

Auf einer A-vs-B-Seite folgt die Haupttabelle normalerweise der direkten Antwort und einer kurzen „Wie wir verglichen haben“-Notiz. Auf einer Shortlist-Seite folgt sie den Aufnahmekriterien und geht den detaillierten Einträgen voraus. Eine kleinere Spezifikationstabelle kann innerhalb eines Produktabschnitts erscheinen, darf aber der primären Tabelle nicht widersprechen oder eine andere Bedeutung für dieselbe Bezeichnung einführen.

Platzieren Sie die Tabelle nicht direkt neben einer anderen dichten Vergleichstabelle, einem nicht zugehörigen Call-to-Action oder einem vollbreiten Screenshot. Konkurrierende Raster machen den Lesepfad unklar. Fügen Sie kein Werbebanner zwischen die Bildunterschrift und die Tabelle oder eine Quellenangabe zwischen eine Zeile und die Tatsache, die sie qualifiziert. Halten Sie Bildunterschrift, Prüfdatum, Legende, Tabelle und Quellenangabe als eine zusammenhängende Einheit. Ein Call-to-Action kann dem erläuternden Urteil folgen, nicht die Evidenz unterbrechen.

Anatomie

Das beschriftete Bild muss diese Bereiche identifizieren, ohne die Erklärungen in das Asset einzubetten:

1. Bildunterschrift: Gibt an, was verglichen wird, für wen und unter welchem Tarif oder Szenario.
2. Prüfdatum: Gibt das genaue Datum an, an dem Preise und Verfügbarkeit überprüft wurden.
3. Spaltenüberschriften: Benennen die Optionen; die erste Überschrift benennt die Spalte der Entscheidungsdimensionen.
4. Zeilenüberschriften: Benennen jeweils eine entscheidungsrelevante Dimension.
5. Körperzellen: Enthalten eine Tatsache, eine Zahl mit ihrer Einheit oder ein definiertes Symbol.
6. Hervorgehobene Spalte: Kennzeichnet die redaktionelle Empfehlung, wenn eine existiert; sie ändert oder verbirgt niemals die zugrundeliegenden Fakten.
7. Legende: Definiert jedes Symbol und jeden Statusbezeichner in sichtbarem Text.
8. Quellenangabe: Nennt die primäre Quelle oder Methode, die zur Überprüfung der Behauptungen verwendet wurde.

Gerenderte Legende: ✓ = im angegebenen Tarif verfügbar; — = in diesem Tarif nicht verfügbar; N/A = die Dimension trifft nicht zu; Unbekannt = das Team konnte die Tatsache nicht überprüfen. Die veröffentlichte Komponente muss diese Bedeutungen auch für assistive Technologien zugänglich machen – zum Beispiel durch sichtbaren oder visuell versteckten Text in jeder Zelle – und sich nicht allein auf die Zeichen verlassen.

Designbeispiele

Jede Variante verwendet denselben semantischen Kern. Visuelle Behandlungen können Betonung und Dichte verändern, aber sie dürfen Zellen nicht in Bilder verwandeln, Überschriften entfernen, Zellen zusammenführen oder Bedeutung nur durch Farbe codieren.

Standard: zwei bis vier Optionen, drei bis acht Entscheidungszeilen, keine redaktionelle Hervorhebung. Dies ist der Standard, wenn die Seite Abwägungen erklärt, statt einen Gewinner auszurufen.

Hervorgehobene Empfehlung: Eine Optionsspalte kann ein Textlabel wie „Am besten für kleine Teams“ erhalten. Farbe ist ergänzend. Die Hervorhebung darf die Zeilenreihenfolge nicht ändern, Nachteile nicht verschleiern oder den Kontrast des Textes einer anderen Option verringern.

Symbolgeführt: Geeignet für wiederholte binäre Verfügbarkeitsangaben. Verwenden Sie dies nur, wenn die Legende sichtbar ist und jede Zelle eine barrierefreie Textentsprechung behält. Preise, Grenzen und Qualifikationen bleiben Text.

Mobil mit klebriger erster Spalte: Die Tabelle scrollt horizontal innerhalb ihres eigenen beschrifteten Containers. Die Seite selbst darf niemals horizontalen Scrollbalken erhalten. Halten Sie die erste Spalte klebrig, damit ein Leser die Dimension beim Durchgehen der Optionen behalten kann; bewahren Sie Tastaturzugriff und einen sichtbaren Fokusstatus für den Scrollbereich.

Parameter

Die folgenden Parameter bilden den portablen Inhaltsvertrag. „Quelle“ bedeutet, woher der Autor oder Renderer den Wert bezieht, nicht die für eine kommerzielle Behauptung zitierte Evidenz.

Drei Optionsspalten plus die Zeilenüberschriftsspalte sind ein üblicher, lesbarer Standard. Insgesamt sechs Spalten ist die normale Obergrenze für eine redaktionelle Tabelle. Ein größerer Datensatz benötigt gezielte Filterung oder Segmentierung, nicht fortschreitend kleinere Typografie.

Syntax und Codebeispiele

Alle drei Formen müssen auf dieselbe Bildunterschrift, dasselbe Prüfdatum, dieselbe Spaltenreihenfolge, Zeilen, Legende und Hervorhebung abbilden. Die Markdown-Pipe-Tabelle sind Quelldaten innerhalb einer typisierten Direktive; das äußere Element liefert Metadaten und Verhalten.

Portable Markdown-Direktive

:::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

Der bestehende generische Tabellen-Helfer hat keine Bildunterschrift, kein Prüfdatum, keinen Zeilenüberschrift-Geltungsbereich, keine Legende, Quelle oder Hervorhebung als erstklassige Felder. Bis sein Renderer diesen Vertrag erfüllt, verwenden Sie semantisches HTML für einen Live-Vergleich, anstatt ein visuell ähnliches, aber strukturell unvollständiges Raster zu akzeptieren. Die vorgesehene Hugo-Abbildung ist:

{{< 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 >}}

Der Renderer muss eine native <table class="art-table">, <caption>, <thead> und <tbody> ausgeben; scope="col" bei Spaltenüberschriften; scope="row" bei Zeilenüberschriften; und einen begrenzten horizontalen Scrollbereich. Die Notation ist keine Erlaubnis, Karten oder ein Bild zu verwenden.

WordPress-Block oder 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]

Ein benutzerdefinierter WordPress-Block kann dieselben Felder in Formularsteuerelementen anbieten. Er muss natives Tabellen-Markup speichern oder rendern und die Beziehungen bewahren, wenn Styles oder Skripte ausfallen.

Beispiele

Gut: Ein entscheidungsbereiter Vergleich

Dies funktioniert, weil jeder Plan jede Entscheidungsdimension beantwortet, Zahlen ihre Einheiten und die Sitzanzahl enthalten, Abwesenheit explizit ist und das Prüfdatum die Behauptung zeitlich eingrenzt. Die entscheidungsrelevanteste Zeile – der Gesamtpreis für das tatsächliche Team – kommt zuerst. Jede Zelle enthält eine Tatsache statt einer Verkaufsbehauptung.

Schlecht: Ein überzeugend wirkendes Raster

Die schlechte Version scheitert bereits vor Berücksichtigung des Stylings. „Großartiger Wert“ und „leistungsstark“ sind Marketingphrasen ohne überprüfbare Bedeutung. Das Häkchen hat keine Legende. „Erweiterte Tools“ ist undefiniert. Die leere Starter-Zelle könnte abwesend, nicht zutreffend, unbekannt oder vergessen bedeuten. „Alles, was Sie brauchen“ bündelt eine unbegrenzte Menge an Behauptungen in einer Zelle. Die Zeilen folgen Werbethemen statt Käuferentscheidungen, es gibt kein Prüfdatum und keine Quelle.

Reparieren Sie es, indem Sie präzise Dimensionen wie Gastlimit, Genehmigungshistorie-Zeitraum und Verfügbarkeit von Single Sign-On benennen; alle drei Pläne gegen jede Zeile prüfen; Leerzeichen durch explizite Status ersetzen; Symbole definieren; und die Überprüfung datieren. Wenn diese Fakten nicht beschafft werden können, veröffentlichen Sie ein ehrliches „Unbekannt“, nicht eine günstige Folgerung.

Schema-Markup und Barrierefreiheit

Es gibt keinen allgemeinen Schema.org-Typ oder keine Eigenschaft für eine Vergleichstabelle. Das Element bleibt Teil des umschließenden Article, Product oder der Sammlungsseite. Fakten dürfen nur dann in gültige Product-, Offer- oder Rating-Eigenschaften einfließen, wenn die Seite unabhängig die Berechtigungs- und Evidenzregeln für diese strukturierten Daten erfüllt. Konvertieren Sie eine hervorgehobene Spalte nicht in aggregateRating-, review- oder offers-Markup, es sei denn, der zugrundeliegende Inhalt liefert diese Werte tatsächlich.

Barrierefreiheit entsteht aus Beziehungen, nicht aus dem Erscheinungsbild. Verwenden Sie <th scope="col"> für jede Optionsüberschrift und <th scope="row"> für jede Entscheidungsdimension. Fügen Sie eine prägnante <caption> hinzu, die die Tabelle identifiziert. Vermeiden Sie zusammengeführte Zellen, da rowspan und colspan Navigation und Extraktion erschweren; wiederholen Sie stattdessen eine Bezeichnung oder teilen Sie die Tabelle auf. Halten Sie die Quellreihenfolge logisch und entfernen Sie die Tabelle nicht aus dem Barrierefreiheits-Baum.

Auf kleinen Bildschirmen platzieren Sie den Überlauf auf einem Container um die Tabelle herum, niemals auf der Seite. Geben Sie einem tastaturfokussierbaren Scrollbereich einen zugänglichen Namen und einen sichtbaren Fokusstatus. Eine klebrige erste Spalte kann helfen, den Kontext zu bewahren, darf aber fokussierte Inhalte nicht verdecken oder auf Skripte angewiesen sein, um Daten anzuzeigen. Symbole benötigen sichtbare Textdefinitionen und zellenweise Textentsprechungen. Farbe kann eine empfohlene Spalte hervorheben, aber die Überschrift benötigt ebenfalls ein Textlabel.

Schreibregeln

Wählen Sie Zeilen nach Entscheidungswert, nicht nach Bequemlichkeit. Setzen Sie das Kriterium, das die Wahl des Lesers am wahrscheinlichsten ändert, an die erste Stelle, dann die Voraussetzungsfunktionen, Gesamtkosten, Einschränkungen, Support und sekundäre Details. Alphabetische Reihenfolge ist nur nützlich, wenn Leser bereits den Dimensionsnamen kennen; sie ist für eine Kaufentscheidung in der Regel falsch. Die Navigationsreihenfolge des Anbieters ist eine werbliche Taxonomie, keine Priorität des Lesers.

Dimensionsgleichheit ist absolut: Jede Option muss in jeder Zeile bewertet werden. Eine Leerstelle ist zwar auch eine Antwort, aber eine mehrdeutige, daher sind Leerstellen in veröffentlichten Tabellen verboten. Verwenden Sie diese Status präzise:

• Nicht verfügbar: Die Option bietet die Funktion unter dem genannten Tarif oder den genannten Bedingungen nicht.
• Nicht zutreffend: Die Dimension ist logischerweise nicht auf diese Option anwendbar.
• Unbekannt: Das Team konnte die Antwort nicht aus einer geeigneten Quelle überprüfen.

Eine Zelle enthält eine Tatsache, eine Zahl oder ein definiertes Symbol. Geben Sie Einheiten und Bedingungen an: „49 $/Monat für 5 Sitze“ ist brauchbar; „Erschwinglich“ ist es nicht. „10 GB pro Arbeitsbereich“ ist brauchbar; „Großzügiger Speicher“ ist es nicht. Wenn ein Wert eine Einschränkung benötigt, halten Sie sie kurz und fügen Sie die Quellenangabe an die Tabelle an. Wenn ein Absatz nötig ist, erklären Sie ihn unterhalb der Tabelle und verwenden Sie eine prägnante Zellenbezeichnung wie „Bedingt“.

Verwenden Sie drei bis acht Zeilen für eine Zusammenfassung und nicht mehr als zehn ohne triftigen Grund. Verwenden Sie zwei bis fünf Optionsspalten plus die Zeilenüberschriftsspalte. Halten Sie Überschriften konkret und parallel. Setzen Sie keine Buttons, Formulare, automatisch abspielende Medien, absatzlange Verkaufstexte, Testimonials, Sternebewertungen ohne angegebene Methodik oder verschachtelte Tabellen in Zellen. Verwenden Sie niemals zusammengeführte Zellen im redaktionellen Vergleich.

Das Prüfdatum ist erforderlich, da sich Preise, Bestände, Tarifnamen und Funktionsverfügbarkeit ändern. Schreiben Sie ein genaues Datum, nicht „kürzlich“ oder „aktuell“. Weisen Sie vor der Veröffentlichung einen Verantwortlichen und einen Überprüfungsrhythmus zu. Eine veraltete Tabelle ist schlimmer als keine Tabelle: Ihre saubere Struktur lässt eine veraltete Behauptung ungewöhnlich autoritativ und leicht reproduzierbar erscheinen.

Beitragstypen, die es verwenden

Das postTypes-Frontmatter ist die maschinenlesbare Verbindung zu diesen sechs Dokumenten. Die sichtbare Tabelle erklärt die redaktionelle Platzierung, die der Bezeichner allein nicht transportieren kann.

QA-Checkliste

• Die Ausgabe ist eine native HTML-Tabelle, kein Bild, Canvas, CSS-Raster oder Haufen von div-Elementen.
• Die Tabelle hat eine nützliche Bildunterschrift, eine klare Kopfzeile, Spaltenüberschrift-Geltungsbereich und Zeilenüberschrift-Geltungsbereich.
• Jede Option wird in jeder Dimension bewertet; keine veröffentlichte Zelle ist leer.
• „Nicht verfügbar“, „Nicht zutreffend“ und „Unbekannt“ werden gemäß ihrer unterschiedlichen Bedeutungen verwendet.
• Jede Zelle enthält eine Tatsache, Zahl mit Einheiten oder ein definiertes Symbol – niemals eine Marketingphrase.
• Jedes Symbol hat eine sichtbare Textlegende und eine barrierefreie Textentsprechung in seiner Zelle.
• Zeilen sind nach Entscheidungsrelevanz geordnet, nicht alphabetisch oder nach Anbieterseiten-Reihenfolge.
• Die Tabelle bleibt innerhalb des Spaltenlimits, oder der Inhalt wurde bewusst segmentiert.
• Auf Mobilgeräten ist horizontales Scrollen auf den beschrifteten Tabellenbereich beschränkt und die Seite scrollt nicht seitwärts.
• Eine klebrige erste Spalte bleibt, falls verwendet, lesbar, tastatursicher und kontrastreich.
• Es werden keine Zellen zusammengeführt und keine Zellen enthalten verschachtelte Tabellen oder komplexe interaktive Steuerelemente.
• Ein genaues Prüfdatum und eine angemessene primäre Quellenangabe sind vorhanden.
• Die hervorgehobene Spalte hat, falls vorhanden, ein Textlabel und unterdrückt keine ungünstigen Fakten.
• Die Tabelle vermittelt ihre Beziehungen auch dann, wenn benutzerdefinierte Styles und Skripte nicht verfügbar sind.

FAQ

Wie viele Optionen sollte eine Vergleichstabelle enthalten?

Verwenden Sie zwei bis fünf Optionsspalten in der Haupttabelle. Wenn mehr Optionen notwendig sind, teilen Sie den Vergleich in zielgruppenspezifische Tabellen auf oder bieten Sie eine filterbare Oberfläche, die native Tabellensemantik bewahrt.

Kann eine Vergleichstabelle Häkchen und Kreuze verwenden?

Ja, aber jedes Symbol benötigt eine sichtbare Textlegende und eine barrierefreie Textentsprechung. Eine Form oder Farbe allein ist keine Antwort, da Leser nicht zuverlässig ableiten können, ob sie „enthalten“, „empfohlen“, „getestet“ oder lediglich „vorhanden“ bedeutet.

Was soll eine leere Zelle bedeuten?

Nichts. Leere Zellen sind verboten, da ihre Bedeutung nicht erkennbar ist. Schreiben Sie „Nicht verfügbar“, „Nicht zutreffend“ oder „Unbekannt“ und verwenden Sie jeden Begriff gemäß seiner definierten Bedeutung.

Benötigt eine Vergleichstabelle strukturierte Daten?

In der Regel nicht. Es gibt kein allgemeines Vergleichstabellen-Schema. Belassen Sie sie im gültigen Schema der Seite und ordnen Sie Product-, Offer- oder Rating-Eigenschaften nur zu, wenn die Seite die Evidenz besitzt, die diese Eigenschaften erfordern.

Wie oft sollte die Tabelle überprüft werden?

Passen Sie den Rhythmus der Änderungshäufigkeit an. Preise und Tarifberechtigungen erfordern möglicherweise monatliche oder vierteljährliche Überprüfungen; stabile Spezifikationen ändern sich seltener. Zeigen Sie in jedem Fall das genaue Datum der letzten Überprüfung an, damit Leser die Aktualität selbst beurteilen können.