Beispiele · Live-Tabelle

Live-Tabelle: Beispiele

Lizenz, Status, Gebühr und Einschränkung können in derselben Zeile stehen. Eine Live-Tabelle hält diese Angaben zusammen. Sortiere über die Kopfzeile, filtere Statusfelder, öffne Anmerkungen oder zeichne eine Zahlenspalte als Diagramm. Auf dem Handy bleibt die erste Spalte fixiert, während du seitlich scrollst.

Wann passt es?

  • Vergleiche mit Text, Status und Geld in derselben Zeile
  • Kaufentscheidungen mit Einschränkungen an der passenden Zeile
  • Statische Tabellen durch sortierbare, filterbare und mobil nutzbare Einbettungen ersetzen

Wann passt eine andere Form?

Eine Zahl pro Zeile vergleichst du schneller mit Balken oder Lollipops. Nutze dafür die Diagramm-Schaltfläche. Zeitverläufe gehören weiterhin in Linien.


Anwendungsbeispiele

Was die Plattform berechnet

Beträge erscheinen als kleine Balken. Der erste Betrag bleibt unverändert; die Anmerkungsspalte erklärt zusätzliche Kosten.

Mit diesen Daten im Maker öffnen

Spezifikation ansehen
{
  "type": "table",
  "theme": "ink",
  "title": "Community-Plattformen, Beispielszenario",
  "source": "Fiktive Beispielwerte in Euro; keine aktuellen Produktpreise",
  "data": {
    "labels": [
      "Skool Pro",
      "Skool Hobby",
      "Circle Professional",
      "Mighty Networks Launch",
      "Discourse Pro",
      "Bettermode Starter"
    ],
    "series": [],
    "columns": [
      {
        "name": "Plattform"
      },
      {
        "name": "Kosten in diesem Beispiel",
        "kind": "number",
        "format": "affix:[\"\",\" €\"]"
      },
      {
        "name": "Onlineshop",
        "kind": "status"
      },
      {
        "name": "Zusätzliche Aufgaben deines Teams",
        "kind": "note"
      }
    ],
    "rows": [
      [
        "Skool Pro",
        202,
        "yes",
        "Keine – Zahlungsabwicklung ist im Satz enthalten"
      ],
      [
        "Skool Hobby",
        289,
        "yes",
        "Keine – Zahlungsabwicklung ist im Satz enthalten"
      ],
      [
        "Circle Professional",
        139,
        "yes",
        {
          "text": "Anteil und Festgebühr des Zahlungsdienstes",
          "kind": "partial"
        }
      ],
      [
        "Mighty Networks Launch",
        129,
        "yes",
        {
          "text": "Abwicklung, 63 bis 125 € in diesem Beispiel",
          "kind": "partial"
        }
      ],
      [
        "Discourse Pro",
        100,
        "no",
        {
          "text": "Ein Zahlungsdienst und seine Gebühren",
          "kind": "partial"
        }
      ],
      [
        "Bettermode Starter",
        399,
        "no",
        {
          "text": "Ein Shop zusätzlich zur jährlichen Vorauszahlung",
          "kind": "partial"
        }
      ]
    ]
  }
}

Unbekannt bleibt unbekannt

Unbekannt und Nicht zutreffend sind eigene Zustände. Das Fragezeichen steht für fehlende veröffentlichte Angaben, der Strich für eine nicht anwendbare Frage.

Mit diesen Daten im Maker öffnen

Spezifikation ansehen
{
  "type": "table",
  "theme": "mint",
  "title": "KI-Lernwerkzeuge: kostenloser Tarif",
  "source": "Produktseiten, September 2026",
  "data": {
    "labels": [
      "Quizlet",
      "Knowt",
      "Anki",
      "Gizmo"
    ],
    "series": [],
    "columns": [
      {
        "name": "Werkzeug"
      },
      {
        "name": "Kostenloser KI-Tarif",
        "kind": "status"
      },
      {
        "name": "Limit veröffentlicht",
        "kind": "status"
      },
      {
        "name": "Offline nutzbar",
        "kind": "status"
      }
    ],
    "rows": [
      [
        "Quizlet",
        "yes",
        "yes",
        "no"
      ],
      [
        "Knowt",
        "yes",
        {
          "status": "partial",
          "note": "Das Limit hängt von der Funktion ab"
        },
        "no"
      ],
      [
        "Anki",
        "na",
        "na",
        "yes"
      ],
      [
        "Gizmo",
        "yes",
        {
          "status": "unknown",
          "note": "Nicht veröffentlicht"
        },
        "unknown"
      ]
    ]
  }
}

