CodeKitHub
JSON-verktyg

HTML-tabell till JSON/CSV-omvandlare

Senast uppdaterad:

För att konvertera en HTML-tabell till JSON blir rubrikradens celler dina objektnycklar och varje efterföljande <tr> blir ett objekt — den omvända konverteringen bygger en <thead>/<tbody>-tabell från samma struktur. Det här verktyget gör konverteringen helt i din webbläsare med den inbyggda DOMParser, utan att någon data någonsin laddas upp.


Vad är detta verktyg?

Webbsidor presenterar ofta data inuti ett HTML-<table>-element — en prissida, en statistiksida, en skrapad lista — men den markupen är inte direkt användbar i kod eller ett kalkylblad. Det här verktyget tolkar den inklistrade <table>-markupen, läser rubrikraden (från <thead>/<th>, eller den första <tr> om det inte finns någon <thead>), mappar varje efterföljande rads celler till dessa rubriker, och genererar en JSON-array av objekt eller en CSV-fil.

Det fungerar också åt andra hållet: klistra in en JSON-array av objekt eller CSV-text, så genererar verktyget en korrekt strukturerad HTML-tabell med en <thead> för kolumnrubrikerna och en <tbody> för dataraderna, redo att klistras in på en webbsida eller i ett CMS.

Allt körs med webbläsarens inbyggda DOMParser — ingen HTML skickas till en server, så det är säkert att använda med inklistrat innehåll som innehåller intern eller känslig data.

Källa: tabellstrukturen följer WHATWG HTML Living Standards definition av table-elementet.

Varför använda det?

  • Tvåvägskonvertering — HTML-tabell till JSON, HTML-tabell till CSV, och JSON/CSV tillbaka till ren HTML-tabellmarkup.
  • Automatisk rubrikdetektering — fungerar med <thead>/<th>-markup eller en vanlig första <tr> som används som rubrikrad.
  • Ingen kopiering till ett kalkylblad först — gå direkt från tabellmarkup till strukturerad data.
  • Genererar korrekt escapad HTML-utdata, så specialtecken som < och & i din data inte förstör tabellen.
  • 100 % klientsidan — HTML:n du klistrar in (som kan komma från en intern sida eller adminpanel) lämnar aldrig din webbläsare.

Så använder du det

  1. För att konvertera en HTML-tabell: klistra in <table>...</table>-markupen i den första rutan, klicka sedan på "Konvertera till JSON" eller "Konvertera till CSV".
  2. Granska utdata, kopiera den sedan eller klicka på nedladdningslänken för att spara filen.
  3. För att generera en HTML-tabell: klistra in en JSON-array eller CSV-text i den andra rutan.
  4. Klicka på "Konvertera till HTML-tabell" och kopiera den genererade markupen till din sida eller ditt CMS.

Exempel

Inmatning

<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örsta radens celler blir objektnycklarna; varje efterföljande rad blir ett array-element med värden hämtade som text.

Praktiska tips

  • Extrahera data från en tabell på en webbsida: visa sidkällan eller inspektera elementet, kopiera <table>...</table>-markupen, och klistra in den här istället för att skriva av datan manuellt.
  • Publicera ett API-svar som en läsbar tabell på en sajt eller i ett CMS: klistra in JSON-arrayen i den andra rutan och kopiera den genererade HTML:n direkt till sidans rich text- eller HTML-block.
  • Om en tabell använder <div> eller CSS grid-layout istället för riktig <table>-markup kan det här verktyget inte tolka den — källsidan behöver använda faktiska HTML-tabelltaggar.

Varför rubrikdetektering spelar roll

En tabell utan en tydlig rubrikrad är tvetydig — varje efterföljande verktyg behöver veta vilken rad som definierar kolumnnamnen innan det kan göra om de återstående raderna till strukturerade poster. Det här verktyget löser den tvetydigheten på samma sätt som webbläsare och de flesta skrapare gör: det letar efter en uttrycklig <thead>-sektion först, och faller bara tillbaka på att behandla den första synliga raden som rubrik när ingen <thead> finns. Det gör konverteringen förutsägbar även för handskriven eller skrapad tabellmarkup som hoppar över de mer semantiska taggarna.

Vanliga frågor

Fungerar det med tabeller som inte använder <thead>?

Ja. Om det inte finns någon <thead>, faller verktyget tillbaka på att behandla den allra första <tr> i tabellen som rubrikraden.

Vad händer om en rad har färre celler än rubrikraden?

Saknade celler för den raden lämnas som tomma strängar i JSON-utdatan eller tomma i CSV:n, så radstrukturen förblir intakt istället för att orsaka ett fel.

Bevaras nästlade taggar inuti en cell, som <b> eller <a>?

Nej — endast den synliga textinnehållet i varje cell extraheras. Infogad formatering, länkar och annan nästlad markup inuti en cell tas bort, och bara vanlig text återstår.

Skickas den inklistrade HTML:n någonstans?

Nej. Tolkningen sker med webbläsarens inbyggda DOMParser, helt på din enhet — ingenting laddas upp till en server.

Kan jag konvertera en JSON-array tur och retur genom det här verktyget tillbaka till en HTML-tabell?

Ja — klistra in JSON-arrayen (eller CSV:n) i den andra rutan och klicka på "Konvertera till HTML-tabell" för att få tillbaka giltig, korrekt escapad <table>-markup med samma nycklar som kolumnrubriker.

Relaterade verktyg