JSON → HTML 表
JSON を HTML テーブルとして表示
JSON入力
HTML出力
Render JSON arrays as ready-to-paste HTML tables
Sometimes the right way to share JSON data is a table on a web page or in a doc — not a CSV download or a JSON snippet. Converting an array of objects into HTML produces semantic markup with thead and tbody so you can drop it into a blog post, internal wiki, email, or admin panel without hand-writing rows.
Use the converter when you need to
Embed data in a blog post or wiki
Take a sample API response or query result and turn it into a formatted table in a CMS or doc.
Build an admin or report page
Drop the markup into an internal tool to display a list of records without a frontend framework.
Send data in an HTML email
Render the table as inline-styleable markup that survives email clients better than a JSON snippet.
How to render JSON as a table
- 1
Paste a JSON array of objects into the editor.
- 2
Click Convert to generate semantic table markup with headers from the keys.
- 3
Copy the HTML and paste it into your page, doc, or email.
Keep going
Export as CSV instead
Pick CSV when the consumer is a spreadsheet rather than a web page.
Explore the source data
Inspect the JSON in tree view first to confirm the array shape is consistent.
Format the source
Clean up the input payload so the generated columns are predictable.
Convert to XML
Use XML for legacy systems that don't render HTML.
Common HTML table workflows
Generate the table once and paste it into your API docs or changelog post.
Email a table of records instead of attaching a CSV that no one wants to download.
Drop the generated markup into a static page to validate the data layout before building UI.
関連ツール
よくある質問
オブジェクトの配列（JSON array of objects）を貼り付けて Convert をクリックします。キーが列ヘッダーになり、各オブジェクトが 1 行として出力されます。生成される HTML には適切な <table> / <thead> / <tbody> が含まれます。
生成される HTML は標準的な table 要素のみで、インラインスタイルは付けていません。そのため、任意の CSS フレームワークや独自 CSS を適用できます。HTML をコピーして、Tailwind や Bootstrap 用の class を追加するなどして調整してください。
キーが揃ったフラットな「オブジェクト配列」が最もきれいに表になります。例: [{"name":"Alice","role":"Dev"},{"name":"Bob","role":"QA"}]。ネストしたオブジェクトは、セル内で JSON を文字列化した形で表示されます。
はい。ツールは生の HTML コードと、レンダリングされたテーブルのプレビューを並べて表示します。見た目を確認してからコピーできます。