JSON to テーブル変換

JSONデータをHTMLテーブルに変換

JSON入力

オプション

行番号を表示

テーブルスタイル

シンプルストライプ罫線あり

プレビュー

id	name	email	age	active
1	山田太郎	yamada@example.com	28	true
2	佐藤花子	sato@example.com	32	false
3	鈴木一郎	suzuki@example.com	25	true

HTML コード

<table style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr style="background-color: #f2f2f2;">
      <th style="text-align: left; padding: 8px;">id</th>
      <th style="text-align: left; padding: 8px;">name</th>
      <th style="text-align: left; padding: 8px;">email</th>
      <th style="text-align: left; padding: 8px;">age</th>
      <th style="text-align: left; padding: 8px;">active</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 8px;">1</td>
      <td style="padding: 8px;">山田太郎</td>
      <td style="padding: 8px;">yamada@example.com</td>
      <td style="padding: 8px;">28</td>
      <td style="padding: 8px;">true</td>
    </tr>
    <tr style="background-color: #f9f9f9;">
      <td style="padding: 8px;">2</td>
      <td style="padding: 8px;">佐藤花子</td>
      <td style="padding: 8px;">sato@example.com</td>
      <td style="padding: 8px;">32</td>
      <td style="padding: 8px;">false</td>
    </tr>
    <tr>
      <td style="padding: 8px;">3</td>
      <td style="padding: 8px;">鈴木一郎</td>
      <td style="padding: 8px;">suzuki@example.com</td>
      <td style="padding: 8px;">25</td>
      <td style="padding: 8px;">true</td>
    </tr>
  </tbody>
</table>

使い方

• JSON配列を入力（オブジェクトの配列形式）
• リアルタイムでテーブルプレビューを表示
• スタイルと行番号のオプションを選択
• 生成されたHTMLコードをコピーして使用

入力例:

[
  { "name": "商品A", "price": 1000, "stock": 50 },
  { "name": "商品B", "price": 2000, "stock": 30 }
]