Generador de tablas HTML

Cómo funciona

1. Define las dimensiones de la tabla: introduce el número de filas y columnas para generar la cuadrícula inicial.
2. Rellena los datos: haz clic en las celdas para introducir contenido, añade filas de encabezado y activa bordes y cebreado.
3. Estiliza la tabla: elige el estilo de borde, el color de fondo de los encabezados, el cebreado de filas y el padding de celdas.
4. Copia el HTML: el marcado de tabla generado incluye un <thead> con encabezados <th> y una estructura semántica correcta.

¿Por qué usar el generador de tablas HTML?

Escribir a mano el marcado de tablas HTML es tedioso y repetitivo, sobre todo para tablas con muchas filas o encabezados complejos. Conseguir el anidamiento correcto de <table>, <thead>, <tbody>, <tr>, <th> y <td> cada vez es propenso a errores. Este generador produce tablas HTML semánticamente correctas y accesibles con atributos scope en las celdas de encabezado para compatibilidad con lectores de pantalla, soporte adecuado de leyendas y un CSS limpio para bordes y estados hover. Úsalo para tablas de precios, tablas de comparación, tablas de datos y documentación.

Características de las tablas

• Estructura thead/tbody: marcado de tabla semántico para la accesibilidad
• Cebrado de filas: colores alternos con CSS nth-child
• Estilos de borde: cuadrícula completa, solo horizontal o sin borde
• Fusión de columnas: compatibilidad con colspan y rowspan
• Envoltorio responsive: envoltorio de desplazamiento horizontal opcional para móvil

¿Qué es un generador de tabla HTML?

Un generador de tabla HTML le da una cuadrícula visual que puede rellenar como una hoja de cálculo, luego emite el marcado <table> equivalente con todos los elementos semánticos correctos. En lugar de escribir <table>, <thead>, <tbody>, <tr>, <th> y <td> a mano y contar etiquetas de apertura y cierre, establece las dimensiones, escribe los datos y copia el resultado. La salida es HTML que valida y se lee correctamente para lectores de pantalla.

Los elementos de tabla semánticos han estado en HTML desde el borrador de 1993 y se formalizaron en HTML 2.0 (1995). Existen por una razón: datos tabulares. Una tabla de precios, una matriz de comparación, una cuadrícula de datos ordenable, una tabla periódica de elementos, cualquier colección rectangular de hechos donde las filas y columnas tienen significado. Las tablas se leen correctamente a la tecnología asistiva cuando se usan para datos tabulares y crean pesadillas de accesibilidad cuando se usan para la composición de página (la era <div> y Flexbox terminó ese abuso).

Este generador produce marcado accesible con atributos scope en celdas de encabezado, un <thead> separado para la fila de encabezado, y CSS inline para las opciones visuales que marca. La salida está lista para copiar-pegar en publicaciones de blog, documentación, plantillas de correo electrónico y cualquier contexto que acepte HTML. La cuadrícula visual se ejecuta completamente en su navegador, por lo que ningún dato sale de su dispositivo.

Lo que hay dentro del generador

La fila de control superior contiene dos entradas numéricas (filas y columnas), un botón Aplicar y cuatro casillas de opciones (fila de encabezado, filas rayadas, con borde, efecto al pasar). Ajuste primero las dimensiones, haga clic en Aplicar, luego marque las opciones que coincidan con su diseño. La cuadrícula editable de abajo se actualiza instantáneamente, y el HTML generado en el área de texto refleja cada cambio que hace.

La cuadrícula editable es una tabla HTML real con entradas en cada celda, así que puede tabular entre celdas, pegar una columna de valores o usar navegación por teclado. La fila de encabezado (cuando está marcada) se renderiza con fondo coloreado para que pueda ver de un vistazo qué fila se convertirá en <th> en la salida. La caja de salida debajo muestra el HTML resultante en monoespacio, listo para copiar.

Tres botones de acción están en la parte inferior: Copiar HTML escribe el marcado en su portapapeles a través de la API Clipboard, Alternar Vista Previa muestra una versión renderizada abajo para que pueda confirmar el estilo, y Borrar Celdas vacía los datos sin restablecer las dimensiones. La vista previa usa el mismo CSS que la salida, así que lo que ve es lo que su blog o documento mostrará.

Historia y contexto

Tim Berners-Lee propone las tablas (1993)

