HTML-tabell til JSON/CSV-konverter

For å konvertere en HTML-tabell til JSON blir cellene i overskriftsraden til objektnøklene dine, og hver følgende <tr> blir ett objekt — den motsatte konverteringen bygger en <thead>/<tbody>-tabell fra samme struktur. Dette verktøyet gjør konverteringen helt i nettleseren din med den innebygde DOMParser-en, uten at data noensinne lastes opp noe sted.

Hva er dette verktøyet?

Nettsider presenterer ofte data inne i et HTML <table>-element — en prisside, en statistikkside, en skrapet oversikt — men den markupen er ikke direkte brukbar i kode eller et regneark. Dette verktøyet tolker den innlimte <table>-markupen, leser overskriftsraden (fra <thead>/<th>, eller den første <tr> hvis det ikke finnes noen <thead>), kartlegger hver følgende rads celler mot de overskriftene, og gir ut et JSON-array med objekter eller en CSV-fil.

Det fungerer også motsatt vei: lim inn et JSON-array med objekter eller CSV-tekst, og verktøyet genererer en ordentlig strukturert HTML-tabell med en <thead> for kolonneoverskriftene og en <tbody> for dataradene, klar til å limes inn på en nettside eller i et CMS.

Alt kjører med nettleserens innebygde DOMParser — ingen HTML sendes til en server, så det er trygt å bruke med innlimt innhold som inneholder interne eller sensitive data.

Kilde: tabellstrukturen følger WHATWG HTML Living Standard sin definisjon av table-elementet.

Hvorfor bruke det?

Toveis konvertering — HTML-tabell til JSON, HTML-tabell til CSV, og JSON/CSV tilbake til ren HTML-tabellmarkup.
Automatisk overskriftsdeteksjon — fungerer med <thead>/<th>-markup eller en vanlig første <tr> brukt som overskriftsrad.
Ingen behov for å lime inn i et regneark først — gå direkte fra tabellmarkup til strukturert data.
Genererer ordentlig escapet HTML-output, slik at spesialtegn som < og & i dataene dine ikke ødelegger tabellen.
100 % klientside — HTML-en du limer inn (som kan komme fra en intern side eller et administrasjonspanel) forlater aldri nettleseren din.

Slik bruker du det

For å konvertere en HTML-tabell: lim inn <table>...</table>-markupen i den første boksen, klikk deretter «Konverter til JSON» eller «Konverter til CSV».
Se gjennom resultatet, kopier det eller klikk på nedlastingslenken for å lagre filen.
For å generere en HTML-tabell: lim inn et JSON-array eller CSV-tekst i den andre boksen.
Klikk «Konverter til HTML-tabell» og kopier den genererte markupen inn på siden din eller i CMS-et.

Eksempel

Inndata

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

Resultat

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

Den første radens celler blir til objektnøklene; hver følgende rad blir ett array-element med verdier hentet som tekst.

Praktiske tips

Hente ut data fra en tabell på en nettside: vis sidekilden eller inspiser elementet, kopier <table>...</table>-markupen, og lim den inn her i stedet for å skrive dataene inn manuelt på nytt.
Publisere et API-svar som en lesbar tabell på et nettsted eller i et CMS: lim JSON-arrayet inn i den andre boksen og kopier den genererte HTML-en direkte inn i rikteksten eller HTML-blokken på siden din.
Hvis en tabell bruker <div> eller CSS grid-layout i stedet for ekte <table>-markup, kan ikke dette verktøyet tolke den — kildesiden må bruke faktiske HTML-tabelltagger.

Hvorfor overskriftsdeteksjon er viktig

En tabell uten en tydelig overskriftsrad er tvetydig — ethvert verktøy nedstrøms trenger å vite hvilken rad som definerer kolonnenavnene før det kan gjøre de gjenværende radene om til strukturerte poster. Dette verktøyet løser den tvetydigheten på samme måte som nettlesere og de fleste skrapere gjør: det ser etter en eksplisitt <thead>-seksjon først, og faller bare tilbake på å behandle den første synlige raden som overskrift når det ikke finnes noen <thead>. Det holder konverteringen forutsigbar selv for håndskrevet eller skrapet tabellmarkup som hopper over de mer semantiske taggene.

Ofte stilte spørsmål

Fungerer det med tabeller som ikke bruker <thead>?

Ja. Hvis det ikke finnes noen <thead>, faller verktøyet tilbake på å behandle den aller første <tr> i tabellen som overskriftsraden.

Hva om en rad har færre celler enn overskriftsraden?

Manglende celler for den raden blir stående som tomme strenger i JSON-outputen eller tomme i CSV-en, slik at radstrukturen forblir intakt i stedet for å forårsake en feil.

Bevares nøstede tagger inne i en celle, som <b> eller <a>?

Nei — bare det synlige tekstinnholdet i hver celle hentes ut. Inline-formatering, lenker og annen nøstet markup inne i en celle fjernes, og bare ren tekst blir igjen.

Sendes den innlimte HTML-en noe sted?

Nei. Parsing skjer med nettleserens innebygde DOMParser, helt på enheten din — ingenting lastes opp til en server.

Kan jeg rundtripp et JSON-array gjennom dette verktøyet tilbake til en HTML-tabell?

Ja — lim inn JSON-arrayet (eller CSV-en) i den andre boksen og klikk «Konverter til HTML-tabell» for å få tilbake gyldig, ordentlig escapet <table>-markup med de samme nøklene som kolonneoverskrifter.