Alle HTTP-Statuscodes, zehn pro Seite

63 registrierte Codes werden mit options.pageSize: 10 auf Seiten verteilt. Suche und Statusfilter begrenzen zuerst die Zeilen; die Seiten folgen. Die Gesamtansicht zeigt alle Codes. Die Standard-Zwischenspeicherbarkeit folgt der Liste aus RFC 9110.

Mit diesen Daten im Maker öffnen

Spezifikation ansehen
{
  "type": "table",
  "theme": "editorial",
  "title": "HTTP-Statuscodes",
  "source": "IANA-Register der HTTP-Statuscodes; Standard-Zwischenspeicherung nach RFC 9110 §15.1",
  "options": {
    "pageSize": 10,
    "search": true,
    "sticky": true
  },
  "data": {
    "labels": [
      "100",
      "101",
      "102",
      "103",
      "200",
      "201",
      "202",
      "203",
      "204",
      "205",
      "206",
      "207",
      "208",
      "226",
      "300",
      "301",
      "302",
      "303",
      "304",
      "305",
      "306",
      "307",
      "308",
      "400",
      "401",
      "402",
      "403",
      "404",
      "405",
      "406",
      "407",
      "408",
      "409",
      "410",
      "411",
      "412",
      "413",
      "414",
      "415",
      "416",
      "417",
      "418",
      "421",
      "422",
      "423",
      "424",
      "425",
      "426",
      "428",
      "429",
      "431",
      "451",
      "500",
      "501",
      "502",
      "503",
      "504",
      "505",
      "506",
      "507",
      "508",
      "510",
      "511"
    ],
    "series": [],
    "columns": [
      {
        "name": "Code"
      },
      {
        "name": "Bedeutung"
      },
      {
        "name": "Standardmäßig zwischenspeicherbar",
        "kind": "status"
      }
    ],
    "rows": [
      [
        "100",
        "Fortfahren",
        "no"
      ],
      [
        "101",
        "Protokollwechsel",
        "no"
      ],
      [
        "102",
        "Verarbeitung",
        "no"
      ],
      [
        "103",
        "Vorabhinweise",
        "no"
      ],
      [
        "200",
        "OK",
        "yes"
      ],
      [
        "201",
        "Erstellt",
        "no"
      ],
      [
        "202",
        "Angenommen",
        "no"
      ],
      [
        "203",
        "Nicht maßgebliche Information",
        "yes"
      ],
      [
        "204",
        "Kein Inhalt",
        "yes"
      ],
      [
        "205",
        "Inhalt zurücksetzen",
        "no"
      ],
      [
        "206",
        "Teilinhalt",
        "yes"
      ],
      [
        "207",
        "Mehrere Statuswerte",
        "no"
      ],
      [
        "208",
        "Bereits gemeldet",
        "no"
      ],
      [
        "226",
        "Instanzmanipulation verwendet",
        "no"
      ],
      [
        "300",
        "Mehrere Auswahlmöglichkeiten",
        "yes"
      ],
      [
        "301",
        "Dauerhaft verschoben",
        "yes"
      ],
      [
        "302",
        "Gefunden",
        "no"
      ],
      [
        "303",
        "Andere Ressource aufrufen",
        "no"
      ],
      [
        "304",
        "Unverändert",
        "no"
      ],
      [
        "305",
        "Proxy verwenden",
        "no"
      ],
      [
        "306",
        "(Ungenutzt)",
        "no"
      ],
      [
        "307",
        "Vorübergehende Weiterleitung",
        "no"
      ],
      [
        "308",
        "Dauerhafte Weiterleitung",
        "yes"
      ],
      [
        "400",
        "Fehlerhafte Anfrage",
        "no"
      ],
      [
        "401",
        "Nicht autorisiert",
        "no"
      ],
      [
        "402",
        "Zahlung erforderlich",
        "no"
      ],
      [
        "403",
        "Zugriff verweigert",
        "no"
      ],
      [
        "404",
        "Nicht gefunden",
        "yes"
      ],
      [
        "405",
        "Methode nicht erlaubt",
        "yes"
      ],
      [
        "406",
        "Nicht akzeptabel",
        "no"
      ],
      [
        "407",
        "Proxy-Anmeldung erforderlich",
        "no"
      ],
      [
        "408",
        "Zeitüberschreitung der Anfrage",
        "no"
      ],
      [
        "409",
        "Konflikt",
        "no"
      ],
      [
        "410",
        "Nicht mehr verfügbar",
        "yes"
      ],
      [
        "411",
        "Länge erforderlich",
        "no"
      ],
      [
        "412",
        "Vorbedingung nicht erfüllt",
        "no"
      ],
      [
        "413",
        "Inhalt zu groß",
        "no"
      ],
      [
        "414",
        "URI zu lang",
        "yes"
      ],
      [
        "415",
        "Medientyp nicht unterstützt",
        "no"
      ],
      [
        "416",
        "Bereich nicht erfüllbar",
        "no"
      ],
      [
        "417",
        "Erwartung nicht erfüllt",
        "no"
      ],
      [
        "418",
        "(Ungenutzt)",
        "no"
      ],
      [
        "421",
        "Fehlgeleitete Anfrage",
        "no"
      ],
      [
        "422",
        "Inhalt nicht verarbeitbar",
        "no"
      ],
      [
        "423",
        "Gesperrt",
        "no"
      ],
      [
        "424",
        "Abhängigkeit fehlgeschlagen",
        "no"
      ],
      [
        "425",
        "Zu früh",
        "no"
      ],
      [
        "426",
        "Protokollwechsel erforderlich",
        "no"
      ],
      [
        "428",
        "Vorbedingung erforderlich",
        "no"
      ],
      [
        "429",
        "Zu viele Anfragen",
        "no"
      ],
      [
        "431",
        "Anfragekopf-Felder zu groß",
        "no"
      ],
      [
        "451",
        "Aus rechtlichen Gründen nicht verfügbar",
        "no"
      ],
      [
        "500",
        "Interner Serverfehler",
        "no"
      ],
      [
        "501",
        "Nicht implementiert",
        "yes"
      ],
      [
        "502",
        "Fehlerhaftes Gateway",
        "no"
      ],
      [
        "503",
        "Dienst nicht verfügbar",
        "no"
      ],
      [
        "504",
        "Gateway-Zeitüberschreitung",
        "no"
      ],
      [
        "505",
        "HTTP-Version nicht unterstützt",
        "no"
      ],
      [
        "506",
        "Variante verhandelt ebenfalls",
        "no"
      ],
      [
        "507",
        "Unzureichender Speicher",
        "no"
      ],
      [
        "508",
        "Schleife erkannt",
        "no"
      ],
      [
        "510",
        "Nicht erweitert (veraltet)",
        "no"
      ],
      [
        "511",
        "Netzwerkanmeldung erforderlich",
        "no"
      ]
    ]
  }
}

