Crear una tabla HTML con CSS

Ajusta tamaño, colores y resaltado: la vista previa y el código HTML/CSS para copiar se actualizan al momento.

Se ejecuta localmente en tu navegador

Cómo generar una tabla HTML con su CSS

Elige el número de columnas y filas, un tema de color y el comportamiento al pasar el cursor: la vista previa y el código HTML/CSS que puedes copiar se actualizan al momento.

La tabla se genera en el navegador: no se sube nada, la vista previa y el código son el mismo marcado y el código copiado no lleva marca de agua ni enlace externo.

  1. Define Columnas (1–50) y Filas (1–100). El número de filas incluye la fila de encabezado: 7 filas generan un encabezado y seis filas de celdas.
  2. Elige el estilo de la tabla: Azul, Verde, Gris, Naranja, Marrón, Negro o Sin color. Al elegir Sin color, el diseño cambia solo a Sin estilo.
  3. Elige el diseño: filas alternas, encabezado con color y filas blancas, o sin estilo.
  4. Decide si las celdas llevan texto de ejemplo (Fila:1 Celda:1) o quedan vacías, y si las filas deben resaltarse al pasar el cursor.
  5. Pulsa Copiar HTML para llevar el código al portapapeles y pégalo en tu página.

El marcado generado, sus límites y el resaltado al pasar el cursor

Qué contiene el código generado

El cuadro muestra un bloque <style> seguido de la tabla: un <table class="tftable" border="1"> con la fila de encabezado en <thead> y las filas de celdas en <tbody>. El CSS solo afecta a esa clase, así que dos tablas generadas aquí pueden convivir en la misma página sin identificadores únicos.

La vista previa de abajo usa exactamente el mismo marcado, así que lo que ves es lo que produce el código copiado. Los textos de ejemplo (Encabezado 1, Fila:1 Celda:1) se escriben en el idioma de la página, y el resultado no lleva marca de agua ni enlaces externos.

Límites de tamaño y entradas no válidas

Las columnas van de 1 a 50 y las filas de 1 a 100. Mientras un campo esté vacío o fuera de ese rango, la línea de estado sobre el código explica el rango y la tabla en pantalla conserva el último tamaño válido en lugar de quedar vacía.

Al salir del campo, el valor se ajusta al límite más cercano: 999 pasa a 50 y un campo vacío vuelve al último valor válido. Las letras se descartan al escribir, así que 12abc se convierte en 12.

Resaltado de filas, colores y copia

El resaltado de filas se genera como una regla CSS (table.tftable tbody tr:hover) en lugar de un script, así que la tabla pegada no necesita JavaScript ni un id propio. Los colores salen de seis paletas fijas; el diseño Sin estilo deja solo el atributo border.

Copiar HTML copia el contenido actual del cuadro. El código solo va al portapapeles: la página no envía la configuración a ningún servidor.

Herramientas recientes: