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

Что это за инструмент?

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

Работает и в обратную сторону: вставьте массив объектов JSON или текст CSV, и инструмент создаст правильно структурированную HTML-таблицу с <thead> для заголовков столбцов и <tbody> для строк данных, готовую к вставке на веб-страницу или в CMS.

Всё выполняется с помощью встроенного в браузер DOMParser — HTML не отправляется на сервер, поэтому это безопасно использовать с вставленным контентом, содержащим внутренние или конфиденциальные данные.

Источник: структура таблицы соответствует определению элемента table в 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-сетку вместо настоящей разметки <table>, этот инструмент не сможет её разобрать — исходная страница должна использовать настоящие теги HTML-таблицы.

Почему важно определение заголовков

Таблица без чёткой строки заголовков неоднозначна — любому последующему инструменту нужно знать, какая строка определяет названия столбцов, прежде чем превратить оставшиеся строки в структурированные записи. Этот инструмент разрешает эту неоднозначность так же, как браузеры и большинство парсеров: сначала ищет явный раздел <thead>, и только при его отсутствии считает первую видимую строку заголовком. Это делает преобразование предсказуемым даже для написанной вручную или спарсенной разметки таблицы, где пропущены более семантические теги.

Часто задаваемые вопросы