Editor visual de tablas con exportación a HTML, Markdown y CSV
También podrías necesitar
Crear tablas HTML a mano es tedioso: escribir <table>, <thead>, <tbody>, <tr>, <th>, <td> repetidamente es propenso a errores y difícil de mantener cuando la tabla crece. Esta herramienta te da un editor visual de tabla estilo hoja de cálculo — cada celda es un input, puedes añadir y eliminar filas o columnas con un clic, y el HTML se regenera automáticamente. Además del HTML, la herramienta exporta la misma tabla como Markdown (útil para documentación técnica, README de GitHub, notas en Notion o Obsidian) y como CSV (útil para importar a Excel, Google Sheets o bases de datos). El HTML generado se controla con opciones: 'Primera fila como encabezado' genera <thead>/<th>, 'Con borde' añade border='1' para mostrar líneas, 'Filas alternadas' añade una class que puedes estilizar con CSS. La salida es HTML válido y accesible, listo para pegar en cualquier documento, correo o CMS.
¿La tabla HTML generada es accesible?
Sí, sigue las prácticas básicas de accesibilidad: si activas 'Primera fila como encabezado', las celdas de esa fila se marcan como <th> en lugar de <td>, lo que permite a lectores de pantalla anunciar el encabezado de cada columna cuando el usuario navega por las celdas. Para accesibilidad avanzada podrías añadir manualmente atributos como <table role='table'>, scope='col' en los <th>, y un <caption> con el título de la tabla — la herramienta no los añade automáticamente para mantener el HTML simple.
¿Puedo usar el Markdown en cualquier plataforma?
El Markdown de tabla generado (con | separadores y --- para el header) es compatible con GitHub Flavored Markdown (GFM), GitLab, Bitbucket, Notion, Obsidian, VS Code preview, y la mayoría de CMS con soporte Markdown. Notable excepción: Reddit usa una variante distinta que puede no renderizar. Si el output no se ve bien, verifica si tu plataforma soporta GFM.
¿Qué opciones de estilo puedo aplicar al HTML?
La herramienta genera dos opciones básicas: 'Con borde' añade el atributo border='1' que muestra líneas simples entre celdas. 'Filas alternadas' añade la clase 'striped' — para que se vean alternadas, añade en tu CSS: .striped tbody tr:nth-child(even) { background: #f5f5f5; }. Para estilos más complejos (colores, tipografía, hover), añade tu propio CSS después de copiar el HTML.
¿El CSV generado maneja campos con comas o comillas?
Sí, sigue el estándar RFC 4180: los campos que contienen comas, comillas dobles o saltos de línea se envuelven en comillas dobles, y las comillas internas se escapan duplicándose ('). El resultado se importa correctamente en Excel, Google Sheets, LibreOffice y cualquier parser CSV estándar. Los saltos de línea internos en una celda también se preservan si los añades.
¿Cuál es el límite de tamaño de la tabla?
No hay límite explícito, pero el rendimiento del editor se degrada con miles de celdas (tabla de 100×100 = 10,000 inputs React). Para tablas grandes recomendamos escribir los datos en un CSV o una spreadsheet y luego copiarlos aquí para la conversión. Para tablas muy pequeñas (menos de 20×10), el editor visual es cómodo y rápido.