Volver al inicio Desarrollador Generador de tablas HTML

Generador de tablas HTML

Convierte CSV/TSV a tablas HTML o Markdown

Cómo usar Generador de tablas HTML

Convierte CSV o TSV a tablas HTML o Markdown al instante. Personaliza estilos. Generador de tablas HTML gratuito online.

¿Cuándo necesitas un generador de tablas HTML?

Las tablas HTML muestran datos tabulares —filas y columnas con cabeceras. Escribir HTML de tablas manualmente es verboso y propenso a errores. Un generador convierte datos estructurados en marcado de tabla válido y formateado al instante.

Accesibilidad: Las tablas HTML bien formadas incluyen cabeceras <th> con atributos scope, un <caption> y usan secciones <thead>/<tbody>/<tfoot>. Los lectores de pantalla dependen de esta estructura para transmitir los datos tabulares de forma significativa.

Frequently Asked Questions

¿Cuándo debo usar una tabla en lugar de CSS grid/flexbox?

Usa tablas para datos genuinamente tabulares —datos con filas y columnas significativas, donde el significado de cada celda depende de sus cabeceras de fila y columna. Usa CSS grid y flexbox para el diseño de página —incluso si el resultado visual parece una cuadrícula, los layouts no tabulares no deben usar elementos <table> por razones semánticas y de accesibilidad.

¿Cuál es la diferencia entre <th> y <td>?

<th> es una celda de cabecera de tabla —en negrita y centrada por defecto, y semánticamente marca la celda como cabecera de su fila o columna. Los lectores de pantalla usan <th> para anunciar el contexto de columna o fila. <td> es una celda de datos sin significado semántico. Usa siempre <th> para las cabeceras de columna y fila.

¿Cómo hago una tabla responsiva en móvil?

Las tablas HTML puras no responden a pantallas estrechas —se desbordan o se comprimen. Soluciones habituales: añade overflow-x:auto a un div contenedor para habilitar el scroll horizontal. O usa CSS para apilar las celdas verticalmente en móvil, usando atributos data-label para mostrar las cabeceras de columna junto a cada valor.

¿Qué es la propiedad CSS border-collapse?

Por defecto, las celdas de tabla adyacentes tienen bordes separados, creando líneas dobles. border-collapse:collapse fusiona los bordes adyacentes en una sola línea —el aspecto estándar para la mayoría de tablas de datos. border-collapse:separate mantiene los bordes distintos y permite border-spacing entre celdas.

¿Puedo generar tablas con celdas fusionadas (colspan/rowspan)?

Este generador crea tablas regulares a partir de datos CSV —todas las celdas tienen el mismo tamaño. Para tablas con celdas fusionadas (colspan, rowspan), es necesaria la edición manual del HTML. Usa esta herramienta para la tabla base y luego añade los atributos de fusión en un editor de código.

Tabla HTML vs tabla Markdown vs hoja de cálculo

Una tabla HTML ofrece control total de estilo y la renderizan los navegadores y la mayoría de clientes de correo. Una tabla Markdown (separada por barras verticales) la renderizan GitHub, GitLab y la mayoría de plataformas de documentación —más simple de escribir pero con estilo limitado. Una hoja de cálculo (Excel, Google Sheets) es mejor para el análisis de datos con fórmulas, ordenación y filtrado. Elige HTML para incrustación web, Markdown para documentación y hojas de cálculo para trabajo con datos.

☕ Buy me a coffee