Convertidor de tablas HTML a Markdown | thead, align y colspan / rowspan en un solo paso

Si alguna vez has portado un artículo viejo de HTML a Markdown, conoces el dolor: todo el cuerpo convierte limpio salvo las tablas, que pierden el encabezado o se aplastan a una sola columna. Esta herramienta lee cualquier <table> que pegues, emite Markdown GFM y conserva thead, align y la expansión de colspan / rowspan en una sola pasada.

💡 Sobre esta herramienta

La mayoría de los convertidores rápidos no separan la fila de encabezado del cuerpo, así que escupen | celda | celda | para todas las filas y se saltan la línea separadora. El renderer GFM al leer eso trata la primera fila como datos y la tabla aparece sin encabezado en GitHub, Hugo, Jekyll, Astro o Docusaurus.

Este convertidor recorre el árbol DOM que produce el DOMParser del navegador, saca las filas de thead como encabezado y lee la alineación del atributo align heredado o del text-align en línea. Las celdas combinadas se expanden a una matriz: el contenido queda arriba a la izquierda y el resto del rango se rellena con celdas vacías, con una banda naranja avisando que Markdown no puede representar la combinación.

Todo ocurre dentro de tu navegador. El HTML que pegas no sale de la página.

🧐 Preguntas Frecuentes

Q. ¿Sirve con tablas copiadas de Excel, Google Sheets o LibreOffice Calc? A. La mayoría de las hojas de cálculo colocan tanto texto plano como HTML en el portapapeles. Pegar el HTML directamente, o exportar la hoja como HTML primero, funciona en casi todos los casos. Las etiquetas <meta> extras y los estilos que pegan algunos exportadores se descartan automáticamente.

Q. ¿Y si la tabla no tiene <th>? A. El convertidor inserta una fila de encabezado vacía (| | | |) para que la línea separadora tenga columnas con las que alinearse. GFM exige un encabezado sintácticamente, pero uno en blanco renderiza sin problema.

Q. ¿Cómo se tratan etiquetas internas como <a>, <strong> o <code>? A. En modo "Solo texto" la herramienta deja únicamente el texto plano de la celda. En modo "Conservar etiquetas" preserva el HTML inline dentro de la celda Markdown, ya que GFM permite HTML embebido. Usa "Conservar" si necesitas mantener enlaces o negritas; usa "Solo texto" para importaciones limpias.

Q. ¿Qué pasa con | dentro de las celdas? A. Se escapa a \| para que el parser GFM no parta la celda en dos. El renderer decodifica la barra invertida y muestra el carácter | literal.

Q. ¿Puedo pegar un documento HTML completo con varias tablas? A. Sí. Las tablas se convierten en orden y se separan por una línea en blanco. Los contadores reflejan filas totales y la columna más ancha entre todas las tablas.

Q. ¿Soporta <caption> y <colgroup>? A. Todavía no. GFM no tiene forma estándar de expresar un <caption> sobre la tabla y los anchos de columna de <colgroup> quedan fuera del alcance de Markdown. Ambos se omiten silenciosamente.

📚 Datos Curiosos

La sintaxis de tablas con pipes y guiones que usa GFM apareció originalmente en PHP Markdown Extra alrededor de 2004, cinco años antes de que GitHub la formalizara para README.md. Los marcadores de alineación (:---, ---:, :---:) son casi una copia directa de la especificación de Markdown Extra.

Un detalle curioso del parser HTML5 es la regla de "foster parenting": cuando el contenido entre <table> y </table> no encaja en una celda, el navegador lo expulsa fuera de la tabla en silencio. Este convertidor evita ese caos pasando por DOMParser y recorriendo solo el subconjunto predecible <tr> / <th> / <td>, que se comporta igual en Chrome, Firefox y Safari.