Editor visual de tablas HTML extraídas

Cómo funciona esta herramienta por dentro

Arquitectura técnica

Por debajo, la herramienta combina cinco tecnologías web estándar que llevan años disponibles en cualquier navegador moderno: DOMParser nativo para parsear el HTML pegado (la misma API que usa cualquier extensión del navegador para manipular el DOM, sin librería externa), PapaParse para serializar CSV/TSV con soporte completo de RFC 4180 (escape de comillas, separadores configurables, line endings CRLF), SheetJS para generar y leer XLSX con round-trip completo (preserva tipos numéricos, fechas y texto en celdas), SortableJS para drag & drop de columnas (vanilla JS, sin dependencias), e IndexedDB para persistencia local con object stores tipados e índices por nombre y fecha. Toda la lógica de edición, sort, filter y type-detection es JavaScript vanilla ES2020+ sin frameworks: ni React, ni Vue, ni Angular, ni Tailwind. El bundle total de la herramienta son aproximadamente 1 MB raw (300 KB gzipped), comparable a una imagen JPEG de calidad alta, y se sirve 100% local excepto Funding Choices y AdSense (compliance legal).

El parser es la pieza más crítica. Cuando pegas HTML, la herramienta llama a new DOMParser().parseFromString(html, 'text/html') y obtiene un documento completo. Luego recorre todos los elementos <table> (o <ul>/<ol> según el modo) y extrae una matriz bidimensional de strings preservando atributos como colspan, rowspan, scope, class y style en un mapa paralelo. Esta estructura paralela es la que permite el export HTML preservado sin perder formato original. La primera fila se trata como cabecera si el checkbox "Incluir cabeceras" está activo y existe <thead> o si la heurística detecta que la primera fila tiene contenido th.

Cómo usar la herramienta paso a paso (extenso)

1. Cargar HTML. Tres modos disponibles. El Modo A (pegar HTML) es el más habitual: copia el bloque <table> desde la página de origen, pégalo en el textarea y pulsa "Procesar HTML". El Modo B (subir archivo) acepta .html y .htm con drag & drop o file picker; útil cuando tienes la página guardada en local. El Modo C carga uno de los 4 ejemplos precargados (Wikipedia, IMDb, datos.gob.es, W3Schools) para probar sin datos propios. Los 4 ejemplos están integrados en el JS como strings HTML completos, sin fetch de red, así que funcionan también offline.

2. Ajustar opciones de extracción. Si el HTML tiene varias tablas, aparece un dropdown "Tabla" numerado 1-indexado (siguiendo la convención de IMPORTHTML de Google Sheets, que empieza en 1, no en 0). El dropdown "Fuente" alterna entre parsear tablas <table> o listas <ul>/<ol> (las listas se convierten en tabla con dos columnas: índice y texto del ítem). Las 5 checkboxes adicionales controlan cómo se limpia el HTML interno de cada celda (quitando <a>, <span>, negrita, etc.) y si se preservan los atributos originales.

3. Editar, ordenar y filtrar. Click en cualquier celda para entrar en modo edición; Enter confirma, Esc cancela, blur confirma automáticamente. Click en el header ordena ascendente, segundo click descendente, tercer click sin orden; Shift+click añade esa columna al multi-sort con un indicador numérico de prioridad. El campo bajo cada header es el filter por columna (coincidencia contiene, case-insensitive); el campo "Buscar" del toolbar es el search global, que acepta regex con sintaxis /patrón/flags (por ejemplo /202[0-3]/i) o búsqueda literal si no se usa la sintaxis regex.

4. Normalizar tipos. Cada columna muestra en su header un icono con el tipo detectado (número 🔢, texto 📝, fecha 📅, moneda 💶, booleano ✓, nulo ⊘). Click en el icono abre un menú con la conversión a otros tipos: por ejemplo, si la columna se detecta como "moneda €", puedes convertirla a "número" (quitando el símbolo € y los separadores de miles) o a "texto" (preservando el símbolo original). La conversión es in-place y reversible exportando a otro formato.

5. Exportar y persistir. Los 6 botones de export generan archivos independientes con Blob + URL.createObjectURL + click programático en <a download>. Sin upload, sin servidor intermedio. Simultáneamente, cada cambio se persiste en IndexedDB con un debounce de 5 segundos; la lista de "Tablas guardadas" del panel izquierdo muestra todas las tablas con título, fecha y conteo de filas/columnas, y permite reabrir, renombrar o borrar cada una. La cuota de IndexedDB se monitoriza con navigator.storage.estimate() y se muestra un aviso si baja del 20% libre.

Consejos y trucos

Atajo de teclado Shift+click para multi-sort: ordena por varias columnas a la vez con prioridad visual. Por ejemplo, Shift+click en "País" y luego Shift+click en "Población" ordena alfabéticamente por país y, dentro de cada país, descendente por población. El indicador numérico ¹² en cada header muestra la prioridad.

Regex en la búsqueda global: el campo "Buscar" del toolbar acepta tres modos: texto literal (busca la cadena tal cual), regex con sintaxis /patrón/flags (por ejemplo /^20\d{2}$/ para años de 4 dígitos que empiezan por 20), y case-insensitive automático si escribes solo la cadena sin la sintaxis regex. Si tu regex es inválida, verás un aviso inline en vez de un error silencioso.

