Μετατροπέας HTML Πίνακα σε JSON/CSV

Τι είναι αυτό το εργαλείο;

Οι ιστοσελίδες συχνά παρουσιάζουν δεδομένα μέσα σε ένα στοιχείο HTML <table> — μια σελίδα τιμολόγησης, μια σελίδα στατιστικών, μια scraped λίστα — αλλά αυτός ο κώδικας δεν είναι απευθείας χρησιμοποιήσιμος σε κώδικα ή υπολογιστικό φύλλο. Αυτό το εργαλείο αναλύει τον επικολλημένο κώδικα <table>, διαβάζει τη γραμμή επικεφαλίδας (από <thead>/<th>, ή την πρώτη <tr> αν δεν υπάρχει <thead>), αντιστοιχίζει τα κελιά κάθε επόμενης γραμμής σε αυτές τις επικεφαλίδες, και παράγει έναν πίνακα JSON αντικειμένων ή ένα αρχείο CSV.

Λειτουργεί επίσης και αντίστροφα: επικολλήστε έναν πίνακα JSON αντικειμένων ή κείμενο CSV, και το εργαλείο δημιουργεί έναν σωστά δομημένο πίνακα HTML με <thead> για τις επικεφαλίδες στηλών και <tbody> για τις γραμμές δεδομένων, έτοιμο να επικολληθεί σε μια ιστοσελίδα ή CMS.

Όλα εκτελούνται με το ενσωματωμένο DOMParser του browser — κανένα HTML δεν αποστέλλεται σε server, οπότε είναι ασφαλές να χρησιμοποιηθεί με επικολλημένο περιεχόμενο που περιλαμβάνει εσωτερικά ή ευαίσθητα δεδομένα.

Πηγή: η δομή πίνακα ακολουθεί τον ορισμό στοιχείου πίνακα του WHATWG HTML Living Standard.

Γιατί να το χρησιμοποιήσετε;

• Αμφίδρομη μετατροπή — πίνακας HTML σε JSON, πίνακας HTML σε CSV, και JSON/CSV ξανά σε καθαρό κώδικα πίνακα HTML.
• Αυτόματη ανίχνευση επικεφαλίδας — λειτουργεί με κώδικα <thead>/<th> ή απλή πρώτη <tr> που χρησιμοποιείται ως γραμμή επικεφαλίδας.
• Χωρίς πρώτα επικόλληση σε υπολογιστικό φύλλο — πηγαίνετε απευθείας από κώδικα πίνακα σε δομημένα δεδομένα.
• Παράγει σωστά διαφυγόμενη έξοδο HTML, ώστε ειδικοί χαρακτήρες όπως < και & στα δεδομένα σας να μη χαλάνε τον πίνακα.
• 100% από την πλευρά του πελάτη — το HTML που επικολλάτε (που μπορεί να προέρχεται από εσωτερική σελίδα ή πίνακα διαχείρισης) δεν φεύγει ποτέ από τον browser σας.

Πώς χρησιμοποιείται

1. Για να μετατρέψετε έναν πίνακα HTML: επικολλήστε τον κώδικα <table>...</table> στο πρώτο πλαίσιο, μετά κάντε κλικ στο "Μετατροπή σε JSON" ή "Μετατροπή σε CSV".
2. Ελέγξτε την έξοδο, μετά αντιγράψτε την ή κάντε κλικ στον σύνδεσμο λήψης για να αποθηκεύσετε το αρχείο.
3. Για να δημιουργήσετε έναν πίνακα HTML: επικολλήστε έναν πίνακα JSON ή κείμενο CSV στο δεύτερο πλαίσιο.
4. Κάντε κλικ στο "Μετατροπή σε πίνακα HTML" και αντιγράψτε τον παραγόμενο κώδικα στη σελίδα ή το CMS σας.

Παράδειγμα

Είσοδος

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

Έξοδος

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

Τα κελιά της πρώτης γραμμής γίνονται τα κλειδιά αντικειμένου· κάθε επόμενη γραμμή γίνεται ένα στοιχείο πίνακα με τιμές που λαμβάνονται ως κείμενο.

Πρακτικές συμβουλές

• Εξαγωγή δεδομένων από έναν πίνακα σε μια ιστοσελίδα: δείτε την πηγή της σελίδας ή επιθεωρήστε το στοιχείο, αντιγράψτε τον κώδικα <table>...</table>, και επικολλήστε τον εδώ αντί να πληκτρολογήσετε ξανά τα δεδομένα χειροκίνητα.
• Δημοσίευση μιας απάντησης API ως ευανάγνωστου πίνακα σε έναν ιστότοπο ή CMS: επικολλήστε τον πίνακα JSON στο δεύτερο πλαίσιο και αντιγράψτε το παραγόμενο HTML απευθείας στο μπλοκ πλούσιου κειμένου ή HTML της σελίδας σας.
• Αν ένας πίνακας χρησιμοποιεί διάταξη <div> ή CSS grid αντί για πραγματικό κώδικα <table>, αυτό το εργαλείο δεν μπορεί να τον αναλύσει — η σελίδα προέλευσης πρέπει να χρησιμοποιεί πραγματικές ετικέτες πίνακα HTML.

Γιατί έχει σημασία η ανίχνευση επικεφαλίδας

Ένας πίνακας χωρίς σαφή γραμμή επικεφαλίδας είναι διφορούμενος — κάθε επόμενο εργαλείο πρέπει να ξέρει ποια γραμμή ορίζει τα ονόματα στηλών πριν μπορέσει να μετατρέψει τις υπόλοιπες γραμμές σε δομημένες εγγραφές. Αυτό το εργαλείο επιλύει αυτή την ασάφεια με τον τρόπο που κάνουν οι browsers και οι περισσότεροι scrapers: ψάχνει πρώτα για μια ρητή ενότητα <thead>, και μόνο τότε καταφεύγει στην αντιμετώπιση της πρώτης ορατής γραμμής ως επικεφαλίδα όταν δεν υπάρχει <thead>. Αυτό διατηρεί τη μετατροπή προβλέψιμη ακόμη και για χειρόγραφο ή scraped κώδικα πίνακα που παραλείπει τις πιο σημασιολογικές ετικέτες.

Συχνές ερωτήσεις