HTML-tabel til JSON/CSV-konverter

For at konvertere en HTML-tabel til JSON bliver overskriftsrækkens celler til dine objektnøgler, og hver følgende <tr> bliver til ét objekt — den omvendte konvertering opbygger en <thead>/<tbody>-tabel ud fra samme struktur. Dette værktøj foretager konverteringen udelukkende i din browser med den indbyggede DOMParser, uden at data nogensinde uploades nogen steder.

Hvad er dette værktøj?

Hjemmesider præsenterer ofte data inde i et HTML-element <table> — en prisside, en statistikside, et skrabet opslag — men den markup er ikke direkte brugbar i kode eller et regneark. Dette værktøj fortolker den indsatte <table>-markup, læser overskriftsrækken (fra <thead>/<th>, eller den første <tr>, hvis der ikke er nogen <thead>), tilknytter hver følgende rækkes celler til de overskrifter, og udskriver et JSON-array af objekter eller en CSV-fil.

Det virker også den anden vej: indsæt et JSON-array af objekter eller CSV-tekst, og værktøjet genererer en korrekt struktureret HTML-tabel med en <thead> til kolonneoverskrifterne og en <tbody> til datarækkerne, klar til at indsætte i en hjemmeside eller et CMS.

Alt kører med browserens indbyggede DOMParser — ingen HTML sendes til en server, så det er trygt at bruge med indsat indhold, der indeholder interne eller følsomme data.

Kilde: tabelstrukturen følger WHATWG HTML Living Standard's definition af table-elementet.

Hvorfor bruge det?

Tovejs-konvertering — HTML-tabel til JSON, HTML-tabel til CSV, og JSON/CSV tilbage til ren HTML-tabelmarkup.
Automatisk overskriftsgenkendelse — fungerer med <thead>/<th>-markup eller en almindelig første <tr>, der bruges som overskriftsrække.
Ingen kopiering ind i et regneark først — gå direkte fra tabelmarkup til strukturerede data.
Genererer korrekt escaped HTML-output, så specialtegn som < og & i dine data ikke ødelægger tabellen.
100% klientside — den HTML, du indsætter (som kan komme fra en intern side eller et administrationspanel), forlader aldrig din browser.

Sådan bruger du det

For at konvertere en HTML-tabel: indsæt <table>...</table>-markuppen i den første boks, og klik derefter på "Konvertér til JSON" eller "Konvertér til CSV".
Gennemgå outputtet, kopiér det derefter eller klik på download-linket for at gemme filen.
For at generere en HTML-tabel: indsæt et JSON-array eller CSV-tekst i den anden boks.
Klik på "Konvertér til HTML-tabel", og kopiér den genererede markup ind i din side eller dit CMS.

Eksempel

Input

<table><tr><th>navn</th><th>alder</th></tr><tr><td>Alice</td><td>30</td></tr></table>

Output

[{"navn":"Alice","alder":"30"}]

Den første rækkes celler bliver til objektnøglerne; hver følgende række bliver til ét array-element med værdier taget som tekst.

Praktiske tips

Udtrækning af data fra en tabel på en hjemmeside: vis sidens kilde eller inspicér elementet, kopiér <table>...</table>-markuppen, og indsæt den her i stedet for at genindtaste dataene manuelt.
Publicering af et API-svar som en læsbar tabel på en side eller i et CMS: indsæt JSON-arrayet i den anden boks, og kopiér den genererede HTML direkte ind i din sides rich-text- eller HTML-blok.
Bruger en tabel <div> eller CSS-grid-layout i stedet for rigtig <table>-markup, kan dette værktøj ikke fortolke den — kildesiden skal bruge egentlige HTML-tabeltags.

Hvorfor overskriftsgenkendelse betyder noget

En tabel uden en tydelig overskriftsrække er tvetydig — hvert efterfølgende værktøj skal vide, hvilken række der definerer kolonnenavnene, før det kan omdanne de resterende rækker til strukturerede poster. Dette værktøj løser den tvetydighed på samme måde som browsere og de fleste scrapere gør: det leder først efter et eksplicit <thead>-afsnit og falder først tilbage til at behandle den første synlige række som overskriften, når der ikke er nogen <thead> til stede. Det holder konverteringen forudsigelig, selv for håndskrevet eller skrabet tabelmarkup, der springer de mere semantiske tags over.

Ofte stillede spørgsmål

Virker det med tabeller, der ikke bruger <thead>?

Ja. Er der ingen <thead>, falder værktøjet tilbage til at behandle den allerførste <tr> i tabellen som overskriftsrækken.

Hvad hvis en række har færre celler end overskriftsrækken?

Manglende celler i den række efterlades som tomme strenge i JSON-outputtet eller tomme i CSV'en, så rækkestrukturen forbliver intakt i stedet for at forårsage en fejl.

Bevares indlejrede tags inde i en celle, som <b> eller <a>?

Nej — kun det synlige tekstindhold i hver celle udtrækkes. Inline-formatering, links og andet indlejret markup inde i en celle fjernes, og kun ren tekst forbliver.

Bliver den indsatte HTML sendt nogen steder hen?

Nej. Fortolkning sker med browserens indbyggede DOMParser, udelukkende på din enhed — intet uploades til en server.

Kan jeg konvertere et JSON-array frem og tilbage gennem dette værktøj til en HTML-tabel?

Ja — indsæt JSON-arrayet (eller CSV'en) i den anden boks, og klik på "Konvertér til HTML-tabel" for at få gyldig, korrekt escaped <table>-markup tilbage med de samme nøgler som kolonneoverskrifter.