El primer borrador HTML en incluir <table> fue la propuesta HTML 3.0 de Dave Raggett a finales de 1993. El elemento se modeló en el entorno tabular LaTeX y el modelo de tabla CALS usado para documentación técnica. Mosaic y los primeros Netscape renderizaban tablas tan pronto como se propusiera el marcado, incluso antes de la estandarización, por lo que las tablas fueron una de las primeras primitivas visuales en la web.

RFC 1942 estandariza el modelo de tabla (1996)

El RFC 1942 de Dave Raggett (mayo de 1996) dio a las tablas HTML su primera especificación formal, incluyendo thead, tbody, tfoot, colgroup y el atributo scope para accesibilidad. El mismo año, la recomendación HTML 3.2 del W3C adoptó el modelo de tabla esencialmente palabra por palabra. La estructura ha permanecido en gran medida sin cambios durante tres décadas.

La era oscura de las tablas de composición (1996 a 2005)

Antes de que CSS fuera ampliamente soportado, los diseñadores usaban tablas para posicionar elementos de página: una tabla de cuatro celdas contenía el encabezado, navegación izquierda, contenido y pie de página. La técnica funcionaba pero producía marcado ilegible, rompía lectores de pantalla y hacía el rediseño doloroso. El evangelismo CSS de Eric Meyer (2000 a 2005) y Designing With Web Standards de Jeffrey Zeldman (2003) terminaron la era, devolviendo las tablas a su propósito semántico: datos tabulares.

Valores de visualización CSS table-* (desde 2004)

CSS 2.1 añadió display: table, table-row y table-cell, así que podía obtener comportamiento de composición tipo tabla en elementos no-tabla. Esto era útil durante el breve período cuando Flexbox y Grid aún no estaban soportados (aproximadamente 2010 a 2015). Hoy, display: grid y display: flex han reemplazado estos valores CSS table para la composición, y las tablas reales están reservadas para datos.

Rol grid ARIA y accesibilidad (2014)

WAI-ARIA 1.0 (2014) introdujo role=grid para tablas interactivas y aclaró cómo los lectores de pantalla deberían anunciar encabezados de tabla via el atributo scope y el patrón headers/id. Los lectores de pantalla modernos (NVDA, JAWS, VoiceOver) leen correctamente un <table> marcado correctamente con contexto de columna y fila, lo cual es imposible de replicar con cuadrículas basadas en <div>.

Patrones de tablas responsive (2011 hasta el presente)

Cuando el iPhone hizo dominantes las pantallas pequeñas, los diseñadores tenían que descubrir cómo mostrar tablas anchas en viewports estrechos. El artículo de tablas responsive de Filament Group de 2011 inició una ola de patrones: desplazamiento horizontal, filas apiladas en móvil, columnas colapsando por prioridad. El CSS Working Group ha estado trabajando en consultas de contenedor y subgrid para hacer estos patrones más fáciles; por ahora, el enfoque estándar es envolver la tabla en overflow-x: auto.

Flujos de trabajo prácticos

Tablas de precios para una página de aterrizaje SaaS

Tres columnas (Gratis, Pro, Empresa) por aproximadamente diez filas de características. Marque fila de encabezado para hacer que los nombres de plan sean celdas <th>, marque con borde para separación clara, deje rayadas desactivado si su diseño tiene sus propios fondos de fila. Copie el HTML, péguelo en su CMS o sitio estático, y añada una clase wrapper delgada para tematización.

Matriz de comparación para reseñas de blog

Al revisar cinco herramientas a través de ocho criterios, una tabla con filas rayadas y celdas con borde se lee más limpiamente que una lista con viñetas. Marque rayadas, con borde y fila de encabezado; escriba o pegue los datos; copie. El marcado semántico hace la comparación legible en lectores de feeds, servicios de archivo y lectores de pantalla.

Tabla de referencia en documentación de API

Los documentos de API a menudo muestran nombre de parámetro, tipo, default y descripción en forma tabular. El generador le da las cuatro columnas con una fila de encabezado, rellena los parámetros, copia el HTML y pega en Markdown que soporta HTML crudo, o en su framework de documentos (Docusaurus, MkDocs, Hugo). El atributo scope hace las columnas navegables en lectores de pantalla.

Boletín de correo electrónico (con advertencia)

