ZenovayTools

Generador de Tablas HTML

Genera código de tabla HTML desde un editor visual. Añade filas y columnas, establece encabezados y opciones de estilo. Exporta HTML limpio con estilos en línea o clases CSS.

Rows:3
Columns:4

Border style

Edit Table

Cómo usar Generador de Tablas HTML

  1. 1Establece el número de filas y columnas.
  2. 2Haz clic en las celdas para editar su contenido.
  3. 3Activa/desactiva la fila de encabezado y elige el estilo de borde.
  4. 4Copia el código de tabla HTML generado.
ZenovayAnalytics

Descubre qué hacen de verdad tus visitantes.

  • Seguimiento de visitantes en tiempo real
  • Privacidad primero, sin aviso de cookies
  • Configurado en dos minutos
Descubre Zenovay

Herramientas relacionadas

Generador de Degradados CSS
Crea hermosos degradados CSS con un editor visual. Degradados lineales, radiales y cónicos.
Generador de Sombra de Caja CSS
Diseña sombras de caja CSS con controles visuales. Ajusta desplazamiento, desenfoque, expansión y color.
Generador de Borde Redondeado CSS
Crea valores de borde redondeado personalizados con controles visuales. Vincula o desvincula las esquinas para ajustes rápidos.
Área de Juego CSS Flexbox
Aprende y genera diseños CSS Flexbox visualmente. Ajusta dirección, alineación, envoltura y espaciado en tiempo real.

Preguntas frecuentes

¿Cuál es la estructura básica de una tabla HTML?▾
<table>: elemento contenedor. <thead>: sección de cabecera de tabla (opcional pero recomendado). <tbody>: cuerpo de tabla. <tfoot>: pie de tabla (opcional). <tr>: fila de tabla (dentro de thead, tbody o tfoot). <th>: celda de encabezado de tabla — negrita y centrada por defecto, tiene atributo scope. <td>: celda de datos de tabla. Ejemplo: <table><thead><tr><th>Nombre</th><th>Edad</th></tr></thead><tbody><tr><td>Alicia</td><td>30</td></tr></tbody></table>.
¿Cómo añado bordes a las tablas HTML?▾
El atributo HTML border está obsoleto. Use CSS: table { border-collapse: collapse; } td, th { border: 1px solid #ddd; padding: 8px; }. border-collapse: collapse hace que los bordes adyacentes se fusionen; border-collapse: separate (predeterminado) mantiene bordes separados. Para filas alternadas: tr:nth-child(even) { background: #f9f9f9; }. Para hover: tr:hover { background: #f0f0f0; }.
¿Qué son colspan y rowspan?▾
colspan: cuántas columnas abarca una celda. rowspan: cuántas filas abarca una celda. Ejemplo: <td colspan="2">abarca 2 columnas</td>. Se usa para celdas fusionadas, como un encabezado que cubre varias columnas o una celda que cubre varias filas. Al usar colspan/rowspan, las celdas abarcadas se eliminan del HTML — la tabla sigue renderizándose correctamente.
¿Cómo hago las tablas HTML accesibles?▾
Añada scope a las celdas de encabezado: <th scope="col">Columna</th> o <th scope="row">Encabezado de fila</th>. Use <caption> para el título de la tabla. Añada atributos id/headers para tablas complejas. Evite usar tablas para diseño — use CSS Grid o Flexbox en su lugar. Los lectores de pantalla anuncian el número de columnas/filas y navegan por celda con las teclas de flecha.
¿Cómo hago las tablas HTML responsivas?▾
Envuelva en un contenedor desplazable: <div style="overflow-x:auto"><table>...</table></div>. Esto permite el desplazamiento horizontal en pantallas pequeñas. Técnicas más avanzadas: oculte columnas menos importantes en móviles con CSS (display:none en un punto de quiebre), use atributos data-label + CSS para mostrar etiquetas cuando las columnas se contraen, o convierta a tarjetas en móvil: table { width:100% } td { display:block; }.