Softonic

Generador de Tablas HTML

Los datos pegados, las celdas y el HTML generado permanecen en este navegador. Los pasos del embudo usan el almacenamiento de sesión de esta pestaña; los valores no se envían por el servidor ni se incluyen en la URL.

Paso 1 / 4

Se admiten campos CSV entre comillas, tabulaciones de hojas de cálculo, filas separadas por punto y coma y separadores de tablas Markdown. Máximo: 50 filas, 20 columnas y 1000 caracteres por celda.

Datos de la tabla
Datos de la tabla

Es tedioso escribir <table>, <thead>, <tbody> y <tr> a mano para un conjunto de datos de diez filas. Pega datos de tabla separados por tabulaciones, CSV o Markdown y este generador produce HTML bien estructurado con etiquetas semánticas, <caption> opcional, atributos de alcance adecuados y una selección de rayas de cebra, bordes o clases de Tailwind, listo para insertar en un artículo o un panel de control.

Cómo construir una tabla HTML

  1. 1

    Pega tus datos

    TSV (copia de una hoja de cálculo), CSV o sintaxis de tabla Markdown se analizan correctamente.

  2. 2

    Elige opciones de tabla

    Fila de encabezado, título, rayas de cebra, filas compactas o espaciosas.

  3. 3

    Elige modo de estilo

    HTML simple, estilos en línea, clases de Bootstrap o clases de Tailwind.

  4. 4

    Copia el marcado

    La salida es HTML válido y semántico, no una cuadrícula `<div>` que pretende ser una tabla.

Estructura de tabla semántica

Las tablas construidas con etiquetas adecuadas son accesibles, amigables con lectores de pantalla y fáciles de estilizar. El generador produce esta estructura:

<table>
  <caption>Cifras de ventas Q1</caption>
  <thead>
    <tr>
      <th scope="col">Región</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">UE</th>
      <td>$120k</td>
      <td>$145k</td>
    </tr>
  </tbody>
</table>

Elementos y sus roles

Elemento Propósito
<caption> Resumen de la tabla, leído primero por los lectores de pantalla
<thead> Encabezados de columna, renderizados por separado del cuerpo
<tbody> Filas de datos
<tfoot> Totales, notas al pie, colocados al final independientemente de la posición del código
<th scope="col"> Encabezado de columna
<th scope="row"> Encabezado de fila (por ejemplo, la primera celda de cada fila)
<td> Celda de datos

Patrones responsivos

  • Desplazamiento horizontal: envuelve la tabla en <div style="overflow-x:auto"> para que las vistas estrechas puedan desplazarse en lugar de romper el diseño.
  • Apilar en móvil: repite encabezados como atributos data-label y convierte filas en tarjetas verticales a través de CSS, bueno para conjuntos de datos pequeños.
  • Reflujo con cuadrícula: tablas complejas pueden ser reconstruidas con CSS Grid, pero pierden navegación nativa por teclado; solo vale la pena para paneles de control.

Lista de verificación de accesibilidad

  • Cada <th> tiene un atributo scope.
  • Las celdas combinadas complejas utilizan headers="..." para vincular celdas de datos a los IDs de encabezado.
  • Un título resume el propósito de la tabla.
  • No uses tablas para diseño visual, usa CSS Grid o Flexbox.

Preguntas frecuentes

Sí. Los datos del portapapeles de la hoja de cálculo son TSV (separados por tabulaciones), que el generador analiza de forma nativa. Las filas se convierten en <tr> y las celdas separadas por tabulaciones se convierten en <td>.

Clases CSS para cualquier cosa que controles; estilos en línea para correos electrónicos (donde a menudo se bloquean las hojas de estilo externas). Los modos de Bootstrap y Tailwind producen marcado de clase listo para usar para esos frameworks.

No de forma automática. Cada valor importado se convierte en una celda. Después de copiar el HTML, añade colspan o rowspan y revisa las asociaciones de encabezados, ya que las celdas combinadas pueden necesitar atributos id y headers.

Sí, se añaden atributos scope="col" y scope="row", y se produce un <caption> cuando proporcionas uno. Verifica con un lector de pantalla o la extensión axe DevTools para tablas complejas.

Herramientas relacionadas

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Formateador de JSON

Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.

Simplificador de Álgebra Booleana

Simplifica expresiones booleanas usando mapas de Karnaugh y el algoritmo de Quine-McCluskey. Muestra cada paso de minimización y una forma final SOP/POS.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.

Generador de colores aleatorios

Genera de 1 a 50 colores HEX aleatorios con muestras para previsualizar, copiar y usar en CSS, pruebas o exploración de paletas.

Convertidor de BBCode a HTML

Convierte BBCode (marcado de tablones de anuncios) a HTML limpio. Maneja etiquetas de formato, listas, citas, código, imágenes y enlaces.