Los clientes de correo electrónico (Outlook 2007 a 2019 especialmente) tienen soporte CSS extremadamente inconsistente, por lo que el HTML de boletín todavía usa tablas para composición (una excepción a la regla de no-tablas-de-composición). Para tablas de datos dentro de un boletín, la salida con estilo inline del generador funciona en la mayoría de los clientes. Pruebe en Litmus o Email on Acid antes de enviar a una lista grande.

Maqueta rápida de dashboard interno

Al prototipar un dashboard administrativo interno, una tabla HTML estática con filas rayadas se ve más cerca del producto final que el texto de marcador de posición. Genere la estructura, péguela en el componente React o Vue, y reemplace los datos estáticos con un bucle vinculado a datos más tarde.

Generación de PDF desde HTML

Al generar PDFs desde HTML con herramientas como Puppeteer, wkhtmltopdf, o la impresión a PDF de Chrome, las tablas se renderizan de manera confiable en todos los motores. Use el generador para construir la tabla, pegue en su plantilla, y ejecute la tubería de PDF. La opción con borde da líneas impresas nítidas sin CSS adicional.

Trampas comunes

Usar tablas para composición de página

Las tablas son para datos tabulares, no estructura de página. Una <table> con una fila y tres columnas para posicionar encabezado, contenido y barra lateral hace que la página se lea como una tabla de datos a los lectores de pantalla, lo cual es confuso. Use Flexbox o CSS Grid para composición en su lugar. La única excepción es el correo electrónico HTML, donde las tablas de composición aún son necesarias para renderizado entre clientes.

Atributo scope faltante en celdas de encabezado

Cada <th> debería tener scope="col" o scope="row" para que los lectores de pantalla sepan qué encabezado se aplica a qué celda de datos. Sin scope, el lector tiene que adivinar, a menudo produciendo contexto incorrecto. Este generador emite scope automáticamente para filas de encabezado. Si edita el HTML manualmente, mantenga los atributos scope en su lugar.

Encabezados complejos (multi-nivel) sin headers/id

Las tablas con encabezados de columna agrupados (Q1, Q2 cada uno dividido en Ene, Feb, Mar) necesitan el atributo headers en cada celda de datos apuntando al id de los encabezados relevantes. Scope solo es insuficiente para encabezados de dos niveles. El generador no produce encabezados complejos; para estos, edite el HTML manualmente o use un plugin de CMS que soporte el patrón.

Tablas anchas en móvil

Una tabla de seis columnas es ilegible en una pantalla de teléfono de 375 píxeles de ancho. El patrón móvil amigable por defecto es envolver la tabla en un div con overflow-x: auto para que el usuario pueda desplazarse horizontalmente. Para tablas con muchas columnas, considere apilar las filas en mini-tarjetas en pantallas pequeñas via @media (max-width). La salida del generador no se envuelve automáticamente; añada la envoltura en su CSS.

Celdas vacías sin contenido explícito

Un <td></td> en blanco se lee como vacío a los lectores de pantalla, lo cual suena extraño al listar 50 entradas. Si una celda legítimamente no tiene datos, escriba <td>&mdash;</td> o <td aria-label="sin datos">&ndash;</td>. Tenga en cuenta que la entidad guion introduce un guion largo, que este sitio evita; use un guion, 'N/A', o 'No disponible' en su lugar.

Ordenación y filtrado sin mejora progresiva

Una tabla HTML estática no puede ser ordenada o filtrada por usuarios. Si su audiencia necesita interactividad, integre DataTables, AG Grid, o Tanstack Table. El generador produce la tabla semántica subyacente, que se convierte en la base de estas bibliotecas. La navegación por teclado y los roles ARIA vienen con la biblioteca.

Privacidad y manejo de datos

Todo se ejecuta en su navegador. La cuadrícula visual, la salida HTML y la vista previa viven todos en JavaScript del lado del cliente. No enviamos sus datos a ningún lado, no registramos entradas, y no almacenamos nada en cookies o localStorage. Recargue la página y la tabla anterior se ha ido.

Una vez cargada la página, la herramienta funciona sin conexión. Puede desconectarse de la red y construir tablas que contengan datos de clientes, precios internos, o cualquier otro contenido confidencial sin que toque un servidor de terceros. El botón Copiar HTML usa la API Clipboard que requiere un gesto de usuario y no es observable a partes externas.

Cuándo no usar una tabla HTML estática

