HTML-taulukko JSON/CSV-muuntaja

Mikä tämä työkalu on?

Verkkosivuilla data esitetään usein HTML:n <table>-elementissä — hinnastossa, tilastosivulla tai kaavitussa listauksessa — mutta tuo merkintä ei ole suoraan käytettävissä koodissa tai taulukkolaskennassa. Tämä työkalu jäsentää liitetyn <table>-merkinnän, lukee otsikkorivin (<thead>/<th>-elementeistä, tai ensimmäisestä <tr>:stä jos <thead>-elementtiä ei ole), yhdistää jokaisen seuraavan rivin solut näihin otsikoihin ja tuottaa JSON-objektitaulukon tai CSV-tiedoston.

Se toimii myös toisin päin: liitä JSON-objektitaulukko tai CSV-teksti, ja työkalu luo asianmukaisesti jäsennellyn HTML-taulukon, jossa on <thead> sarakeotsikoille ja <tbody> datariveille — valmis liitettäväksi verkkosivulle tai sisällönhallintajärjestelmään.

Kaikki tapahtuu selaimen sisäänrakennetulla DOMParser-toiminnolla — HTML:ää ei lähetetä palvelimelle, joten se on turvallista myös sisäistä tai arkaluontoista dataa sisältävälle liitetylle sisällölle.

Lähde: taulukon rakenne noudattaa WHATWG HTML Living Standardin taulukkoelementin määritelmää.

Miksi käyttää sitä?

• Kaksisuuntainen muunnos — HTML-taulukko JSON:iksi, HTML-taulukko CSV:ksi ja JSON/CSV takaisin siistiksi HTML-taulukoksi.
• Automaattinen otsikon tunnistus — toimii sekä <thead>/<th>-merkinnällä että tavallisella ensimmäisellä <tr>-rivillä otsikkona.
• Ei tarvetta liittää ensin taulukkolaskentaan — mene suoraan taulukkomerkinnästä jäsenneltyyn dataan.
• Tuottaa asianmukaisesti escapetun HTML-tulosteen, joten datan erikoismerkit kuten < ja & eivät riko taulukkoa.
• 100 % selaimessa toimiva — liittämäsi HTML (joka voi olla peräisin sisäiseltä sivulta tai hallintapaneelista) ei koskaan poistu selaimestasi.

Käyttöohje

1. HTML-taulukon muuntamiseksi: liitä <table>...</table>-merkintä ensimmäiseen laatikkoon ja klikkaa "Convert to JSON" tai "Convert to CSV".
2. Tarkista tulos, kopioi se tai klikkaa latauslinkkiä tallentaaksesi tiedoston.
3. HTML-taulukon luomiseksi: liitä JSON-taulukko tai CSV-teksti toiseen laatikkoon.
4. Klikkaa "Convert to HTML table" ja kopioi luotu merkintä sivullesi tai sisällönhallintajärjestelmääsi.

Esimerkki

Syöte

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

Tuloste

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

Ensimmäisen rivin solut muuttuvat objektin avaimiksi; jokainen seuraava rivi muuttuu yhdeksi taulukon alkioksi, jonka arvot poimitaan tekstinä.

Käytännön vinkkejä

• Datan poimiminen verkkosivun taulukosta: tarkastele sivun lähdekoodia tai tarkasta elementti, kopioi <table>...</table>-merkintä ja liitä se tähän sen sijaan, että kirjoittaisit datan uudelleen käsin.
• API-vastauksen julkaiseminen luettavana taulukkona sivustolla tai sisällönhallintajärjestelmässä: liitä JSON-taulukko toiseen laatikkoon ja kopioi luotu HTML suoraan sivun rich text- tai HTML-lohkoon.
• Jos taulukko käyttää <div>- tai CSS grid -asettelua oikean <table>-merkinnän sijaan, tämä työkalu ei pysty jäsentämään sitä — lähdesivun täytyy käyttää aitoja HTML-taulukkotageja.

Miksi otsikon tunnistus on tärkeää

Taulukko ilman selkeää otsikkoriviä on monitulkintainen — jokaisen jatkotyökalun täytyy tietää, mikä rivi määrittää sarakkeiden nimet, ennen kuin loput rivit voidaan muuttaa jäsennellyiksi tietueiksi. Tämä työkalu ratkaisee epäselvyyden samalla tavalla kuin selaimet ja useimmat kaavintatyökalut: se etsii ensin nimenomaisen <thead>-osion ja käyttää ensimmäistä näkyvää riviä otsikkona vasta, jos <thead>-elementtiä ei löydy. Näin muunnos pysyy ennustettavana myös käsin kirjoitetulla tai kaavitulla taulukkomerkinnällä, joka ei käytä semanttisempia tageja.

Usein kysytyt kysymykset