Generador de Tablas HTML

Cómo crear una tabla HTML

1. Pulsa + Add row / + Add column para dimensionar la cuadrícula, o pega directamente un rango de celdas copiado de Excel o Google Sheets para rellenarla en un solo paso.
2. Haz clic en una celda y escribe, o haz clic en una celda, shift+clic en otra para seleccionar un rectángulo, y pulsa Merge selected cells para combinarlas.
3. Activa First row is a header y/o First column is a header, elige un estilo, y opcionalmente activa el contenedor responsivo con desplazamiento.
4. Pulsa Copy HTML para obtener el código en bruto, Copy rendered table para pegar una tabla ya con estilo directamente en un documento, o Download .html para guardarla como archivo.

Por qué crear una tabla HTML de forma visual

Escribir a mano las etiquetas <table>, <tr>, <th> y <td> (sobre todo en cuanto alguna celda empieza a abarcar varias filas o columnas) es lento y fácil de estropear sutilmente: basta con olvidar una etiqueta de cierre o que un colspan no coincida con la fila de arriba para que toda la tabla se vea descuadrada. Un editor de cuadrícula visual te deja ver exactamente lo que estás construyendo mientras lo construyes, añadir o quitar filas y columnas sobre la marcha, y combinar celdas seleccionándolas en lugar de calcular los spans a mano.

Pegar directamente desde una hoja de cálculo es la otra mitad del ahorro de tiempo, la mayoría de las tablas reales empiezan siendo un rango de celdas que alguien ya tiene en Excel o Google Sheets, y volver a escribir esos datos en un formulario web es pura fricción. Pégalos, ajusta cabeceras y combinaciones si hace falta, elige un estilo, y copia el HTML terminado.

Cómo se almacenan las combinaciones, y la única restricción que se sigue

Internamente la tabla es un simple array bidimensional con el texto de cada celda más una lista aparte de rectángulos combinados. Cada combinación registra solo su ancla superior izquierda y cuántas filas y columnas abarca, y todas las demás celdas dentro de ese rectángulo se tratan como cubiertas: su texto se sigue guardando, pero no se emite ningún <td> para ellas. Eso es lo que hace la salida válida por construcción, porque “qué celdas están ocultas” siempre se deriva de la lista de combinaciones en lugar de seguirse como una segunda marca que podría desincronizarse.

Conservar el texto cubierto significa además que deshacer una combinación es genuinamente reversible. Rompe una combinación y cada celda de dentro vuelve con lo que tuviera antes, algo que no es cierto en la mayoría de hojas de cálculo.

La restricción que se desprende de este diseño es que las combinaciones no pueden solaparse ni anidarse. Seleccionar un rectángulo que toca un bloque ya combinado se rechaza con un mensaje en vez de disolver a medias el antiguo, porque admitir una combinación de combinaciones necesitaría una estructura de datos genuinamente distinta para servir a un caso que esta herramienta no necesita. Para agrandar un bloque combinado, deshazlo y combina el rectángulo mayor. Borrar una fila o columna que una combinación abarca se maneja con la misma honestidad: la combinación se disuelve primero en celdas normales, luego ocurre el borrado, y las combinaciones situadas después de la línea borrada se desplazan para seguir siendo correctas.

Celdas de cabecera, filas con bandas y los dos botones de copiar

Las dos casillas de cabecera son independientes, y las dos hacen exactamente una cosa: cambian las celdas de la primera fila, o las de la primera columna, de <td> a <th>. Activa las dos y la esquina superior izquierda también es un <th>. Fíjate en lo que no se produce, porque de vez en cuando importa: no hay elemento <thead> ni <tbody> y no hay atributo scope en las celdas de cabecera, así que si vas a llevar esto a un contexto con revisión estricta de accesibilidad querrás añadirlos tú. Para un bloque combinado, la condición de cabecera la decide la posición de su propia celda ancla y no el solapamiento del rectángulo entero.

Hay cinco presets disponibles: liso, mínimo, filas con bandas, con bordes y modo oscuro. Las filas con bandas cuentan solo las filas de cuerpo, así que el sombreado empieza en la segunda fila real de datos y no se descuadra por la cabecera que está encima. La casilla de diseño adaptable envuelve la tabla terminada en un <div style="overflow-x:auto">, que es lo que impide que una tabla de doce columnas reviente la maquetación de una entrada de blog en un móvil.

Sacar el resultado funciona de tres maneras, y la diferencia entre las dos primeras pilla a la gente. Copiar HTML pone el marcado en tu portapapeles como texto, para pegarlo en una plantilla o un editor. Copiar tabla renderizada lo pone en el portapapeles como text/html, así que pegarlo en Google Docs, Word o un redactor de correo produce una tabla realmente formateada en lugar de un muro de etiquetas. Descargar .html guarda el marcado como archivo.

Editor de cuadrícula, JSON o Markdown

Tres herramientas de aquí se solapan y la correcta depende de lo que ya tengas. Si tus datos son un array JSON, Convertir JSON a Tabla HTML se salta la cuadrícula por completo y te deja elegir qué claves se convierten en columnas; comparte exactamente estos presets de estilo, así que cambiar de una a otra no altera nada del aspecto. Si el destino es un README, un wiki o un mensaje de chat, el Generador de Tablas Markdown usa el mismo enfoque de edición en cuadrícula y emite sintaxis de barras verticales. Y si la tabla es en realidad el entregable completo, descarga el .html aquí y pásalo por Convertir HTML a PDF.

Tus datos de tabla nunca salen de tu dispositivo

Los datos de hoja de cálculo pegados en una herramienta como esta suelen ser mucho más que una demostración, tablas de precios, tablas comparativas, informes internos, datos de clientes. Esta herramienta crea la tabla enteramente en la memoria de tu propio navegador; no hay paso de subida, no hay procesamiento en un servidor, y no queda ninguna copia de tus datos en ningún sitio salvo tu propio dispositivo.

Usos habituales

• Convertir una tabla comparativa (planes de precios, matrices de funciones, hojas de especificaciones) copiada de una hoja de cálculo en HTML limpio para una landing page o una entrada de blog.
• Crear una tabla para una plantilla de correo con celdas de cabecera combinadas y estilo en línea que sobrevive al pegarse en la mayoría de los clientes de correo.
• Recrear una tabla de una exportación de un CMS o una página de wiki donde algunas celdas abarcan varias filas o columnas, sin calcular colspan/rowspan a mano.
• ¿Tienes JSON en lugar de un rango de hoja de cálculo? El Conversor de JSON a Tabla HTML comparte exactamente estos mismos cinco estilos y convierte un array JSON directamente en una tabla con selección de columnas en lugar de un editor de cuadrícula.
• ¿Necesitas una tabla en Markdown para un README o una página de wiki en lugar de HTML en bruto? Mira el Generador de Tablas Markdown, que usa este mismo enfoque de editor de cuadrícula.
• ¿Quieres la tabla terminada como PDF en lugar de una página web? Descárgala como archivo .html aquí, y luego súbela al Conversor de HTML a PDF.