# JSON to HTML Table

Render a JSON array or object as a clean HTML table or Markdown table with nested-value controls.

## Run it

- **CLI:** `gizza tool json-to-html-table '[{"id":1,"name":"Ada"},{"id":2,"name":"Linus"}]'`
- **Web:** https://gizza.ai/tools/json-to-html-table/
- **Agents:** machine-readable descriptor (parameters JSON Schema) at https://gizza.ai/tools/json-to-html-table/tool.json

## Inputs

- `json` — JSON _(field)_
- `format` — Output format _(field)_
- `nested` — Nested values _(field)_
- `header` — First array row is header _(field)_
- `null_text` — Null / missing text _(field)_
- `caption` — HTML caption _(field)_
- `table_class` — HTML table class _(field)_
- `pretty` — Pretty-print HTML _(field)_

## Output

- Table (text)

## Query parameters

Open the tool pre-filled and auto-run via URL:

- `json` — JSON
- `format` — Output format
- `nested` — Nested values
- `header` — First array row is header
- `null_text` — Null / missing text
- `caption` — HTML caption
- `table_class` — HTML table class
- `pretty` — Pretty-print HTML

Example: `https://gizza.ai/tools/json-to-html-table/?json=%5B%7B%22id%22%3A1%2C%22name%22%3A%22Ada%22%7D%2C%7B%22id%22%3A2%2C%22name%22%3A%22Linus%22%7D%5D&format=html&nested=json&header=true&null_text=e.g.%20%E2%80%94&caption=Quarterly%20users&table_class=table%20table-striped&pretty=true`

---

## About this tool

**JSON to HTML Table** turns a pasted JSON array or object into a clean table you
can drop into docs, CMS fields, tickets, or Markdown notes. It accepts the shapes
you usually get from APIs: arrays of objects, arrays of arrays, arrays of scalar
values, or a single object.

- **HTML or Markdown:** choose a semantic `<table>` with `<thead>`/`<tbody>` or a
  GitHub-style Markdown pipe table.
- **Object rows:** an array of objects becomes one row per object, with the union
  of every key as the columns. Missing keys and JSON `null` use your null text.
- **Array rows:** arrays of arrays can treat the first row as the header, or turn
  the header toggle off to generate `Column 1`, `Column 2`, … labels.
- **Nested values:** keep nested objects/arrays as compact JSON, render nested HTML
  tables, or flatten nested objects into dotted columns like `user.id`.
- **HTML finishing:** add an optional `<caption>`, CSS class names, and choose
  pretty indented HTML or compact single-line HTML.

### Worked example

Input JSON:

```json
[{"id":1,"name":"Ada"},{"id":2,"name":"Linus"}]
```

HTML output:

```html
<table>
  <thead>
    <tr><th>id</th><th>name</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>Ada</td></tr>
    <tr><td>2</td><td>Linus</td></tr>
  </tbody>
</table>
```

### Privacy

Everything runs locally in your browser via WebAssembly; pasted JSON is never
uploaded. The same formatter is available from the gizza CLI and in chat.

### Limits and edge cases

Top-level JSON must be an array or object. Empty arrays/objects and scalar-only
JSON documents are rejected because there is no table shape to infer. Markdown
cannot contain nested Markdown tables, so the **Nested HTML tables** option falls
back to compact JSON when Markdown output is selected.

## FAQ

<details>
<summary>What JSON shapes can I paste?</summary>

Paste an array of objects, an array of arrays, an array of scalar values, or a
single object. Arrays of objects become row tables, arrays of arrays use either
the first row as the header or generated `Column N` headers, scalar arrays become
a single-column table, and a single object becomes a two-column key/value table.

</details>

<details>
<summary>How are different object keys handled?</summary>

For an array of objects, columns are the union of every key in first-seen order.
If one row is missing a key that another row has, the missing cell renders as the
null / missing text you provide (empty by default).

</details>

<details>
<summary>What should I choose for nested objects or arrays?</summary>

Use **Compact JSON in cells** for a safe default that works in both HTML and
Markdown. Use **Nested HTML tables** when you want nested `<table>` elements in
HTML output. Use **Flatten object keys** when nested objects should become columns
such as `user.id` and `user.name`; arrays still stay as compact JSON strings.

</details>

<details>
<summary>Can I style the generated HTML table?</summary>

Yes. Add a class list such as `table table-striped` in the HTML table class field,
and optionally add a caption. The tool only writes the table markup; your site or
document provides the CSS that styles those classes.

</details>

## Related tools

- [Query Result Formatter](https://gizza.ai/tools/query-result-formatter/): Turn raw query result rows — a JSON array, CSV, or TSV — into a clean, aligned Markdown or ASCII table for docs and chat.
- [DynamoDB JSON Converter](https://gizza.ai/tools/dynamodb-json-converter/): Convert between DynamoDB typed AttributeValue JSON and plain JSON in both directions, with auto-detect and pretty or compact output.
- [Elasticsearch Bulk Formatter](https://gizza.ai/tools/elasticsearch-bulk-formatter/): Build a compact Elasticsearch _bulk API body from a JSON array. Choose index/create/update/delete, _index, _id field, and doc_as_upsert locally.
- [Plist viewer](https://gizza.ai/tools/plist-viewer/): Parse XML plist or Base64 binary bplist data and render it as readable JSON or a plutil-style tree. Free, private, in-browser.
- [Podcast feed parser](https://gizza.ai/tools/podcast-feed-parser/): Parse a pasted podcast RSS/XML feed into clean JSON with episode titles, dates, durations, and audio enclosure URLs. Free, private, in-browser.