Eine bearbeitbare Auswahlliste für Leser

Namen verlinken auf die Projektseiten in einem neuen Tab. Mit Pro lassen sich markierte Zeilen nebeneinander vergleichen, Unterschiede werden hervorgehoben. Kopieren und CSV übernehmen sichtbare Zeilen; die Eckschaltfläche öffnet die Vollbildansicht.

Mit diesen Daten im Maker öffnen

Spezifikation ansehen
{
  "type": "table",
  "theme": "editorial",
  "title": "Forensoftware: die engere Auswahl",
  "source": "Fiktive Beispielwerte in Euro; keine aktuellen Produktpreise",
  "options": {
    "sticky": true,
    "table": {
      "compare": true,
      "copy": true,
      "expand": true
    }
  },
  "data": {
    "labels": [
      "Discourse",
      "Flarum",
      "vBulletin",
      "phpBB",
      "XenForo",
      "Invision"
    ],
    "series": [],
    "columns": [
      {
        "name": "Produkt"
      },
      {
        "name": "Lizenz"
      },
      {
        "name": "Lizenzkosten",
        "kind": "status"
      },
      {
        "name": "Monatlich in diesem Beispiel",
        "kind": "number",
        "format": "affix:[\"\",\" €\"]"
      },
      {
        "name": "Was beim Team bleibt",
        "kind": "note"
      }
    ],
    "rows": [
      [
        "[Discourse](https://www.discourse.org/)",
        "GPL 2.0 oder neuer",
        {
          "status": "yes",
          "label": "Keine"
        },
        100,
        "Server und SMTP-Maildienst"
      ],
      [
        "[Flarum](https://flarum.org/)",
        "MIT",
        {
          "status": "yes",
          "label": "Keine"
        },
        null,
        "Server, Aktualisierungen, Moderation"
      ],
      [
        "[vBulletin](https://www.vbulletin.com/)",
        "Kommerziell",
        {
          "status": "no",
          "label": "Kostenpflichtig"
        },
        399,
        "Server, Aktualisierungen, Moderation"
      ],
      [
        "[phpBB](https://www.phpbb.com/)",
        "GPL 2.0",
        {
          "status": "yes",
          "label": "Keine"
        },
        null,
        "Server, Aktualisierungen, Moderation"
      ],
      [
        "[XenForo](https://xenforo.com/)",
        "Kommerziell",
        {
          "status": "no",
          "label": "Kostenpflichtig"
        },
        199,
        "Server, Aktualisierungen, Moderation"
      ],
      [
        "[Invision](https://invisioncommunity.com/)",
        "Kommerziell",
        {
          "status": "no",
          "label": "Kostenpflichtig"
        },
        299,
        "Server, Aktualisierungen, Moderation"
      ]
    ]
  }
}

