Examples · Live table

Live table examples

Some comparisons refuse to become a chart: a license name, a status, a fee and a caveat all sit in one row. A live table keeps every one of them as text — the honest form of a comparison table — then makes it work: click a header to sort, filter by status chips, read money as bars, open the notes, chart a number column in the shape you like. On a phone it stays a table you scroll sideways, first column pinned.

When to use it

  • Comparisons that mix text, statuses and money in one row — the exact tables a chart cannot hold
  • Buying decisions with fine print: every caveat stays one click away, on the row it belongs to
  • Anything you would otherwise paste as a static table: the live one sorts, filters and folds for phones

Not the right shape?

A single number per row you want to compare at a glance — press the table’s “Chart” button or use a lollipop chart; and a trend over time still belongs to a line graph.

Real-world examples

What the platform charges

Money reads as a bar inside its cell, the leading amount stays honest, and the notes column carries what the platform makes you add on top.

Open in maker with this data

View the spec 
{
  "type": "table",
  "theme": "ink",
  "title": "Community platforms, example profile",
  "source": "Pricing pages, August 2026 — leading amounts only",
  "data": {
    "labels": [
      "Skool Pro",
      "Skool Hobby",
      "Circle Professional",
      "Mighty Networks Launch",
      "Discourse Pro",
      "Bettermode Starter"
    ],
    "series": [],
    "columns": [
      {
        "name": "Platform"
      },
      {
        "name": "Charged on this profile",
        "kind": "number",
        "format": "currency:USD"
      },
      {
        "name": "Storefront",
        "kind": "status"
      },
      {
        "name": "Your team still adds",
        "kind": "note"
      }
    ],
    "rows": [
      [
        "Skool Pro",
        201.5,
        "yes",
        "Nothing — processing is inside that rate"
      ],
      [
        "Skool Hobby",
        289,
        "yes",
        "Nothing — processing is inside that rate"
      ],
      [
        "Circle Professional",
        139,
        "yes",
        {
          "text": "The processor's share and its fixed fee",
          "kind": "partial"
        }
      ],
      [
        "Mighty Networks Launch",
        129,
        "yes",
        {
          "text": "Processing, $62.50 to $125 on this profile",
          "kind": "partial"
        }
      ],
      [
        "Discourse Pro",
        100,
        "no",
        {
          "text": "A payment tool and its fees",
          "kind": "partial"
        }
      ],
      [
        "Bettermode Starter",
        399,
        "no",
        {
          "text": "A storefront, on top of a year committed up front",
          "kind": "partial"
        }
      ]
    ]
  }
}

Honest unknowns

Unknown and not-applicable are their own statuses — a question mark says the vendor never published the figure; a dash says the question does not apply.

Open in maker with this data

View the spec 
{
  "type": "table",
  "theme": "mint",
  "title": "AI study tools: the free tier",
  "source": "Product pages, September 2026",
  "data": {
    "labels": [
      "Quizlet",
      "Knowt",
      "Anki",
      "Gizmo"
    ],
    "series": [],
    "columns": [
      {
        "name": "Tool"
      },
      {
        "name": "Free AI plan",
        "kind": "status"
      },
      {
        "name": "Limit published",
        "kind": "status"
      },
      {
        "name": "Works offline",
        "kind": "status"
      }
    ],
    "rows": [
      [
        "Quizlet",
        "yes",
        "yes",
        "no"
      ],
      [
        "Knowt",
        "yes",
        {
          "status": "partial",
          "note": "The cap differs by feature"
        },
        "no"
      ],
      [
        "Anki",
        "na",
        "na",
        "yes"
      ],
      [
        "Gizmo",
        "yes",
        {
          "status": "unknown",
          "note": "Not published"
        },
        "unknown"
      ]
    ]
  }
}

Every HTTP status code, ten at a time

Sixty-three registered codes would make a wall. options.pageSize: 10 turns it into pages with an honest counter — search or the chips narrow the rows first, then the pages follow, and Show all lays the whole list out for anyone who wants it. Cacheable by default is RFC 9110's own list.

Open in maker with this data

