HTML Táblázat–JSON/CSV Átalakító

Mi ez az eszköz?

A weboldalak gyakran egy HTML <table> elemben jelenítik meg az adatokat — egy árlista, egy statisztikai oldal, egy lementett lista —, de ez a kód nem használható közvetlenül kódban vagy táblázatkezelőben. Ez az eszköz elemzi a beillesztett <table> kódot, beolvassa a fejléc sort (a <thead>/<th>-ból, vagy az első <tr>-ból, ha nincs <thead>), minden további sor celláit hozzárendeli ezekhez a fejlécekhez, és JSON objektumtömböt vagy CSV fájlt ad ki.

Fordítva is működik: illessz be egy JSON objektumtömböt vagy CSV szöveget, és az eszköz egy megfelelően felépített HTML táblázatot generál <thead>-del az oszlopfejlécekhez és <tbody>-vel az adatsorokhoz, ami készen áll a beillesztésre egy weboldalba vagy CMS-be.

Minden a böngésző beépített DOMParser-ével fut — semmilyen HTML sem kerül szerverre, így biztonságosan használható belső vagy érzékeny adatokat tartalmazó beillesztett tartalommal is.

Forrás: a táblázat szerkezete a WHATWG HTML Living Standard táblázat elem definícióját követi.

Miért érdemes használni?

• Kétirányú átalakítás — HTML táblázat JSON-ná, HTML táblázat CSV-vé, és JSON/CSV vissza tiszta HTML táblázat kóddá.
• Automatikus fejlécfelismerés — működik <thead>/<th> kóddal vagy egy sima első <tr>-vel, amit fejléc sorként használnak.
• Nincs szükség előbb egy táblázatkezelőbe másolásra — közvetlenül a táblázat kódból strukturált adatra léphetsz.
• Megfelelően escape-elt HTML kimenetet generál, így az adataidban lévő speciális karakterek, mint a < és &, nem törik el a táblázatot.
• 100%-ban kliensoldali — a beillesztett HTML (ami akár egy belső oldalról vagy admin panelről is származhat) sosem hagyja el a böngésződet.

Használati útmutató

1. Egy HTML táblázat átalakításához illeszd be a <table>...</table> kódot az első mezőbe, majd kattints az "Átalakítás JSON-ná" vagy "Átalakítás CSV-vé" gombra.
2. Nézd át az eredményt, majd másold ki, vagy kattints a letöltési linkre a fájl mentéséhez.
3. Egy HTML táblázat generálásához illeszd be a JSON tömbödet vagy CSV szövegedet a második mezőbe.
4. Kattints az "Átalakítás HTML táblázattá" gombra, és másold be a generált kódot az oldaladba vagy CMS-edbe.

Példa

Bemenet

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

Kimenet

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

Az első sor celláiból lesz az objektum kulcsa; minden további sor egy tömbelem lesz, ahol az értékek szövegként kerülnek beolvasásra.

Gyakorlati tippek

• Adatok kinyerése egy weboldal táblázatából: nézd meg az oldal forráskódját, vagy vizsgáld meg az elemet, másold ki a <table>...</table> kódot, és illeszd be ide, ahelyett hogy kézzel gépelnéd újra az adatokat.
• Egy API válasz közzététele olvasható táblázatként egy oldalon vagy CMS-ben: illeszd be a JSON tömböt a második mezőbe, és másold a generált HTML-t közvetlenül az oldalad rich-text vagy HTML blokkjába.
• Ha egy táblázat <div>-et vagy CSS grid elrendezést használ valódi <table> kód helyett, ez az eszköz nem tudja elemezni — a forrásoldalnak valódi HTML táblázat tageket kell használnia.

Miért fontos a fejléc felismerése

Egy egyértelmű fejléc sor nélküli táblázat kétértelmű — minden további eszköznek tudnia kell, melyik sor definiálja az oszlopneveket, mielőtt a maradék sorokat strukturált rekordokká alakítaná. Ez az eszköz úgy oldja fel ezt a kétértelműséget, ahogy a böngészők és a legtöbb scraper is teszi: először egy explicit <thead> szekciót keres, és csak akkor esik vissza az első látható sor fejlécként kezelésére, ha nincs jelen <thead>. Ez kiszámíthatóvá teszi az átalakítást még a kézzel írt vagy lementett táblázat kódnál is, ami kihagyja a szemantikusabb tageket.

Gyakori kérdések