NorfiPC
NorfiPC » Códigos » Crear y escribir CSV

Como escribir tablas en HTML desde un archivo CSV



Insertar tablas en las páginas con los datos e información en un archivo externo en formato CSV, usando JavaScript y la librería D3. Mostrar el contenido de hojas de Excel en la web. Como crear los archivos CSV manualmente.
Como escribir tablas en HTML desde un archivo CSV
Una pequeña librería llamada D3 (Data-Driven Documents), creada originalmente para generar archivos SVG y disponible en Github, puede ayudarnos a crear fácilmente tablas en archivos HTML, si tenemos los datos necesarios en un archivo CSV.
Este método es de mucha utilidad para mostrar contenido en la web que debemos actualizar regularmente, si tenemos los datos originales en una tabla de Excel o en un documento en otro formato.
Para actualizar el contenido que mostramos en la web, solo necesitamos modificar el archivo CSV manualmente o sustituirlo, subiendo el original al servidor.
Lógicamente, el mismo sistema podemos emplearlo para generar tablas offline, de forma local.



Generar tablas con los datos en un archivo CSV


La siguiente tabla se escribe en esta página con la información en un archivo de nombre "datos-ejemplo.csv".




Código para escribir una tabla desde un CSV


Para poder usar la librería y generar una tabla similar en una página web, sigue los siguientes pasos:
1- Crea un contenedor DIV en el lugar de la página donde deseas mostrar la tabla.
2- Carga la librería desde Github.
3- Sube al servidor el archivo CSV con los datos.
4- Usa el siguiente código para escribir la tabla.

El estilo de la tabla se puede modificar de acuerdo a nuestro gusto o necesidad, mediante CSS.



Escribir y mostrar tablas usando un botón en las páginas


Una alternativa para mostrar una tabla en una página web, cuando el contenido es extenso, es insertarla en una sección de la página a petición del lector, usando un botón u otro evento que inicie la función correspondiente, para cargar el contenido del archivo CSV.





¿Cómo crear los archivos CSV?


CSV es un sencillo formato de texto abierto, usado para para representar datos en forma de tablas.
CSV son las siglas en ingles de: "Valores separados por comas".
Se puede guardar en este formato hojas creadas en Excel, en otros programas o crearlos manualmente.
Para crear un CSV manualmente solo debemos copiar la información a un archivo de texto plano (por ejemplo con el Bloc de Notas).
Las filas se definen usando saltos de líneas y las columnas usando comas.
Los campos que contengan una coma, un salto de línea o comillas dobles, debemos encerrarlos entre comillas dobles.
Por ejemplo:




Más información sobre el uso de D3

Más información sobre el uso de la librería, se puede encontrar en la página del proyecto en Github: https://github.com/d3/d3/



Archivos de ejemplo para descargar


En el siguiente enlace se puede descargar un comprimido que contiene un archivo HTML con el código de ejemplo, el archivo CSV de muestra y el JS de la librería D3.
Descargar archivoDescargar archivos

Páginas relacionadas



Comparte esta página




Sígueme en las redes sociales


Sígueme en Google Plus Sígueme en Facebook Sígueme en Twitter Sígueme en Pinterest





 
Inicio | Mapa del sitio | Sobre mí | RSS | Buscar