Composición de página (use Flexbox o Grid)

Si quiere una barra lateral junto al contenido principal, una cuadrícula de tarjetas, o una barra de navegación, use CSS Flexbox (display: flex) o CSS Grid (display: grid). Las tablas para composición producen salida de lector de pantalla confusa y HTML inflexible que no se adapta a cambios de viewport como lo hacen las primitivas de composición modernas.

Conjuntos de datos grandes (más de 1000 filas)

Una tabla HTML estática de 10,000 filas es lenta de renderizar y consume memoria significativa. Use una biblioteca de cuadrícula virtualizadora (TanStack Virtual, React Window, AG Grid) que solo renderiza filas visibles. El HTML estático está bien para menos de unos cientos de filas.

Manipulación de datos interactiva (use una biblioteca de cuadrícula)

Cuando los usuarios necesitan ordenar, filtrar, editar, agrupar o paginar, necesita una biblioteca de cuadrícula real. AG Grid, TanStack Table, DataTables y Bootstrap Table todos producen marcado <table> accesible bajo el capó mientras añaden interactividad. La salida del generador es el punto de partida, no la meta.

Gráficos (use SVG o canvas)

Un gráfico de barras no es una tabla, es una visualización. Use Chart.js, D3, Recharts, o cualquier biblioteca de gráficos basada en SVG. Si necesita tanto un gráfico como una tabla de datos de respaldo para accesibilidad, renderice el gráfico y coloque una <table> con los mismos datos cerca (u oculta en una clase visualmente oculta) para que los usuarios de lectores de pantalla obtengan los números.

Más preguntas

¿Debería usar siempre thead y tbody?

Para tablas con una fila de encabezado, sí. <thead> separa las filas de encabezado de las filas de datos, lo que permite a los navegadores congelar el encabezado en tablas largas y permite a los lectores de pantalla anunciar encabezados correctamente. El generador incluye thead automáticamente cuando se marca la opción de fila de encabezado. Para tablas sin encabezado, puede omitir ambos, pero es barato incluir <tbody> para completitud.

¿Cuándo uso scope="col" vs scope="row"?

scope="col" va en celdas <th> que etiquetan una columna (la fila superior de encabezados). scope="row" va en celdas <th> que etiquetan una fila (la celda más a la izquierda cuando cada fila tiene un nombre). La mayoría de las tablas solo tienen encabezados de columna, así que scope="col" es el caso común. Si tiene ambos, marque cada uno con el scope apropiado.

¿Cómo hago una tabla ordenable?

Use una biblioteca JavaScript que añade clic-para-ordenar al marcado <table> existente. Sortable.js, TanStack Table y DataTables todos hacen esto. CSS puro no puede ordenar. La salida del generador es la base estática; superponga la biblioteca encima en su proyecto final. Para accesibilidad, la biblioteca debería añadir aria-sort a la columna activa.

¿Cuál es el mejor patrón responsive?

El más simple y accesible es overflow-x: auto en un div envolvente, que preserva la semántica de la tabla mientras permite a los usuarios desplazarse horizontalmente. Para tablas con muchas columnas, el patrón de filas apiladas (display: block en tds en anchos estrechos, con etiquetas de datos via atributos data-label) lee cada fila como una lista etiquetada en móvil. Ambos son válidos; elija según el caso de uso de lectura vs comparación de la tabla.

¿Puedo usar tablas HTML en Markdown?

La mayoría de los procesadores Markdown (GitHub Flavored Markdown, Pandoc, MDX, MkDocs, Hugo) aceptan HTML crudo junto con sintaxis Markdown, así que puede pegar la salida del generador directamente. La sintaxis nativa de tabla de Markdown es más simple pero carece de colspan, rowspan, scope y estilo, así que para cualquier cosa más allá de una cuadrícula simple, HTML es mejor. Nota: algunos parseadores Markdown estrictos (CommonMark sin extensiones) ignoran HTML por defecto.

¿Cómo estilizo colores de fila alternados sin CSS?

Marque la opción Filas Rayadas en el generador. La salida incluye atributos de estilo inline en cada otra fila, así que el rayado sobrevive incluso en contextos donde se elimina CSS (algunos clientes de correo web). Si su entorno permite CSS externo, prefiera tr:nth-child(even) en una hoja de estilos, que es más limpio que estilos inline y más fácil de actualizar.