TL
Tool Lab
💰Donar
💰Donar

Generador de tablas HTML

Crea tablas HTML con un editor visual y copia el código al instante.

Salida HTML
<table border="1" cellpadding="8" style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr>
      <th style="padding: 8px; text-align: left;">Header 1</th>
      <th style="padding: 8px; text-align: left;">Header 2</th>
      <th style="padding: 8px; text-align: left;">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 8px;">Cell 1,1</td>
      <td style="padding: 8px;">Cell 1,2</td>
      <td style="padding: 8px;">Cell 1,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 2,1</td>
      <td style="padding: 8px;">Cell 2,2</td>
      <td style="padding: 8px;">Cell 2,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 3,1</td>
      <td style="padding: 8px;">Cell 3,2</td>
      <td style="padding: 8px;">Cell 3,3</td>
    </tr>
  </tbody>
</table>

Acerca de esta herramienta

El generador de tablas HTML te permite configurar filas y columnas, editar celdas directamente y obtener código HTML de tabla listo para usar. Puedes configurar visualmente filas de encabezado, bordes, filas rayadas y relleno de celdas.

El HTML generado sigue el marcado semántico con estructura thead y tbody adecuada, lo que es mejor para la accesibilidad y los lectores de pantalla. El código se actualiza en tiempo real mientras editas.

Cómo usar

  1. Establece el número de filas y columnas.
  2. Activa o desactiva la fila de encabezado, el borde y las filas rayadas con casillas de verificación.
  3. Ajusta el valor del relleno de celda.
  4. Haz clic en cualquier celda para escribir tu contenido directamente.
  5. Copia el código bajo "Salida HTML" y úsalo en tu proyecto.

Casos de uso

Ideal para tablas de comparación de datos, tablas de precios, horarios, tablas de especificaciones de productos y cualquier información mostrada en formato tabular en una página web.

Preguntas frecuentes

  • ¿Puedo dar estilo a la tabla sin CSS? — Sí. El HTML generado incluye atributos border y cellpadding, por lo que se aplica un estilo básico sin ningún CSS.
  • ¿Puedo añadir colspan o rowspan? — Esta herramienta genera una estructura de tabla básica. Edita el código generado directamente para añadir atributos colspan/rowspan.
  • ¿Cómo hago la tabla responsiva? — Envuelve la tabla en un div con overflow-x: auto, o usa media queries CSS para permitir el desplazamiento horizontal en pantallas pequeñas.