Ejemplos · Tabla interactiva

Tabla interactiva: ejemplos

Licencias, estados, cuotas y notas en una tabla que puedes explorar. El ejemplo principal usa nombres y cuotas ficticios. Ordena cabeceras, filtra estados, abre anotaciones o convierte una columna numérica en gráfico. En un teléfono, la primera columna permanece fija mientras te desplazas de lado.

Cuándo usarlo

  • Comparar texto, estados y dinero en una fila
  • Mostrar limitaciones junto a cada opción de compra
  • Sustituir tablas estáticas por inserciones ordenables, filtrables y adaptadas al teléfono

¿Conviene otra forma?

Compara un número por fila con barras o piruletas mediante el botón de gráfico. Para tiempo, sigue usando líneas.


Ejemplos de uso

Lo que cobra la plataforma

Los importes llevan barras pequeñas. El importe principal se muestra tal cual y la columna de notas explica los costes adicionales.

Abrir en el creador con estos datos

Ver especificación
{
  "type": "table",
  "theme": "ink",
  "title": "Plataformas de comunidad, ejemplo ficticio",
  "source": "Páginas de precios, agosto de 2026: solo importes principales; adaptación con nombres ficticios e importes ilustrativos en euros",
  "data": {
    "labels": [
      "Comunidad Brisa Pro",
      "Comunidad Brisa Inicial",
      "Foro Faro Profesional",
      "Red Atlas Inicio",
      "Foro Cedro Pro",
      "Plataforma Olmo Inicial"
    ],
    "series": [],
    "columns": [
      {
        "name": "Plataforma"
      },
      {
        "name": "Coste en este ejemplo",
        "kind": "number",
        "format": "affix:[\"\",\" €\"]"
      },
      {
        "name": "Tienda",
        "kind": "status"
      },
      {
        "name": "Tu equipo sigue añadiendo",
        "kind": "note"
      }
    ],
    "rows": [
      [
        "Comunidad Brisa Pro",
        202,
        "yes",
        "Nada: el procesamiento está incluido en la tarifa"
      ],
      [
        "Comunidad Brisa Inicial",
        289,
        "yes",
        "Nada: el procesamiento está incluido en la tarifa"
      ],
      [
        "Foro Faro Profesional",
        139,
        "yes",
        {
          "text": "Proporción y cuota fija del procesador",
          "kind": "partial"
        }
      ],
      [
        "Red Atlas Inicio",
        129,
        "yes",
        {
          "text": "Procesamiento: de 63 a 125 € en este ejemplo",
          "kind": "partial"
        }
      ],
      [
        "Foro Cedro Pro",
        100,
        "no",
        {
          "text": "Una herramienta de pago y sus comisiones",
          "kind": "partial"
        }
      ],
      [
        "Plataforma Olmo Inicial",
        399,
        "no",
        {
          "text": "Una tienda, además de un año pagado por adelantado",
          "kind": "partial"
        }
      ]
    ]
  }
}

Lo desconocido sigue desconocido

Desconocido y no aplicable son estados distintos. La interrogación indica información sin publicar; la raya, una pregunta que no corresponde.

Abrir en el creador con estos datos

Ver especificación
{
  "type": "table",
  "theme": "mint",
  "title": "Herramientas de estudio con IA: plan gratuito",
  "source": "Páginas de producto, septiembre de 2026",
  "data": {
    "labels": [
      "Quizlet",
      "Knowt",
      "Anki",
      "Gizmo"
    ],
    "series": [],
    "columns": [
      {
        "name": "Herramienta"
      },
      {
        "name": "Plan gratuito de IA",
        "kind": "status"
      },
      {
        "name": "Límite publicado",
        "kind": "status"
      },
      {
        "name": "Funciona sin conexión",
        "kind": "status"
      }
    ],
    "rows": [
      [
        "Quizlet",
        "yes",
        "yes",
        "no"
      ],
      [
        "Knowt",
        "yes",
        {
          "status": "partial",
          "note": "El límite depende de la función"
        },
        "no"
      ],
      [
        "Anki",
        "na",
        "na",
        "yes"
      ],
      [
        "Gizmo",
        "yes",
        {
          "status": "unknown",
          "note": "Sin publicar"
        },
        "unknown"
      ]
    ]
  }
}