HTML preservado vs HTML plano: el botón "HTML preservado" del export mantiene los atributos originales (colspan, rowspan, scope, class, style), útil si vas a pegar el HTML de vuelta en una página web y necesitas mantener el formato. El XLSX/CSV/JSON, en cambio, aplana la tabla a una estructura rectangular estándar replicando el valor de las celdas fusionadas en las celdas hijas — esto es lo que Excel y Sheets esperan, pero pierdes la información de fusión.

Export CSV con BOM UTF-8 para Excel ES: el CSV generado lleva un BOM UTF-8 al inicio para que Excel en español reconozca acentos y eñes sin pedirte que selecciones la codificación al abrir. Si prefieres CSV sin BOM (por ejemplo para abrir en un editor de texto que se lía con el BOM), exporta a TSV que no usa BOM.

Auto-save con toast discreto: cada 5 segundos aparece un toast pequeño abajo a la derecha con el texto "Guardado" en verde ácido, y se desvanece a los 2 segundos. Si el auto-save falla (cuota llena, navegador en modo privado que borra IndexedDB), el toast se vuelve rojo y muestra el motivo; exporta inmediatamente a XLSX si ves ese aviso.

Reorder drag & drop de columnas: arrastra cualquier header horizontalmente para reordenarlo. El ancho de la columna se preserva al moverla (no se reajusta al ancho por defecto). Si el reorder te lía la vista y quieres volver al orden original, pulsa "× sort" para limpiar el orden aplicado — pero el reorder de columnas se mantiene hasta que recargues la tabla desde "Tablas guardadas".

Casos prácticos detallados

Limpieza de cotizaciones financieras: una empresa recibe cotizaciones de proveedores en tablas HTML embebidas en emails. Cada proveedor usa formato distinto (€ 1.234,56 vs $1,234.56 vs 1.234,56 EUR). Con esta herramienta, pegas el HTML, la detección automática marca cada columna como "moneda" según el símbolo presente, abres el menú del header y eliges "Convertir a número" para normalizar las tres columnas a número decimal puro. Sort descendente por precio, filter por proveedor que contenga "ACME", export a XLSX. Tiempo total: 90 segundos vs 15 minutos en Excel.

Migración de temario a Markdown: un estudiante de oposiciones tiene el temario en una página web del BOE. Copia la tabla de temas (Nº | Título | Apartado), la pega, le añade una columna "Revisado" escribiendo manualmente los valores true/false en cada celda, ordena por Nº para mantener el orden oficial, y exporta a Markdown. El archivo .md resultante se puede abrir en Obsidian, Logseq, Notion (vía import), VS Code con extensión Markdown Preview, o cualquier editor de texto. La persistencia IndexedDB le permite dejar la columna "Revisado" a medias durante días.

Preparación de fixtures para tests: un desarrollador necesita un JSON con datos de productos para sus tests unitarios. Tiene un dashboard HTML antiguo exportado a .html. Arrastra el archivo, la herramienta detecta la tabla de productos (id, nombre, precio, categoría), convierte la columna precio de moneda a número, sort por id, export a JSON array de objetos. Pega el JSON en fixtures/products.json de su repo y los tests pasan.

Glosario

rowspan / colspan

Atributos HTML de una celda de tabla que indican cuántas filas (rowspan) o columnas (colspan) ocupa visualmente. La herramienta los detecta al parsear y los preserva en el export HTML preservado; en XLSX/CSV/JSON se aplanan replicando el valor en cada celda hija.

CORS (Cross-Origin Resource Sharing)

Política de seguridad del navegador que impide por defecto que una página web lea el contenido de otra URL. Por eso esta herramienta no puede extraer HTML directamente desde una URL remota; el usuario debe copiar manualmente y pegar.

IndexedDB

API del navegador para almacenamiento local estructurado de gran capacidad (decenas de MB a GB según navegador). La herramienta usa IndexedDB en lugar de localStorage porque localStorage tiene límite de ~5 MB y solo almacena strings; IndexedDB permite objetos estructurados, índices y transacciones async.

RFC 4180

Estándar IETF que define el formato CSV: campos separados por coma, registros separados por CRLF, campos con comas/saltos/comillas entrecomillados con comillas dobles y comillas internas escapadas como "". PapaParse implementa este estándar completo.

CommonMark

Especificación formal y unificada de Markdown (vs las múltiples variantes que existían antes: Markdown original, GitHub Flavored Markdown, MultiMarkdown, etc.). El export a Markdown usa la sintaxis de tablas pipe-style estándar de CommonMark, que renderiza idéntico en GitHub, GitLab, Pandoc, Obsidian y la mayoría de editores modernos.

BOM UTF-8

Byte Order Mark: 3 bytes (EF BB BF) al inicio de un archivo UTF-8 que indica la codificación. Excel en español necesita este BOM para reconocer acentos y eñes al abrir un CSV; sin él, Excel interpreta el archivo como Latin-1 y muestra caracteres rotos.

Otras funciones para traer datos a Sheets (referencia)

Esta herramienta es 100% client-side y edita HTML pegado. Para extraer directamente desde una URL dentro de Google Sheets, existen las funciones nativas: IMPORTHTML (tablas y listas HTML remotas), IMPORTXML (consultas XPath sobre cualquier XML/HTML remoto), IMPORTDATA (CSV/TSV remotos), IMPORTFEED (feeds RSS/Atom) e IMPORTRANGE (entre hojas Sheets). Si solo necesitas extraer sin editar, mira el hermano extractor importhtml-importxml en este mismo sitio, que tiene un modo dedicado a explicar estas funciones y dar ejemplos prácticos.