HTMLテーブル⇔JSON/CSV変換ツール

このツールとは？

ウェブページでは料金表や統計ページ、スクレイピングした一覧など、データがHTMLの<table>要素の中に表示されることがよくありますが、そのコードはそのままではプログラムや表計算ソフトで使えません。このツールは貼り付けられた<table>コードを解析し、見出し行（<thead>/<th>から、<thead>がなければ最初の<tr>から）を読み取り、以降の各行のセルをその見出しに対応付けて、JSONオブジェクトの配列またはCSVファイルを出力します。

逆方向にも対応しています。JSONオブジェクトの配列やCSVテキストを貼り付けると、列見出し用の<thead>とデータ行用の<tbody>を備えた、きちんと構造化されたHTMLテーブルが生成され、ウェブページやCMSにそのまま貼り付けられます。

すべてブラウザ内蔵のDOMParserで処理されます——HTMLがサーバーに送信されることはないため、社内データや機密データを含む貼り付けコンテンツにも安心して使用できます。

出典：テーブルの構造はWHATWG HTML Living Standardのtable要素の定義に準拠しています。

なぜこれを使うのか？

• 双方向変換——HTMLテーブル→JSON、HTMLテーブル→CSV、そしてJSON/CSV→きれいなHTMLテーブルコード。
• 自動見出し検出——<thead>/<th>のマークアップにも、<thead>のないシンプルな最初の<tr>を見出し行として使う構造にも対応。
• 先に表計算ソフトへ貼り付ける必要なし——テーブルコードから構造化データへ直接変換。
• 正しくエスケープされたHTML出力を生成するため、データ中の<や&などの特殊文字がテーブルを壊しません。
• 100%クライアント側処理——貼り付けたHTML（社内ページや管理画面由来のこともあります）がブラウザの外に出ることはありません。

使い方

1. HTMLテーブルを変換する：<table>...</table>のコードを最初の入力欄に貼り付け、「JSONに変換」または「CSVに変換」をクリックします。
2. 出力結果を確認し、コピーするかダウンロードリンクをクリックしてファイルを保存します。
3. HTMLテーブルを生成する：JSON配列またはCSVテキストを2番目の入力欄に貼り付けます。
4. 「HTMLテーブルに変換」をクリックし、生成されたコードをページやCMSにコピーします。

例

入力

<table><tr><th>name</th><th>age</th></tr><tr><td>Alice</td><td>30</td></tr></table>

出力

[{"name":"Alice","age":"30"}]

1行目のセルがオブジェクトのキーになり、以降の各行がテキストとして読み取られた値を持つ配列の1要素になります。

実用的なヒント

• ウェブページ上のテーブルからデータを抽出する：ページのソースを表示するか要素を検証し、<table>...</table>のコードをコピーして、手動でデータを打ち直す代わりにここに貼り付けます。
• APIレスポンスをサイトやCMS上の読みやすい表として公開する：JSON配列を2番目の入力欄に貼り付け、生成されたHTMLをページのリッチテキストブロックやHTMLブロックに直接コピーします。
• テーブルが本物の<table>タグではなく<div>やCSSグリッドレイアウトで作られている場合、このツールでは解析できません——元のページで実際のHTMLテーブルタグを使っている必要があります。

見出し行の検出が重要な理由

明確な見出し行のないテーブルは曖昧です——後続のどのツールも、残りの行を構造化されたレコードに変換する前に、どの行が列名を定義しているかを知る必要があります。このツールは、ブラウザやほとんどのスクレイパーと同じ方法でこの曖昧さを解消します。まず明示的な<thead>セクションを探し、<thead>が存在しない場合にのみ、最初の可視行を見出しとして扱います。これにより、よりセマンティックなタグを省略した手書きやスクレイピングされたテーブルコードに対しても、変換結果が予測可能になります。

よくある質問