Todos los estados HTTP, diez por página

Los 63 códigos registrados se paginan con options.pageSize: 10. Búsqueda y filtros actúan antes de paginar. La vista completa muestra todos. La caché predeterminada sigue RFC 9110.

Abrir en el creador con estos datos

Ver especificación
{
  "type": "table",
  "theme": "editorial",
  "title": "Códigos de estado HTTP",
  "source": "Registro IANA de estados HTTP; caché predeterminada según RFC 9110 §15.1",
  "options": {
    "pageSize": 10,
    "search": true,
    "sticky": true
  },
  "data": {
    "labels": [
      "100",
      "101",
      "102",
      "103",
      "200",
      "201",
      "202",
      "203",
      "204",
      "205",
      "206",
      "207",
      "208",
      "226",
      "300",
      "301",
      "302",
      "303",
      "304",
      "305",
      "306",
      "307",
      "308",
      "400",
      "401",
      "402",
      "403",
      "404",
      "405",
      "406",
      "407",
      "408",
      "409",
      "410",
      "411",
      "412",
      "413",
      "414",
      "415",
      "416",
      "417",
      "418",
      "421",
      "422",
      "423",
      "424",
      "425",
      "426",
      "428",
      "429",
      "431",
      "451",
      "500",
      "501",
      "502",
      "503",
      "504",
      "505",
      "506",
      "507",
      "508",
      "510",
      "511"
    ],
    "series": [],
    "columns": [
      {
        "name": "Código"
      },
      {
        "name": "Significado"
      },
      {
        "name": "En caché por defecto",
        "kind": "status"
      }
    ],
    "rows": [
      [
        "100",
        "Continuar",
        "no"
      ],
      [
        "101",
        "Cambio de protocolo",
        "no"
      ],
      [
        "102",
        "Procesando",
        "no"
      ],
      [
        "103",
        "Indicaciones preliminares",
        "no"
      ],
      [
        "200",
        "Correcto",
        "yes"
      ],
      [
        "201",
        "Creado",
        "no"
      ],
      [
        "202",
        "Aceptado",
        "no"
      ],
      [
        "203",
        "Información no autoritativa",
        "yes"
      ],
      [
        "204",
        "Sin contenido",
        "yes"
      ],
      [
        "205",
        "Restablecer contenido",
        "no"
      ],
      [
        "206",
        "Contenido parcial",
        "yes"
      ],
      [
        "207",
        "Varios estados",
        "no"
      ],
      [
        "208",
        "Ya comunicado",
        "no"
      ],
      [
        "226",
        "Manipulación de instancia usada",
        "no"
      ],
      [
        "300",
        "Varias opciones",
        "yes"
      ],
      [
        "301",
        "Traslado permanente",
        "yes"
      ],
      [
        "302",
        "Encontrado",
        "no"
      ],
      [
        "303",
        "Ver otro",
        "no"
      ],
      [
        "304",
        "Sin modificar",
        "no"
      ],
      [
        "305",
        "Usar proxy",
        "no"
      ],
      [
        "306",
        "(Sin usar)",
        "no"
      ],
      [
        "307",
        "Redirección temporal",
        "no"
      ],
      [
        "308",
        "Redirección permanente",
        "yes"
      ],
      [
        "400",
        "Solicitud incorrecta",
        "no"
      ],
      [
        "401",
        "Sin autorización",
        "no"
      ],
      [
        "402",
        "Pago requerido",
        "no"
      ],
      [
        "403",
        "Prohibido",
        "no"
      ],
      [
        "404",
        "No encontrado",
        "yes"
      ],
      [
        "405",
        "Método no permitido",
        "yes"
      ],
      [
        "406",
        "No aceptable",
        "no"
      ],
      [
        "407",
        "Autenticación de proxy requerida",
        "no"
      ],
      [
        "408",
        "Tiempo de solicitud agotado",
        "no"
      ],
      [
        "409",
        "Conflicto",
        "no"
      ],
      [
        "410",
        "Ya no disponible",
        "yes"
      ],
      [
        "411",
        "Longitud requerida",
        "no"
      ],
      [
        "412",
        "Condición previa fallida",
        "no"
      ],
      [
        "413",
        "Contenido demasiado grande",
        "no"
      ],
      [
        "414",
        "URI demasiado larga",
        "yes"
      ],
      [
        "415",
        "Tipo de contenido no admitido",
        "no"
      ],
      [
        "416",
        "Intervalo no satisfacible",
        "no"
      ],
      [
        "417",
        "Expectativa fallida",
        "no"
      ],
      [
        "418",
        "(Sin usar)",
        "no"
      ],
      [
        "421",
        "Solicitud mal dirigida",
        "no"
      ],
      [
        "422",
        "Contenido no procesable",
        "no"
      ],
      [
        "423",
        "Bloqueado",
        "no"
      ],
      [
        "424",
        "Dependencia fallida",
        "no"
      ],
      [
        "425",
        "Demasiado pronto",
        "no"
      ],
      [
        "426",
        "Actualización requerida",
        "no"
      ],
      [
        "428",
        "Condición previa requerida",
        "no"
      ],
      [
        "429",
        "Demasiadas solicitudes",
        "no"
      ],
      [
        "431",
        "Cabeceras demasiado grandes",
        "no"
      ],
      [
        "451",
        "No disponible por motivos legales",
        "no"
      ],
      [
        "500",
        "Error interno del servidor",
        "no"
      ],
      [
        "501",
        "Sin implementar",
        "yes"
      ],
      [
        "502",
        "Pasarela incorrecta",
        "no"
      ],
      [
        "503",
        "Servicio no disponible",
        "no"
      ],
      [
        "504",
        "Tiempo de pasarela agotado",
        "no"
      ],
      [
        "505",
        "Versión HTTP no admitida",
        "no"
      ],
      [
        "506",
        "La variante también negocia",
        "no"
      ],
      [
        "507",
        "Almacenamiento insuficiente",
        "no"
      ],
      [
        "508",
        "Bucle detectado",
        "no"
      ],
      [
        "510",
        "Sin extender (obsoleto)",
        "no"
      ],
      [
        "511",
        "Autenticación de red requerida",
        "no"
      ]
    ]
  }
}

