JSON a tabla HTML
Pega un array JSON y obtén código de tabla HTML listo para pegar, además de una vista previa en vivo. Las columnas se reúnen de todos los objetos, los valores anidados se pueden mostrar como JSON, aplanados o como tablas anidadas, y puedes añadir un tema CSS o estilos en línea para correos electrónicos.
Última actualización:
Cómo usar JSON a tabla HTML
- Pega tu JSON, sube un archivo .json o carga el ejemplo. Lo ideal es un array de objetos.
- Elige cómo se muestran los valores anidados: como texto JSON, aplanados en columnas como
address.cityo como tablas anidadas. - Elige un estilo y si el CSS va en un bloque
<style>, en línea en cada celda (lo mejor para correo electrónico) o no se incluye. - Ajusta los encabezados, la alineación de números, los enlaces, el título de la tabla y el nombre de clase.
- Revisa la vista previa y luego copia el HTML o descárgalo como archivo .html.
Cómo se convierte el JSON en una tabla
| Entrada JSON | Tabla resultante |
|---|---|
[{"a": 1, "b": 2}, {"a": 3, "c": 4}] | 2 filas; columnas a, b, c (los valores que faltan son celdas vacías) |
["red", "green", "blue"] | Una columna llamada value, una fila por elemento |
[["Name", "Age"], ["Ann", 31]] | La primera fila se usa como encabezado porque es todo texto |
{"name": "Ann", "age": 31} | Dos columnas: Propiedad y Valor |
{"u1": {"name": "Ann"}, "u2": {"name": "Bo"}} | Una fila por propiedad, con su nombre en la columna de clave |
{"total": 2, "data": [{…}, {…}]} | Se encuentra y convierte el array data |
El HTML generado
El resultado es un marcado de tabla semántico y accesible: una <table> con un <caption> opcional, un <thead> cuyas celdas de encabezado llevan scope="col" y un <tbody> con un <tr> por registro. Los lectores de pantalla usan el atributo scope para anunciar el nombre de la columna con cada celda. Las columnas numéricas se pueden alinear a la derecha para que los dígitos coincidan, lo que facilita comparar importes y cantidades.
Todo el texto se escapa (< se convierte en < y las comillas en entidades), así que el código es seguro para pegarlo en cualquier página aunque los datos contengan HTML. Los saltos de línea dentro de las cadenas se convierten en <br>.
Consejos para tablas en correos electrónicos y CMS
- Correo electrónico: elige Estilos en línea. Gmail, Outlook y muchos otros clientes eliminan o ignoran los bloques
<style>, pero conservan los atributosstyle. - WordPress y otros editores: pega el código en un bloque HTML o HTML personalizado, no en el editor visual.
- Datos anchos: envuelve la tabla en
<div style="overflow-x:auto">para que se desplace en horizontal en los móviles en lugar de romper el diseño. - Tu propio CSS: elige Sin CSS y define un nombre de clase que tu hoja de estilos ya utilice.
Preguntas frecuentes
¿Qué estructura JSON espera el conversor?
Un array de objetos, como [{"name": "Ann", "age": 31}, ...], donde cada objeto se convierte en una fila y cada clave en una columna. También acepta un array de valores simples (una columna), un array de arrays (la primera fila se convierte en encabezado si es todo texto), un objeto individual (mostrado como tabla de propiedad/valor) y un objeto cuyos valores son objetos (cada uno se convierte en una fila con su clave en la primera columna).
¿Qué pasa si los objetos tienen claves diferentes?
Las columnas son la unión de todas las claves, en el orden en que aparecen por primera vez. Una fila a la que le falta una clave recibe una celda vacía, así que no se pierde ningún dato.
¿Cómo se muestran los objetos y arrays anidados?
Tú eliges. Texto JSON escribe el valor anidado como JSON compacto dentro de la celda. Aplanar crea una columna por cada clave anidada, como address.city, y une los arrays de valores simples con comas. Tabla anidada genera una pequeña tabla dentro de la celda.
¿Debo usar un bloque style o estilos en línea?
Un bloque style mantiene el HTML pequeño y es ideal para páginas web. Los estilos en línea ponen el CSS en cada celda, que es lo que necesitan clientes de correo como Gmail y Outlook, porque muchos eliminan los bloques style.
¿Es seguro pegar el resultado en mi página?
Sí. Todo el texto del JSON se escapa para HTML, así que valores como <script> aparecen como texto y no se pueden ejecutar. Solo los enlaces http y https se convierten en enlaces clicables.
¿Se suben mis datos?
No. La conversión y la vista previa se ejecutan por completo en tu navegador, así que tu JSON nunca sale de tu dispositivo.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.
Herramientas relacionadas
Ver todas las de Conversores de datos y formatos de archivo →