Eine Rechnung mit Summe und Markenfarbe

Die letzte Zeile summiert Plätze und Ausgaben der sichtbaren Zeilen. Nach einer Suche wird neu gerechnet. In der Änderungsspalte bedeutet ein Rückgang eine Verbesserung. Die Markenfarbe ist eine Pro-Funktion.

Mit diesen Daten im Maker öffnen

Spezifikation ansehen
{
  "type": "table",
  "theme": "editorial",
  "title": "Teamsoftware, Monatsrechnung",
  "source": "Fiktive Beispielwerte in Euro; keine aktuellen Produktpreise",
  "options": {
    "sticky": true,
    "search": true,
    "table": {
      "totals": [
        {
          "column": 2
        },
        {
          "column": 3
        }
      ],
      "change": [
        {
          "column": 4,
          "better": "down"
        }
      ],
      "brand": "#e4572e"
    }
  },
  "data": {
    "labels": [
      "Designpaket",
      "Teamchat",
      "Dokumentation und Wiki",
      "CRM",
      "Analyse",
      "Videoanrufe"
    ],
    "series": [],
    "columns": [
      {
        "name": "Werkzeug"
      },
      {
        "name": "Team"
      },
      {
        "name": "Plätze",
        "kind": "number"
      },
      {
        "name": "Monatlich",
        "kind": "number",
        "format": "affix:[\"\",\" €\"]"
      },
      {
        "name": "gegenüber dem Vormonat",
        "kind": "number",
        "format": "percent"
      }
    ],
    "rows": [
      [
        "Designpaket",
        "Design",
        6,
        540,
        13
      ],
      [
        "Teamchat",
        "Alle",
        24,
        210,
        0
      ],
      [
        "Dokumentation und Wiki",
        "Alle",
        24,
        180,
        -5
      ],
      [
        "CRM",
        "Vertrieb",
        8,
        600,
        20
      ],
      [
        "Analyse",
        "Design",
        4,
        290,
        0
      ],
      [
        "Videoanrufe",
        "Alle",
        24,
        150,
        -8
      ]
    ]
  }
}
Diese Tabelle im Maker öffnen Mit Tabelle neu beginnen


Häufige Fragen

Was ist eine Live-Tabelle?

Eine echte HTML-Tabelle, die Suchmaschinen und Screenreader als Tabelle lesen. Kopfzellen sortieren, Statusfelder filtern, Zahlen tragen kleine Balken und Anmerkungen öffnen sich per Klick. Auf dem Handy scrollt sie seitlich mit fixierter erster Spalte; Karten pro Zeile sind optional. Der Text bleibt Text und wird kein Bild.

Wie unterscheidet sie sich von Statusmatrix und Lollipop?

Diese Diagramme zeigen einzelne Aspekte einer Tabelle: Zustände oder eine Zahlenspalte. Die Live-Tabelle behält die ganze Zeile. Ihre Diagramm-Schaltfläche übergibt Zahlenspalten oder Statusfelder mit Anzahlen an dieselbe Engine.

Sind Links, Summen und Zeilenvergleiche möglich?

Ja. Zellen können Links als Text oder Webadresse enthalten, die sich in einem neuen Tab öffnen. Die Summenzeile addiert oder mittelt sichtbare Zeilen. Leser können kopieren oder CSV herunterladen. Mit Pro sind Zeilenvergleich und Markenfarbe möglich.

Ist das eine Vergleichstabelle?

Ja. Sie bleibt beim Einbetten HTML statt zum Bildschirmfoto zu werden. Sortierung, Filter und die Zugänglichkeit für Screenreader bleiben erhalten.