Una selección editable para lectores

Los nombres abren los proyectos en otra pestaña. Con Pro puedes comparar filas seleccionadas y destacar diferencias. Copiar y CSV usan las filas visibles; el botón de esquina abre pantalla completa.

Abrir en el creador con estos datos

Ver especificación
{
  "type": "table",
  "theme": "editorial",
  "title": "Motores de foros: selección",
  "source": "Revisión del artículo, 24 de agosto de 2026; licencias y tareas, sin precios",
  "options": {
    "sticky": true,
    "table": {
      "compare": true,
      "copy": true,
      "expand": true
    }
  },
  "data": {
    "labels": [
      "Discourse",
      "Flarum",
      "vBulletin",
      "phpBB",
      "XenForo",
      "Invision"
    ],
    "series": [],
    "columns": [
      {
        "name": "Producto"
      },
      {
        "name": "Licencia"
      },
      {
        "name": "Coste de licencia",
        "kind": "status"
      },
      {
        "name": "Qué sigue a cargo del equipo",
        "kind": "note"
      }
    ],
    "rows": [
      [
        "[Discourse](https://www.discourse.org/)",
        "GPL 2.0 o posterior",
        {
          "status": "yes",
          "label": "Ninguno"
        },
        "Servidor y servicio de correo SMTP"
      ],
      [
        "[Flarum](https://flarum.org/)",
        "MIT",
        {
          "status": "yes",
          "label": "Ninguno"
        },
        "Servidor, actualizaciones y moderación"
      ],
      [
        "[vBulletin](https://www.vbulletin.com/)",
        "Comercial",
        {
          "status": "no",
          "label": "De pago"
        },
        "Servidor, actualizaciones y moderación"
      ],
      [
        "[phpBB](https://www.phpbb.com/)",
        "GPL 2.0",
        {
          "status": "yes",
          "label": "Ninguno"
        },
        "Servidor, actualizaciones y moderación"
      ],
      [
        "[XenForo](https://xenforo.com/)",
        "Comercial",
        {
          "status": "no",
          "label": "De pago"
        },
        "Servidor, actualizaciones y moderación"
      ],
      [
        "[Invision](https://invisioncommunity.com/)",
        "Comercial",
        {
          "status": "no",
          "label": "De pago"
        },
        "Servidor, actualizaciones y moderación"
      ]
    ]
  }
}

