HTML Table to JSON 変換ツール
HTML テーブルやページの断片を貼り付け、すべてのテーブルをブラウザ内で JSON と CSV に変換します。貼り付けたマークアップは端末上に留まります。
HTML Table to JSON 変換ツールは、貼り付けたマークアップをすべてブラウザ内で解析します。テーブルの HTML と生成された JSON や CSV は端末上に留まり、ArrayKit にアップロードされることはありません。
JSON Formatter を開く
HTML Table to JSON 変換 について
HTML Table to JSON 変換ツールは、貼り付けた任意の <table>（またはテーブルだらけのページ断片全体）を、クリーンな行オブジェクトの JSON 配列と対応する CSV に変換します。各ヘッダーセルがキーになるため、<td>Ada</td><td>Admin</td> のような行は { "Name": "Ada", "Role": "Admin" } と読み取られます。thead と tbody を理解し、th セルをヘッダーとして使い、テーブルにヘッダーがない場合は column_1, column_2 というラベルを合成し、colspan と rowspan を展開してすべての行を長方形のグリッドに揃えます。マークアップに複数のテーブルがある場合は、それらを切り替えて各結果を個別にコピーできます。レポートのスクレイピング、仕様書のコードへの移行、ドキュメントからのフィクスチャ初期化のために作られています。貼り付けた HTML は端末上で解析され、端末から離れることはありません。
機能
- 貼り付けた HTML 内のすべての <table> を抽出（最初の 1 つだけではない）
- ヘッダーセル（<th>）が JSON のキーになり、行はオブジェクトの配列になる
- thead と tbody を処理し、thead がなければ先頭行にフォールバック
- colspan をカバーする列ぶんセルを繰り返して展開
- rowspan のセルをまたぐ行へ引き継ぐ
- ヘッダー行のないテーブルには column_1, column_2 のキーを合成
- 各テーブルごとにコピーとダウンロードができるワンクリックの JSON と CSV 出力
- マークアップをブラウザ内で解析するため HTML が端末から離れない
HTML Table to JSON 変換 の使い方
- HTML の <table>、または 1 つ以上のテーブルを含むページ断片を貼り付けます
- フォーマット切り替えで JSON と CSV を切り替えます
- 複数のテーブルが見つかった場合は Table セレクターから 1 つを選びます
- 出力をコピーするか .json または .csv ファイルとしてダウンロードします
例
入力
<table><thead><tr><th>Name</th><th>Role</th></tr></thead><tbody><tr><td>Ada</td><td>Admin</td></tr><tr><td>Linus</td><td>Author</td></tr></tbody></table>
出力
[
{ "Name": "Ada", "Role": "Admin" },
{ "Name": "Linus", "Role": "Author" }
]
<th> セルがオブジェクトのキーになり、各 <tr> が 1 つの行オブジェクトになります。
よくあるエラーとトラブルシューティング
- 「No <table> found in the HTML.」と表示される。 — 貼り付けた断片に実際に <table> 要素が含まれていることを確認してください。<div> や CSS レイアウトで組まれたグリッドは HTML テーブルではなく、抽出できません。
- ヘッダーが実際の名前ではなく column_1, column_2 として表示される。 — テーブルに <thead> がなく、先頭行にも <th> がないためラベルが合成されています。<th> セルを持つヘッダー行を追加すると意味のあるキーが得られます。
- 結合されたセルが出力で複数の列や行にわたって繰り返される。 — これは想定どおりです。グリッドを長方形にするため colspan と rowspan が展開されます。またがった値はカバーしたすべてのセルにコピーされます。
- 2 つの列が同じヘッダーを共有し、一方のキーがもう一方を上書きする。 — 重複したヘッダーラベルは name, name_2 のように重複解消され、各列が上書きされずに個別の JSON キーを保ちます。
よくある質問
- この変換ツールはテーブルから JSON のキーをどう選びますか？
- ヘッダーセルを使います。<thead> の行、または <th> セルを含む先頭行がキーを供給します。以降の各行が 1 つのオブジェクトになり、その値は列の位置でヘッダーに揃えられます。
- colspan と rowspan のセルはどうなりますか？
- 密なグリッドに展開されます。colspan のセルはカバーするすべての列に繰り返され、rowspan のセルはまたぐ各行に引き継がれるため、すべての行オブジェクトが同じキーのセットを持ちます。
- ページの断片から複数のテーブルを抽出できますか？
- はい。断片全体を貼り付けると、すべての <table> がドキュメント順に抽出されます。Table セレクターで切り替え、各テーブルの JSON や CSV を個別にコピーできます。
- テーブルにヘッダー行がない場合は？
- <thead> がなく先頭行にも <th> がない場合、ツールは column_1, column_2 という名前のキーを合成し、先頭行を落とさずすべての行をデータとして扱います。
- JSON だけでなく CSV も出力しますか？
- はい。フォーマット切り替えを CSV にすると、カンマ・引用符・改行を含む値が正しく引用符処理された RFC-4180 のエクスポートが得られます。コピーするか .csv ファイルをダウンロードできます。
- 貼り付けた HTML はどこかにアップロードされますか？
- いいえ。マークアップは標準の DOM パーサーでブラウザ内で解析され、結果の JSON と CSV は端末上で構築されます。貼り付けたテーブルがサーバーに送信されることはありません。
関連ツール
すべての ArrayKit ツール