Konvertor HTML tabuľky na JSON/CSV

Čo je tento nástroj?

Webové stránky často zobrazujú dáta vo vnútri prvku HTML <table> — cenník, štatistická stránka, scrapnutý zoznam — no táto značka nie je priamo použiteľná v kóde alebo tabuľkovom procesore. Tento nástroj parsuje vloženú značku <table>, prečíta hlavičkový riadok (z <thead>/<th>, alebo prvý <tr>, ak nie je žiadny <thead>), namapuje bunky každého nasledujúceho riadku na tieto hlavičky a vygeneruje JSON pole objektov alebo CSV súbor.

Funguje to aj opačne: vložte JSON pole objektov alebo CSV text a nástroj vygeneruje správne štruktúrovanú HTML tabuľku s <thead> pre hlavičky stĺpcov a <tbody> pre riadky s dátami, pripravenú na vloženie do webovej stránky alebo CMS.

Všetko beží pomocou vstavaného DOMParser prehliadača — žiadny HTML sa neposiela na server, takže je bezpečné použiť ho aj s vloženým obsahom, ktorý obsahuje interné alebo citlivé dáta.

Zdroj: štruktúra tabuľky sa riadi definíciou prvku tabuľky podľa WHATWG HTML Living Standard.

Prečo ho používať?

• Obojsmerný prevod — HTML tabuľka na JSON, HTML tabuľka na CSV, a JSON/CSV späť na čistú značku HTML tabuľky.
• Automatická detekcia hlavičky — funguje so značkami <thead>/<th> alebo s obyčajným prvým <tr> použitým ako hlavičkový riadok.
• Žiadne kopírovanie do tabuľkového procesora ako medzikrok — prejdite priamo zo značky tabuľky na štruktúrované dáta.
• Generuje správne escapovaný HTML výstup, takže špeciálne znaky ako < a & vo vašich dátach nepokazia tabuľku.
• 100% na strane klienta — HTML, ktorý vložíte (ktorý môže pochádzať z internej stránky alebo admin panelu), nikdy neopustí váš prehliadač.

Ako sa používa

1. Na prevod HTML tabuľky: vložte značku <table>...</table> do prvého poľa, potom kliknite na "Convert to JSON" alebo "Convert to CSV".
2. Skontrolujte výstup, potom ho skopírujte alebo kliknite na odkaz na stiahnutie pre uloženie súboru.
3. Na vygenerovanie HTML tabuľky: vložte JSON pole alebo CSV text do druhého poľa.
4. Kliknite na "Convert to HTML table" a skopírujte vygenerovanú značku do vašej stránky alebo CMS.

Príklad

Vstup

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

Výstup

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

Bunky prvého riadku sa stanú kľúčmi objektu; každý nasledujúci riadok sa stane jedným prvkom poľa s hodnotami zobratými ako text.

Praktické tipy

• Extrahovanie dát z tabuľky na webovej stránke: pozrite si zdrojový kód stránky alebo inšpekciu prvku, skopírujte značku <table>...</table> a vložte ju sem namiesto ručného prepisovania dát.
• Publikovanie odpovede API ako čitateľnej tabuľky na stránke alebo v CMS: vložte JSON pole do druhého poľa a skopírujte vygenerovaný HTML priamo do bloku rich-textu alebo HTML na vašej stránke.
• Ak tabuľka používa <div> alebo CSS grid layout namiesto skutočnej značky <table>, tento nástroj ju nedokáže parsovať — zdrojová stránka musí používať skutočné značky HTML tabuľky.

Prečo záleží na detekcii hlavičky

Tabuľka bez jasného hlavičkového riadku je nejednoznačná — každý nadväzujúci nástroj potrebuje vedieť, ktorý riadok definuje názvy stĺpcov skôr, ako dokáže zmeniť zostávajúce riadky na štruktúrované záznamy. Tento nástroj rieši túto nejednoznačnosť rovnako ako prehliadače a väčšina scraperov: najprv hľadá explicitnú sekciu <thead> a až keď nie je prítomná, vráti sa k považovaniu prvého viditeľného riadku za hlavičku. Vďaka tomu zostáva prevod predvídateľný aj pri ručne písaných alebo scrapnutých značkách tabuľky, ktoré vynechávajú sémantickejšie značky.

Časté otázky