Конвертер HTML-таблиць у JSON/CSV

Що це за інструмент?

Вебсторінки часто подають дані всередині елемента HTML <table> — сторінка з цінами, статистична сторінка, скрапований список — але ця розмітка не використовується напряму в коді чи електронній таблиці. Цей інструмент розбирає вставлену розмітку <table>, читає рядок заголовків (з <thead>/<th>, або перший <tr>, якщо <thead> немає), зіставляє комірки кожного наступного рядка з цими заголовками й видає масив об'єктів JSON чи файл CSV.

Він також працює у зворотному напрямку: вставте масив об'єктів JSON чи текст CSV, і інструмент згенерує належно структуровану HTML-таблицю з <thead> для заголовків стовпців і <tbody> для рядків даних, готову до вставлення на вебсторінку чи в CMS.

Усе працює на вбудованому в браузер DOMParser — жоден HTML не надсилається на сервер, тож це безпечно використовувати з вставленим вмістом, який містить внутрішні чи чутливі дані.

Джерело: структура таблиці відповідає визначенню елемента таблиці в WHATWG HTML Living Standard.

Навіщо його використовувати?

• Двонаправлена конвертація — HTML-таблиця в JSON, HTML-таблиця в CSV, і JSON/CSV назад у чисту розмітку HTML-таблиці.
• Автоматичне визначення заголовків — працює як з розміткою <thead>/<th>, так і зі звичайним першим <tr>, використаним як рядок заголовків.
• Не потрібно спочатку копіювати-вставляти в електронну таблицю — переходьте напряму від розмітки таблиці до структурованих даних.
• Генерує належно екранований HTML-вивід, тож спеціальні символи на кшталт < і & у ваших даних не ламають таблицю.
• 100% на стороні клієнта — HTML, який ви вставляєте (він може бути з внутрішньої сторінки чи адмін-панелі), ніколи не залишає ваш браузер.

Як користуватися

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-таблиці.

Чому визначення заголовків важливе

Таблиця без чіткого рядка заголовків неоднозначна — кожному подальшому інструменту потрібно знати, який рядок визначає назви стовпців, перш ніж перетворити решту рядків на структуровані записи. Цей інструмент розв'язує цю неоднозначність так само, як браузери й більшість скраперів: спочатку шукає явний розділ <thead>, і лише переходить до трактування першого видимого рядка як заголовка, коли <thead> відсутній. Це робить конвертацію передбачуваною навіть для рукописної чи скрапованої розмітки таблиці, яка пропускає більш семантичні теги.

Часті запитання