CodeKitHub
Alat JSON

Konverter Tabel HTML ke JSON/CSV

Terakhir diperbarui:

Untuk mengonversi tabel HTML ke JSON, sel-sel pada baris header menjadi kunci objek Anda dan setiap <tr> berikutnya menjadi satu objek — konversi sebaliknya membangun tabel <thead>/<tbody> dari struktur yang sama. Tempel markup tabel HTML dan dapatkan array objek JSON atau file CSV, atau tempel JSON/CSV dan dapatkan markup tabel HTML yang bersih — konversi berjalan sepenuhnya di browser Anda menggunakan DOMParser bawaan, tanpa data yang diunggah ke mana pun.


Apa Itu Alat Ini?

Halaman web sering menampilkan data di dalam elemen <table> HTML — halaman harga, halaman statistik, daftar hasil scraping — tetapi markup tersebut tidak bisa langsung digunakan dalam kode atau spreadsheet. Alat ini mengurai markup <table> yang ditempel, membaca baris header (dari <thead>/<th>, atau <tr> pertama jika tidak ada <thead>), memetakan sel setiap baris berikutnya ke header tersebut, dan menghasilkan array objek JSON atau file CSV.

Alat ini juga bekerja sebaliknya: tempel array objek JSON atau teks CSV, dan alat ini akan membuat tabel HTML yang terstruktur dengan benar, dengan <thead> untuk header kolom dan <tbody> untuk baris data, siap ditempel ke halaman web atau CMS.

Semuanya berjalan dengan DOMParser bawaan browser — tidak ada HTML yang dikirim ke server, sehingga aman digunakan dengan konten tempelan yang berisi data internal atau sensitif.

Sumber: struktur tabel mengikuti definisi elemen tabel WHATWG HTML Living Standard.

Mengapa Menggunakannya?

  • Konversi dua arah — tabel HTML ke JSON, tabel HTML ke CSV, dan JSON/CSV kembali ke markup tabel HTML yang bersih.
  • Deteksi header otomatis — bekerja dengan markup <thead>/<th> atau <tr> pertama biasa yang digunakan sebagai baris header.
  • Tidak perlu menempel ke spreadsheet terlebih dahulu — langsung dari markup tabel ke data terstruktur.
  • Menghasilkan output HTML yang di-escape dengan benar, sehingga karakter khusus seperti < dan & dalam data Anda tidak merusak tabel.
  • 100% di sisi klien — HTML yang Anda tempel (yang mungkin berasal dari halaman internal atau panel admin) tidak pernah meninggalkan browser Anda.

Cara Menggunakan

  1. Untuk mengonversi tabel HTML: tempel markup <table>...</table> ke kotak pertama, lalu klik "Konversi ke JSON" atau "Konversi ke CSV".
  2. Tinjau hasilnya, salin atau klik tautan unduhan untuk menyimpan file.
  3. Untuk membuat tabel HTML: tempel array JSON atau teks CSV ke kotak kedua.
  4. Klik "Konversi ke tabel HTML" dan salin markup yang dihasilkan ke halaman atau CMS Anda.

Contoh

Input

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

Output

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

Sel pada baris pertama menjadi kunci objek; setiap baris berikutnya menjadi satu elemen array dengan nilai diambil sebagai teks.

Tips praktis

  • Mengekstrak data dari tabel di halaman web: lihat kode sumber halaman atau periksa elemen, salin markup <table>...</table>, dan tempel di sini alih-alih mengetik ulang data secara manual.
  • Mempublikasikan respons API sebagai tabel yang mudah dibaca di situs atau CMS: tempel array JSON ke kotak kedua dan salin HTML yang dihasilkan langsung ke blok teks kaya atau HTML halaman Anda.
  • Jika tabel menggunakan <div> atau tata letak grid CSS alih-alih tag <table> asli, alat ini tidak dapat menguraikannya — halaman sumber perlu menggunakan tag tabel HTML yang sebenarnya.

Mengapa deteksi header penting

Tabel tanpa baris header yang jelas bersifat ambigu — alat apa pun setelahnya perlu tahu baris mana yang mendefinisikan nama kolom sebelum bisa mengubah baris lainnya menjadi rekaman terstruktur. Alat ini menyelesaikan ambiguitas tersebut dengan cara yang sama seperti browser dan kebanyakan scraper: mencari bagian <thead> eksplisit terlebih dahulu, dan hanya beralih memperlakukan baris pertama yang terlihat sebagai header ketika tidak ada <thead>. Ini menjaga konversi tetap dapat diprediksi bahkan untuk markup tabel yang ditulis tangan atau hasil scraping yang melewatkan tag yang lebih semantik.

Pertanyaan yang Sering Diajukan

Apakah ini bekerja dengan tabel yang tidak menggunakan <thead>?

Ya. Jika tidak ada <thead>, alat ini memperlakukan <tr> pertama dalam tabel sebagai baris header.

Bagaimana jika sebuah baris memiliki sel lebih sedikit dari baris header?

Sel yang hilang pada baris tersebut dibiarkan sebagai string kosong di output JSON atau kosong di CSV, sehingga struktur baris tetap utuh alih-alih menyebabkan error.

Apakah tag bersarang di dalam sel, seperti <b> atau <a>, dipertahankan?

Tidak — hanya konten teks yang terlihat dari setiap sel yang diekstrak. Pemformatan inline, tautan, dan markup bersarang lainnya di dalam sel dihapus, hanya menyisakan teks biasa.

Apakah HTML yang saya tempel dikirim ke suatu tempat?

Tidak. Penguraian dilakukan dengan DOMParser bawaan browser, sepenuhnya di perangkat Anda — tidak ada yang diunggah ke server.

Bisakah saya mengonversi array JSON kembali menjadi tabel HTML dengan alat yang sama?

Bisa — tempel array JSON (atau CSV) ke kotak kedua dan klik "Konversi ke tabel HTML" untuk mendapatkan markup <table> yang valid dan di-escape dengan benar, dengan kunci yang sama sebagai header kolom.

Alat Terkait