View the spec 
{
  "type": "table",
  "theme": "editorial",
  "title": "HTTP status codes",
  "source": "IANA HTTP Status Code Registry; cacheable by default as listed in 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": "Meaning"
      },
      {
        "name": "Cacheable by default",
        "kind": "status"
      }
    ],
    "rows": [
      [
        "100",
        "Continue",
        "no"
      ],
      [
        "101",
        "Switching Protocols",
        "no"
      ],
      [
        "102",
        "Processing",
        "no"
      ],
      [
        "103",
        "Early Hints",
        "no"
      ],
      [
        "200",
        "OK",
        "yes"
      ],
      [
        "201",
        "Created",
        "no"
      ],
      [
        "202",
        "Accepted",
        "no"
      ],
      [
        "203",
        "Non-Authoritative Information",
        "yes"
      ],
      [
        "204",
        "No Content",
        "yes"
      ],
      [
        "205",
        "Reset Content",
        "no"
      ],
      [
        "206",
        "Partial Content",
        "yes"
      ],
      [
        "207",
        "Multi-Status",
        "no"
      ],
      [
        "208",
        "Already Reported",
        "no"
      ],
      [
        "226",
        "IM Used",
        "no"
      ],
      [
        "300",
        "Multiple Choices",
        "yes"
      ],
      [
        "301",
        "Moved Permanently",
        "yes"
      ],
      [
        "302",
        "Found",
        "no"
      ],
      [
        "303",
        "See Other",
        "no"
      ],
      [
        "304",
        "Not Modified",
        "no"
      ],
      [
        "305",
        "Use Proxy",
        "no"
      ],
      [
        "306",
        "(Unused)",
        "no"
      ],
      [
        "307",
        "Temporary Redirect",
        "no"
      ],
      [
        "308",
        "Permanent Redirect",
        "yes"
      ],
      [
        "400",
        "Bad Request",
        "no"
      ],
      [
        "401",
        "Unauthorized",
        "no"
      ],
      [
        "402",
        "Payment Required",
        "no"
      ],
      [
        "403",
        "Forbidden",
        "no"
      ],
      [
        "404",
        "Not Found",
        "yes"
      ],
      [
        "405",
        "Method Not Allowed",
        "yes"
      ],
      [
        "406",
        "Not Acceptable",
        "no"
      ],
      [
        "407",
        "Proxy Authentication Required",
        "no"
      ],
      [
        "408",
        "Request Timeout",
        "no"
      ],
      [
        "409",
        "Conflict",
        "no"
      ],
      [
        "410",
        "Gone",
        "yes"
      ],
      [
        "411",
        "Length Required",
        "no"
      ],
      [
        "412",
        "Precondition Failed",
        "no"
      ],
      [
        "413",
        "Content Too Large",
        "no"
      ],
      [
        "414",
        "URI Too Long",
        "yes"
      ],
      [
        "415",
        "Unsupported Media Type",
        "no"
      ],
      [
        "416",
        "Range Not Satisfiable",
        "no"
      ],
      [
        "417",
        "Expectation Failed",
        "no"
      ],
      [
        "418",
        "(Unused)",
        "no"
      ],
      [
        "421",
        "Misdirected Request",
        "no"
      ],
      [
        "422",
        "Unprocessable Content",
        "no"
      ],
      [
        "423",
        "Locked",
        "no"
      ],
      [
        "424",
        "Failed Dependency",
        "no"
      ],
      [
        "425",
        "Too Early",
        "no"
      ],
      [
        "426",
        "Upgrade Required",
        "no"
      ],
      [
        "428",
        "Precondition Required",
        "no"
      ],
      [
        "429",
        "Too Many Requests",
        "no"
      ],
      [
        "431",
        "Request Header Fields Too Large",
        "no"
      ],
      [
        "451",
        "Unavailable For Legal Reasons",
        "no"
      ],
      [
        "500",
        "Internal Server Error",
        "no"
      ],
      [
        "501",
        "Not Implemented",
        "yes"
      ],
      [
        "502",
        "Bad Gateway",
        "no"
      ],
      [
        "503",
        "Service Unavailable",
        "no"
      ],
      [
        "504",
        "Gateway Timeout",
        "no"
      ],
      [
        "505",
        "HTTP Version Not Supported",
        "no"
      ],
      [
        "506",
        "Variant Also Negotiates",
        "no"
      ],
      [
        "507",
        "Insufficient Storage",
        "no"
      ],
      [
        "508",
        "Loop Detected",
        "no"
      ],
      [
        "510",
        "Not Extended (obsoleted)",
        "no"
      ],
      [
        "511",
        "Network Authentication Required",
        "no"
      ]
    ]
  }
}
Open this table in a maker Table maker from scratch

Questions people ask

What is a live table?

A real HTML table — search engines and screen readers read it as one — that also behaves: headers sort, status chips filter, numbers carry a mini-bar, notes expand on click, and on a phone it scrolls sideways with the first column pinned (one card per row is an option). Nothing is drawn as a picture, so the text stays text.

How is it different from a status matrix or a lollipop chart?

Those are charts of one aspect of a table — statuses, or one numeric column. The live table keeps the whole row together, and its “Chart” button hands any column with numbers in it — a numeric one, or status chips that carry a count — to the same engine as a lollipop when a picture reads better.

Is this a comparison table?

Yes — it’s built for exactly that job. A comparison table template usually freezes into a screenshot the moment it leaves the design tool; this one stays HTML wherever you embed it, so it keeps sorting, filtering and reading aloud to screen readers.