Una factura con total y color propio

La última fila suma plazas y gastos visibles, también tras buscar. Bajar en la columna de cambio se considera favorable. El color de marca requiere Pro.

Abrir en el creador con estos datos

Ver especificación
{
  "type": "table",
  "theme": "editorial",
  "title": "Software del equipo, factura mensual",
  "source": "Finanzas sin auditar",
  "options": {
    "sticky": true,
    "search": true,
    "table": {
      "totals": [
        {
          "column": 2
        },
        {
          "column": 3
        }
      ],
      "change": [
        {
          "column": 4,
          "better": "down"
        }
      ],
      "brand": "#e4572e"
    }
  },
  "data": {
    "labels": [
      "Herramientas de diseño",
      "Chat de equipo",
      "Documentación y wiki",
      "CRM",
      "Analítica",
      "Videollamadas"
    ],
    "series": [],
    "columns": [
      {
        "name": "Herramienta"
      },
      {
        "name": "Equipo"
      },
      {
        "name": "Plazas",
        "kind": "number"
      },
      {
        "name": "Mensual",
        "kind": "number",
        "format": "affix:[\"\",\" €\"]"
      },
      {
        "name": "frente al mes anterior",
        "kind": "number",
        "format": "percent"
      }
    ],
    "rows": [
      [
        "Herramientas de diseño",
        "Diseño",
        6,
        540,
        12.5
      ],
      [
        "Chat de equipo",
        "Todos",
        24,
        210,
        0
      ],
      [
        "Documentación y wiki",
        "Todos",
        24,
        180,
        -5
      ],
      [
        "CRM",
        "Ventas",
        8,
        600,
        20
      ],
      [
        "Analítica",
        "Diseño",
        4,
        290,
        0
      ],
      [
        "Videollamadas",
        "Todos",
        24,
        150,
        -8
      ]
    ]
  }
}
Abrir esta tabla en el creador Empezar con Tabla


Preguntas frecuentes

¿Qué es una tabla en vivo?

Una tabla HTML real que buscadores y lectores de pantalla reconocen. Ordena por cabecera, filtra estados, añade barras y abre notas. En un teléfono se desplaza con la primera columna fija, o usa tarjetas opcionales. El texto sigue siendo texto.

¿En qué se diferencia de matriz y piruletas?

Esos gráficos muestran aspectos concretos: estados o una columna numérica. La tabla conserva toda la fila. Su botón de gráfico envía números o estados con recuentos al mismo motor.

¿Admite enlaces, totales y comparación?

Sí. Las celdas aceptan Texto o direcciones que abren otra pestaña. El total suma o promedia filas visibles. Los lectores pueden copiar o descargar CSV. Pro añade comparación y color propio.

¿Es una tabla comparativa?

Sí. Al insertarla sigue siendo HTML, conserva ordenación, filtros y accesibilidad para lectores de pantalla, en lugar de convertirse en una captura.