Converting JSON Arrays to HTML Tables
This tool takes a JSON array of objects and generates a properly structured HTML <table> with a <thead> row built from the union of all keys across all objects, and <tbody> rows for each array item. Missing keys in a particular row are rendered as empty cells.
The flatten option converts nested objects into dot-notation column headers (e.g. address.city, address.zip), making deeply nested JSON structures viewable as a flat table. This is especially useful for data analysis or when preparing JSON data for display in a CMS or spreadsheet.
Bootstrap and Tailwind Classes
The Bootstrap option adds table table-striped table-hover table-bordered classes, which produce a styled table when Bootstrap CSS is loaded on the target page. The Tailwind option adds utility classes for borders, spacing, and hover effects. The plain option generates a bare table without any classes, suitable for applying your own CSS.
Handling Non-Array Input
If your JSON is a single object rather than an array, wrap it in square brackets: [{"key": "value"}]. The tool requires an array as the root element because tables are inherently multi-row structures โ a single object would produce a one-row table, which may still be valid for your use case.