Generador de Tablas HTML
Un generador de tablas HTML convierte una cuadrícula tipo hoja de cálculo en marcado listo para pegar: define filas y columnas, escribe o importa los datos, elige un estilo y copia el código. El ejemplo integrado rellena aquí una tabla de precios de 6 × 4 y produce 43 líneas de HTML con estilos en línea, o esa misma cuadrícula en 7 líneas de Markdown.
Accesos rápidos
Editar tabla
Importar datos
Vista previa en vivo
Código Generado
Ayuda a mantener esta herramienta gratuita con un pequeño comentario HTML
Herramientas populares
Acerca de Generador de Tablas HTML
Este generador de tablas HTML construye el marcado a partir de una cuadrícula que editas en la propia página. Los botones menos y más junto a Filas y Columnas cambian su tamaño, cada celda es un campo de texto normal y la cruz roja al principio de una fila la elimina. Si los datos ya existen en otro sitio, pégalos en el cuadro Importar datos y pulsa Importar CSV, Importar TSV o Importar pipe: la cuadrícula se reconstruye a partir del texto pegado y las filas con menos campos se rellenan para que todas midan lo mismo.
Seis casillas deciden el aspecto. Fila de encabezado convierte la primera fila en celdas th dentro de un thead, Filas rayadas colorea una fila sí y otra no, Con bordes dibuja una cuadrícula completa en lugar de solo líneas inferiores, Efecto hover añade un fondo al pasar el ratón, Responsivo envuelve la tabla en un contenedor con desplazamiento horizontal y Compacto reduce el relleno de celda de 10px 16px a 4px 8px. Fondo encabezado, Texto encabezado y Color del borde son selectores de color, y la fila Accesos rápidos (Simple, Striped, Dark, Colorful, Minimal, Compact, Pricing) lo ajusta todo de una vez.
El panel Código Generado ofrece seis salidas. HTML escribe cada regla como atributo style en línea, la forma que conservan la mayoría de los clientes de correo. HTML + CSS traslada las reglas a un bloque style sobre la clase .fwt-table. Bootstrap emite las clases table, table-striped, table-bordered, table-hover y table-sm, y Tailwind emite clases de utilidad con un contenedor overflow-x-auto: ambas necesitan la hoja de estilos del framework en tu página. Markdown rellena las columnas con espacios y CSV entrecomilla un campo solo si contiene una coma, unas comillas o un salto de línea.
Lo que no hace: las celdas no se pueden combinar, así que no se escribe ningún atributo colspan ni rowspan, y las celdas de encabezado no llevan atributo scope, el que usan los lectores de pantalla para ligar un encabezado con su columna. Tampoco genera ordenación, paginación ni títulos de tabla. La cuadrícula se construye en tu navegador y nunca se envía.
Casos de uso
Cómo usar
Define el tamaño de la tabla con los botones menos y más que hay junto a Filas y Columnas, y escribe tu contenido directamente en las celdas de Editar tabla.
También puedes pegar datos en CSV, TSV o separados por barras verticales en el cuadro Importar datos y pulsar Importar CSV o Importar TSV para rellenar la tabla de una vez; Cargar ejemplo inserta datos de prueba.
Marca los estilos que quieras: Fila de encabezado, Filas alternas, Con bordes, Efecto hover, Responsive y Compacta.
Define Fondo del encabezado, Texto del encabezado y Color del borde con los selectores de color, o pulsa un botón de Preajustes rápidos como Striped, Dark, Minimal o Pricing.
Comprueba el resultado en Vista previa en vivo y usa la cruz roja que hay junto a cada fila o los botones + Añadir fila y + Añadir columna para ajustar la estructura.
Elige un formato de salida entre HTML, HTML + CSS, Bootstrap, Tailwind, Markdown o CSV y pulsa Copiar para llevar el código al portapapeles.
Consejos Pro
- Cargar ejemplo sustituye toda la cuadrícula en vez de añadirse a ella: copia antes lo que hayas escrito desde el panel Código Generado.
- Excel, Google Sheets y Numbers dejan texto separado por tabuladores en el portapapeles, así que pega el rango copiado en Importar datos y pulsa Importar TSV, no Importar CSV, que dejaría cada fila en una sola celda.
- Importar CSV trata las comillas dobles como un interruptor de delimitador y las descarta, de modo que «1,234» entrecomillado llega como una sola celda que muestra 1,234. Importar TSV no gestiona comillas y conserva cada carácter tal cual.
- Efecto hover solo se convierte en una regla real en las salidas HTML + CSS, Bootstrap y Tailwind. La salida HTML simple escribe el rayado como fondo en línea en las filas alternas e ignora el hover por completo.
- Desmarcar Incluir comentario de atribución quita el comentario HTML del código, pero la salida HTML + CSS sigue llevando una línea de crédito /*! ... */ dentro de la hoja de estilos: bórrala a mano si el CSS debe quedar limpio.
Solución de problemas
Pulsar Importar CSV no hace nada y la cuadrícula sigue vacía.
La importación se interrumpe sin aviso cuando el cuadro Importar datos está vacío o solo tiene espacios. Pega primero las filas y pulsa después el botón que corresponda a tu separador: Importar CSV para comas, Importar TSV para tabuladores, Importar pipe para el carácter |.
El botón Copiar nunca cambia a ¡Copiado!
La copia usa la API del portapapeles del navegador, que exige una página segura y un clic real, y algunos navegadores o extensiones la bloquean. Si no ocurre nada, selecciona el código del panel Código Generado y pulsa Ctrl+C, o Cmd+C en un Mac.
La salida Bootstrap o Tailwind se ve totalmente sin estilo en mi sitio.
Esos dos formatos escriben solo nombres de clase —table-striped, table-bordered, overflow-x-auto y demás— y dan por hecho que la hoja de estilos del framework ya está cargada. Si tu sitio no incluye ninguno de los dos, usa HTML o HTML + CSS, que llevan las reglas consigo.
Efecto hover está marcado pero no pasa nada con el código HTML simple.
El formato HTML simple no tiene dónde poner una regla :hover porque escribe los estilos como atributos en línea, así que allí la casilla se ignora. Cambia a HTML + CSS, que añade la regla .fwt-table tbody tr:hover, o a Bootstrap o Tailwind, que añaden una clase de hover.
El botón menos junto a Filas o Columnas deja de responder.
La cuadrícula no baja de una fila y una columna, así que esos botones no hacen nada al llegar al mínimo. Para vaciar las celdas sin reducir la cuadrícula pulsa Borrar Todo; para quitar una fila concreta usa la cruz roja que hay a su izquierda.
Preguntas frecuentes
Una tabla HTML es una cuadrícula de datos escrita con el elemento table. Las filas son elementos tr, las celdas de encabezado son th, las de datos son td, y thead y tbody agrupan el encabezado y el cuerpo. Este generador escribe exactamente esa estructura, y thead y th solo aparecen mientras la casilla Fila de encabezado está marcada.
th marca una celda de encabezado y td una celda de datos. Los navegadores muestran th en negrita y centrada por defecto, y la tecnología de asistencia la anuncia como el rótulo de las celdas de debajo. Aquí la primera fila pasa a celdas th dentro de un thead cuando Fila de encabezado está marcada; si la desmarcas, todas las celdas, incluida la primera fila, se escriben como td.
No. La cuadrícula siempre es rectangular, cada fila recibe el mismo número de celdas y no se escribe ningún atributo colspan ni rowspan. Si necesitas celdas combinadas, crea la tabla aquí, copia el HTML y añade colspan="2" o rowspan="2" a la celda en tu editor, borrando las celdas que quedan cubiertas.
Cambia el formato de salida de HTML a HTML + CSS. Esa versión imprime un bloque style con las reglas .fwt-table, .fwt-table th y .fwt-table td, más una regla nth-child(even) para el rayado y una regla tbody tr:hover si esas casillas están marcadas, seguido de marcado limpio sin ningún atributo style, solo class="fwt-table".
Intervienen dos ajustes. Con Con bordes desmarcado, las celdas reciben solo un border-bottom, así que ves líneas horizontales y ninguna vertical. Con la casilla marcada, las líneas se dibujan en el tono del selector Color del borde, y el valor por defecto #e5e7eb es un gris muy claro que casi desaparece sobre fondo blanco. Elige un color más oscuro y la cuadrícula se ve.
Marca Responsivo y elige la salida Bootstrap o Tailwind. Bootstrap envuelve la tabla en un div con clase table-responsive y Tailwind en un div con overflow-x-auto, de modo que una tabla ancha se desplaza en horizontal en lugar de romper la maqueta. La casilla no afecta a las salidas HTML, HTML + CSS, Markdown ni CSV, que salen igual en ambos casos.
Sí. Selecciona el rango en Excel, Google Sheets o Numbers y cópialo: las hojas de cálculo dejan texto separado por tabuladores en el portapapeles. Pégalo en el cuadro Importar datos y pulsa Importar TSV. La cuadrícula se reconstruye, los contadores de Filas y Columnas se actualizan y las filas cortas se rellenan con celdas vacías.
Usa la salida HTML simple en los tres casos. Lleva cada color, borde y relleno como atributo style en el propio elemento, así que sobrevive a editores y clientes de correo que eliminan un bloque style. En WordPress pégala en un bloque HTML personalizado; en Blogger cambia a la vista HTML en lugar de Redactar.
Sí, ambos son formatos de salida. Markdown rellena cada columna con espacios para que el código fuente quede alineado y añade la fila separadora bajo el encabezado, con lo que el ejemplo de seis filas pasa a siete líneas. CSV escribe una línea por fila y entrecomilla un campo solo si contiene una coma, unas comillas o un salto de línea, duplicando las comillas interiores.
Sí, para datos tabulares: cuadros de precios, listas de características, horarios, resultados. Lo obsoleto es usar tablas para maquetar la página, una técnica de los años noventa que sustituyeron CSS Grid y Flexbox. Todo lo que escribe este generador es una tabla de datos con encabezado, filas de cuerpo y celdas, que es lo que esperan buscadores y lectores de pantalla.